赏

Js DOM

前端 0 340 0
发表于: 2020-05-31 17:44:12

简介: 暂无~

什么是DOM

DOM，文档对象模型（Document Object Model）。

HTMLCollection 对象

注意：IE9及以上版本才支持！

根据id获取元素，返回一个：document.getElementById()

根据标签获取元素，返回多个：document.getElementsByTagName()

根据选择器或标签获取第一个元素，返回一个：document.querySelector()

根据选择器或标签获取所有元素，返回多个：document.querySelectorAll()

<body>
    <div id="wrap">
        <p class="ppp">我是p1</p>
        <p class="ppp">我是p2</p>
        <span>我是span</span>
    </div>
    <script>
        var ele = document.getElementById('wrap')
        console.log(ele);   //<div id="wrap">...</div>
        var ele1 = document.getElementsByTagName('p')
        console.log(ele1);  //HTMLCollection(2) [p, p]
        console.log(ele1[0]);  //<p class="ppp">我是p1</p>
        var ele2 = document.getElementsByClassName('ppp')
        console.log(ele2);  //HTMLCollection(2) [p.ppp, p.ppp]
        console.log(ele2[0]);  //HTMLCollection(2) [p.ppp, p.ppp]
        var ele3 = document.querySelector('#wrap')
        console.log(ele3);  //<div id="wrap">...</div>
        var ele4 = document.querySelector('p')
        console.log(ele4);  //<p class="ppp">我是p1</p>
        var ele5 = document.querySelectorAll('p')
        console.log(ele5);      //NodeList(2) [p, p]
        console.log(ele5[0]);  //<p class="ppp">我是p1</p>
    </script>
</body>

创建新的HTML元素 - appendChild()

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

创建一个新的元素：document.createElement()

创建一个新的文本节点：document.createTextNode()

在一个已存在的元素的尾部添加元素：appendChild()

在一个已存在的元素的开头添加元素：insertBefore(‘要添加的元素’,‘已存在的元素’)

<body>
    <div id="ele">
        <p id="firstp">我是firstp</p>
        <p id="secondp">我是secondp</p>
    </div>
    <script>
        // 创建一个新的元素
        var ele1 = document.createElement('p')
        // 创建一个新的文本节点
        var ele2 = document.createTextNode('我是新增的p')
        // 将文本节点添加到元素中
        ele1.appendChild(ele2)

        var ele = document.getElementById('ele')
        // 在一个已存在的元素的末尾添加元素
        // ele.appendChild(ele1)

        var secondp = document.getElementById('secondp')
        // 在一个已存在的元素的开头添加元素
        ele.insertBefore(ele1, secondp)
    </script>
</body>

移除已存在的元素 - removeChild()

要移除一个元素，你需要知道该元素的父元素。

<body>
    <div id="ele">
        <p id="firstp">我是firstp</p>
        <p id="secondp">我是secondp</p>
    </div>
    <script>
        var ele = document.getElementById('ele')
        var firstp = document.getElementById('firstp')
        ele.removeChild(firstp)
    </script>
</body>