DOM—节点操作

6.节点操作

6.1 为什么学节点操作

获取元素通常使用两种方式：

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

document.getElementById()
document.getElementByTagName()
document.querySelector 等
逻辑性不强，繁琐

2. 利用节点层级关系获取元素

利用父子兄节点关系获取元素
逻辑性强，但兼容性稍差

6.2 节点概述

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

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

一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

元素节点 nodeType 为 1
属性节点 nodeType 为2
文本节点 nodeType 为3(文本节点包括文字、空格、换行等)

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

6.3 节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

1. 父级节点

node.parentNode

返回某节点最近的父节点
如果指定的节点没有父节点则返回null

<div class="box">
    <span class="son"></span>
</div>
<script>
    var son = document.querySelector('.son');
    // 现在若要获取div元素，按照以前的方式：
    var box = document.querySelector('.box');
    //用获取父级节点的方式：(得到的是离元素最近的父节点)
    var box = son.parentNpde;
</script>

2. 子节点

1. node.childNodes(标准)

返回包含指定节点的子节点的集合，该集合为即时更新的集合。
获取所有的子节点，包含元素节点文本节点等等(所以换行也会被获取)
如果只想要获得里面的元素节点，则需要专门处理。所以一般不提倡使用childNodes

var ul = document.querySelector('ul');
for(var i = 0; i < ul.childNodes.length; i++) {
    if(ul.childNodes[i].nodeType == 1) {
        //ul.childNodes[i]是元素节点
        console.log(ul.childNodes[i]);
    }
}

2. node.children(非标准)

parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回(重点)

虽然children是一个非标准，但是得到了各个浏览器的支持，因此可以放心使用

var ul = document.querySelector('ul');
console.log(ul.children)//获取的正是里面的li

3.node.firstChild

firstChild返回的第一个子节点，找不到则返回null,也是返回所有类型的节点

4. node.lastChild

与firstChild用法一致，都不太推荐使用

5. node.firstElementChild

6. node.lastElementChild

以上两个方法都有兼容性问题，IE9以上才支持

那么问题来了

实际开发中，firstChild和lastChild包含其他类型节点，操作不方便，而firstElementChild和lastElementChild又有兼容性问题，所以要采用什么方式获取第一个和最后一个元素节点呢？

// 实际开发的写法
var ul = document.querySelector('ul');
console.log(ul.children[0]);// children存放是伪数组形式 柯同国此方法打印第一个li
console.log(ul.children[ul.children.length-1]);// 获取最后一个元素

3. 兄弟节点

1. node.nextSibling

nextSibling返回当前元素的下一个兄弟节点，找不到则返回null.同样也是包含所有的节点

2. node.previousSibling

previousSibling返回当前元素的上一个兄弟节点，找不到则返回null.同样也是包含所有的节点

3. node.nextElementSibling

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

4. node.previousElementSibling

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

注：3、4两个方法存在兼容性问题。IE9以上才支持。

问：如何解决兼容性问题？

答：自己封装一个兼容性函数

function getNextElementSibling(element) {
    var el = element;
    while(el = el.nextSibling) {
        if(el.nodeType === 1) {
            return el;
        }
    }
    return null;
}

6.4 创建节点

document.createElement('tagName')

document.createElement()方法创建有tagName指定的HTML元素。因为这些元素原先不存在，是根据需求自动生成的，所以也称作动态创建元素节点

6.5 添加节点

1. node.appendChild(child)

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

2. node.insertBefore(child,指定元素)

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

var ul = document.querySelector('ul');
// 1. 创建节点
var li = document.createElement('li');

// 2. 添加节点
// (1) appendChild() 又称为追加元素，类似于数组的push
ul.appendChild(li);
// (2) insertBefore()
ul.insertBefore(li,ul.children[0]);
//3. 在页面中添加一个元素分两步：1. 创建元素 (首先得有元素才能添加)2. 添加元素

6.6 删除节点

node.removeChild(child)

removeChild()方法从DOM中删除一个子节点，返回删除的节点

ul.removeChild(ul.children[0])

6.7 复制节点(克隆节点)

node.cloneNode()

cloneNode() 方法返回调用该方法的节点的一个副本。

注意：

如果括号里的参数为空或者false，则是浅拷贝，即只拷贝克隆节点本身，不克隆里面的子节点(内容);
为true则是深度拷贝，会复制节点本身以及里面所有的子节点

//1.复制节点
var li = ul.children[0].cloneNode();//浅拷贝
var li = ul.children[0].cloneNode(true);//深拷贝
// 2. 添加节点
ul.appendChild(li);

6.8 三种动态创建元素的区别

document.wirte()
element.innerHTML
document.createElement()

区别

document.write是直接将内容写入页面的内容流，但是当文档流执行完毕，他会导致页全部重绘(即当页面加载完毕之后调用这个方法会重新绘制一个页面，会与原来的页面结构大不相同)
innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
innerHTML创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结构稍微复杂
createElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML效率要比creatElement高

//1. document.write() 创建元素
document.write('<div>123</div>');
// 2. innerHTML 创建元素
var inner = document.querySelector(.inner);
//(1) 字符串拼接方式
for (var i = 0; i < 100; i++) {
    inner.innerHTML += '<a href="#">百度</a>'//创建时间：3s左右
}//
//(2) 数组方式
var arr = [];
for (var i = 0; i < 100; i++) {
    arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('')//创建时间：5ms左右

//3. document.createElement() 创建元素
var create = document.querySelector('.create');
for (var i = 0; i < 100; i++) {
    var a = document.createElement('a');
    create.appendChild(a);//创建时间：20ms左右
}

coder-lxy

发布了33 篇原创文章 · 获赞 0 · 访问量 375

私信关注