dom操作-CSDN博客

1、获取元素

getElementById(); 返回类型为element

getElementByTagName(); 返回类型为集合

getElementByClassName(); 返回类型为集合

querySelector(); 通过id或者类获取第一个符合条件的元素，返回值为element

querySelectorAll(); 通过id或者类获取所有符合条件的元素，返回值为NodeList

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app1">
        <span class="item1">aaa</span>
        <span class="item1">bbb</span>
        <span class="item1">ccc</span>
    </div>
    <div id="app2">
        <span class="item2">ddd</span>
        <span class="item2">eee</span>
        <span class="item2">fff</span>
    </div>
</body>
<script>
    var oDiv1 = document.getElementById('app1');
    console.log(oDiv1);
    var oDiv2 = document.getElementsByTagName('div');
    console.log(oDiv2);
    var oDiv3 = document.getElementsByClassName('item1');
    console.log(oDiv3);
    var oDiv4 = document.querySelector('#app1');
    console.log(oDiv4);
    var oDiv5 = document.querySelector('.item1');
    console.log(oDiv5);
    var oDiv6 = document.querySelectorAll('#app1');
    console.log(oDiv6);
    var oDiv7 = document.querySelectorAll('.item1');
    console.log(oDiv7);
</script>
</html>复制代码

note：

querySelector()、querySelectorAll()参数需要加'#'或者'.'，否则会返回null。

2、获取父元素 parentNode

比如获取<span class="item1">aaa</span>的父元素：

<script>
    var oSpan = document.getElementsByClassName('item1')[0];
    var oDiv = oSpan.parentNode;
    console.log(oDiv);
</script>复制代码

3、获取子元素 childNodes 返回一个nodelist 包括空白部分text

<script>
    var oDiv1 = document.getElementById('app1');
    var child = oDiv1.childNodes;
    console.log(child);
</script>复制代码

4、firstChild 获取到的节点包括空白部分text

<script>
    var oDiv1 = document.getElementById('app1');
    var child = oDiv1.firstChild;
    console.log(child);
</script>复制代码

5、firstElementChild 获取第一个元素element

<script>
    var oDiv1 = document.getElementById('app1');
    var child = oDiv1.firstElementChild;
    console.log(child);
</script>复制代码

6、获取下一个兄弟区别nextSibling和nextElementSibling

<script>
    var oSpan = document.getElementsByClassName('item1')[1];
    var child = oSpan.nextSibling;
    var child1 = oSpan.nextElementSibling;
    console.log(child);
    console.log(child1);
</script>复制代码

nextSibling包括空白部分，nextElementSibling获取到的是第一个元素。

7、获取前一个兄弟 previousSibling previousElementSibling 区别同上

8、创建元素 createElement

<script>
   var oDiv = document.createElement('div');
   document.body.appendChild(oDiv);
   console.log(document.body);
</script>复制代码

note：appendChild为尾插

<script>
    var app1 = document.getElementById('app1');
    var oDiv = document.createElement('div');
    document.body.insertBefore(oDiv,app1);
    console.log(document.body);
</script>
复制代码

note：insertBefore('新创建的元素',‘要插到的某个元素的前面’);

9、遍历删除元素

<script>
    var app1 = document.getElementById('app1');
    while(document.body.firstElementChild){
        document.body.removeChild(document.body.firstElementChild)
    }
    console.log(document.body);
</script>复制代码

注意appendChild();是将一个child元素添加到另一个元素的尾部，并删除它原来所在的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app1">
    <span class="item1">aaa</span>
    <span class="item1">bbb</span>
    <span class="item1">ccc</span>
</div>
<div id="app2">
    <span class="item2">ddd</span>
    <span class="item2">eee</span>
    <span class="item2">fff</span>
</div>
</body>
<script>
    let oDiv1 = document.getElementById('app1');
    let oDiv2 = document.getElementById('app2');
    while(oDiv1.firstElementChild){
        oDiv2.appendChild(oDiv1.firstElementChild);
    }

</script>
</html>复制代码

10、设置样式

oDiv.style.color = 'red';复制代码

11、设置属性

oDiv.setAttribute('type','button'); 复制代码

12、innerHtml和outerHtml、innerText、textContent的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>come on</h1>
</div>
</body>
<script>
    var oDiv = document.getElementsByTagName("div")[0];
    console.log(oDiv.innerHTML);
    console.log(oDiv.outerHTML);
    console.log(oDiv.innerText);
    console.log(oDiv.textContent);
</script>
</html>复制代码

innerHtml：获取元素里面的HTML标签和text内容。

outerHtml：获取元素本身和里面的HTML标签和text内容。

innerText：获取元素里面的text文本。

textContent：获取元素里面的text文本（包括空白部分）。