DOM节点操作

时间：2019-11-10 23:19:50 阅读：118 评论：0 收藏：0 [点我收藏+]

为什么学习节点操作？节点操作的目的是为了获取元素

获取元素通常使用两种方法

1、利用DOM提供的方法获取元素

document.getElementById()

document.getElementByTagName()

document.querySelector 等等

逻辑性不强，且比较繁琐

2、利用节点层次关系获取元素

利用父子兄节点关系获取元素

逻辑性强、但是兼容性稍差

这两种方法都可以获取节点元素，相对而言节点操作更简单

一、节点概述

网页中所有内容都是节点（文本、标签、注释等），在DOM中，节点使用node来表示。

HTML DOM树中的所有节点均可以通过JavaScript进行访问，所以的HTML元素（节点）均可以被修改，也可以创建或是被删除

技术分享图片

元素节点 nodeType 为 1
属性节点 nodeType 为 2
元素节点 nodeType 为 3（文本节点包含文字、空格、换行等）

在实际开发中，节点操作主要操作的是元素节点

（一）、父节点

node.parentNode 父节点

注意：得到的是离元素最近的父节点（他爸）

如果指定的节点没有父节点就返回为空

实例

先获取子节点，再使用 parentNode 获取当前子节点的父节点。

<body>
<div class=‘big-box‘>
    <div class="box">
        <span class="ins"></span>
    </div>
</div>
<script>
    // 父节点 parentNode
    var ins = document.querySelector(‘.ins‘);
    console.log(ins.parentNode);
</script>
</body>

技术分享图片

（二）、子节点

1、parentNode.childNodes （标准）

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为及时更新的集合

注意：

1、childNodes返回的子节点，包含元素节点、文本节点等等；

2、如果想要获得里面的节点，则需要进行专门的处理，太过繁琐，所以一般不推荐使用 childNodes；

实例：

<body>
<ul>
    <li>我是小丽</li>
    <li>我是小丽</li>
    <li>我是小丽</li>
    <li>我是小丽</li>
</ul>
<script>
    var ul = document.querySelector(‘ul‘);
    console.log(ul.childNodes);
</script> 
</body>

ul元素中只有4个子元素，却返回了9个节点。

这是因为childNodes 返回的节点也会包含页面中的文本节点（文本节点包含文字、空格、换行等），因为每个元素之间都有换行所以才会返回9个节点

技术分享图片

只获取子节点中的元素节点，需要先使用for循环遍历所有的子节点，然后进行 if条件判断，使用 nodeType 判断节点类型是否是元素节点；

注意：

元素节点 nodeType 为 1
属性节点 nodeType 为 2
元素节点 nodeType 为 3（文本节点包含文字、空格、换行等）

<body>
<ul>
    <li>我是小丽</li>
    <li>我是小丽</li>
    <li>我是小丽</li>
    <li>我是小丽</li>
</ul>
<script>
    var ul = document.querySelector(‘ul‘);
    console.log(ul.childNodes);
    for(var i=0;i<ul.childNodes.length;i++){
        if(ul.childNodes[i].nodeType == 1){
        console.log(ul.childNodes[i]);
        }}
</script> 
</body>

技术分享图片

2、parentNode.children （非标准）

parentNode.children 是一个只读属性，只返回子元素节点返回，其余的节点不返回（这个属性是需要重点掌握的）

虽然 children 是个非标准属性，但是也得到了各个浏览器的支持，所以可以放心使用

实例：

获取ul的所有子节点，使用 children 可以只选择元素子节点，而不包含文本节点。

<body>
<ul>
    <li>我是小丽</li>
    <li>我是小丽</li>
    <li>我是小丽</li>
    <li>我是小丽</li>
</ul>
<script>
    var ul = document.querySelector(‘ul‘);
    console.log(ul.children);
</script> 
</body>

技术分享图片

（三）、第一个子节点和最后一个子节点

parentNode.firstChild 返回第一个子节点，找不到返回 null ，也是包含所有的节点类型，不管是文本节点还是元素节点

parentNode.lastChild 返回最后一个子节点，找不到返回 null ，也是包含所有的节点类型，不管是文本节点还是元素节点

实例：

<ol>
    <li>我是小丽1</li>
    <li>我是小丽2</li>
    <li>我是小丽3</li>
    <li>我是小丽4</li>
</ol>
<script>
    var ul = document.querySelector(‘ul‘);
    console.log(ul.firstChild);
    console.log(ul.lastChild);
</script>

技术分享图片

parentNode.firstElementChild 返回第一个子元素节点，找不到返回 null

parentNode.lastElementChild 返回最后一个子元素节点，找不到返回 null

注意：两个方法都有兼容性问题，IE9以上的浏览器才支持。

实例：

var ol = document.querySelector(‘ol‘);
    console.log(ol.firstElementChild);
    console.log(ol.lastElementChild);

技术分享图片

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 firstElementChild 又有兼容性问题，怎样获得第一个子元素节点或是最后一个子元素节点呢？

解决方案：

实际开发的写法，既没有兼容性问题又可以返回第一个子元素

使用 children 可以只选择元素子节点，而不包含文本节点，children 返回的是子元素伪数组

实例：

当知道子元素的个数时可以直接使用数值进行索引，获取到最后一个子元素

    var ol = document.querySelector(‘ol‘);
    console.log(ol.children[0]);
    console.log(ol.children[3]);

技术分享图片

当不知道子元素的个数时，没办法直接使用数值索引，所以要使用 length 方法方法进行判断（children.length-1）。

ol.children[ol.children.length - 1]

console.log(ol.children[ol.children.length - 1]);

技术分享图片

（五）兄弟节点

1、找到兄弟节点

node.nextSibling 返回当前元素下一个兄弟节点，包含元素节点或者是文本节点（空格、换行等）如果找不到接返回null

node.previousSibling 返回当前元素上一个兄弟节点，包含元素节点或者是文本节点（空格、换行等）如果找不到接返回null

实例：

<body>
    <div>我是div</div>
    <span>我是span</span>
<script>
    var div = document.querySelector(‘div‘);
    console.log(div.nextSibling);
    console.log(div.previousSibling);
</script>

技术分享图片

2、找到兄弟元素节点

node.nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null

node.previousElementSibling 返回当前元素上一个兄弟元素节点，找不到则返回null

注意：这两个方法有兼容性问题，IE9以上的才支持

var div = document.querySelector(‘div‘);
console.log(div.nextElementSibling);

技术分享图片

如何解决兼容性问题？

可以封装一个函数，这样就可以解决兼容性问题。

    var div = document.querySelector(‘div‘);
    console.log(div.nextElementSibling);
    function getNextElementSibling(element){
        var el = element;
        while(el = el.nextSibling){
            if(el.nodeType == 1){
                return el
            }
        }
        return null;
    }

二、创建和添加节点

（一）创建节点

document.createElement（‘tagName‘）

document.createElement（）方法创建由 tagName 指定的 HTML 元素，因为这些元素原先不存在，是根据我们的要求动态生成的，我们也称为 动态创建元素节点。

（二）添加节点

node.appendChild(child)

node.appendChild( ) 方法将一个节点添加到指定的父元素的子节点列表末尾。类似于CSS里面的 after伪元素

node 是父级；child是子级。在后面追加元素

node.insertBefore(child,指定元素)

node.insertBefore( ) 方法将一个节点添加到父节点指定的子节点前面。类似于CSS里面的 before伪元素

实例：

<body>
    <ul>
    <li>111</li>
    </ul>
<script>
var li = document.createElement(‘li‘);
var ul = document.querySelector(‘ul‘);
var li2 = document.createElement(‘li‘);
ul.appendChild(li);
ul.insertBefore(li2,ul.children[0]);
</script>