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左右
}