二.DOM进阶
（一）.DOM节点操作基本介绍
1.1节点操作的作用：
获取页面元素。
- 利用DOM提供的方法获取元素
- document.getElementById()
- document.getElementsByTagName()
- document.querSelector等
- 逻辑性不强、繁琐
- 利用节点层级关系获取元素
- 利用父子兄弟节点关系获取元素
- 逻辑性强，但兼容性差
1.2节点概述
- 网页中的所有内容都是节点（标签、属性、文本、注释等等），在DOM中，节点使用Node来表示。
- HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。
一般的，节点至少拥有nodeType(节点类型)、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
- 元素节点 nodeType为1
- 属性节点nodeType为2
- 文本节点nodeType为3（文本节点包含文字、空格、换行等）
【总结】我们在实际开发中，节点操作主要操作的是"元素节点"。
二、节点层级
2.1 父级节点
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
node.parentNode
- parentNode属性可返回某节点的父节点，注意是最近的一个父节点
- 如果指定的节点没有父节点则返回null
2.2 子节点
parentNode.childNodes(标准)
parentNode.childNodes返回包括指定节点的子节点的集合，该集合为即时更新的集合
注意：返回值里面包括了所有的子节点，包括元素节点，文本节点等。
如果想到获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes
var ul = document.querySelector('ul'); for(var i = 0; i <ul.childNodes.lenth;i++){ if(ul.childNodes[i].nodeType ==1){ //ul.childNodes[i]是元素节点 console.log(ul.childNodes[i]); } }
重点掌握
parentNodes.children(非标准)
parentNodes.children是一个只读属性，返回所有的子元素节点，它只返回子元素节点,其余节点不返回（重点掌握）
虽然children是一个非标准，但是已经得到了各个浏览器的支持，因此放心使用
parentNode.firstChild
firstChild返回第一个子节点，找不到就返回null，同样，也是包含所有的节点
parentNode.lastChild
lastChild返回最后一个子节点吗，找不到则返回null，同样，也是包含所有的节点
parentNode.firstElementChild
firstElementChild返回第一个子元素节点，找不到则返回null
parentNode.lastElementChild
lastElementChild返回最后一个子元素节点，找不到则返回null
注意：后面两个方法有兼容性问题，IE9以上才支持
// 1.firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild); console.log(ol.lastChild);
// 2.firstelementChild 返回第一个元素节点
console.log(ol.firstElementChild); console.log(ol.lastElementChild);
实际开发的写法 既没有兼容性问题还能返回第一个子元素
console.log(ol.children[0]); console.log(ol.children[ol.children.length-1]);
2.3 兄弟节点
所有节点
node.nextSibling
nextSibling返回当前元素的下一个兄弟节点，找不到则返回null，同样，也是包括所有节点
node.previousSibling
previousSiblin返回当前元素的上一个兄弟节点，找不到则返回null，同样，也是包括所有节点
特指元素节点
node.nextElementSibling
nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null
node.previousElementSibling
previousElementSibling返回当前元素上一个兄弟节点找不到就返回null
注意：这两个方法有兼容性问题，IE9以上才支持解决兼容性问题：自己封装一个兼容性函数
三、节点操作
3.1 创建节点
document.createElement(‘tagName’);
document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在是根据我们的需求动态生成的，所有我们也称为动态创建元素节点
var li = document.createElement('li');
3.2 添加节点
node.appendChild(child)
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素
node.insertBefore(child,指定元素)
// 2.添加节点 node.appendChild(child) node 父级 child子级
// 后面追加元素，类似数组中的push var ul = document.querySelector('ul'); ul.appendChild(li);
// 3.添加节点 node.insertBefore(child,指定元素);
var lili = document.createElement('li'); ul.insertBefore(lili,ul.children[0]);
3.3 删除节点
node.removeChild(child)
node.removeChild() 方法从DOM中删除一个子节点，返回删除的节点``
// 1.获取元素 var ul = document.querySelector('ul'); // 2.删除元素 node.removeChild(child); ul.removeChild(ul.children[0]);
3.4 复制节点（克隆节点）
node.cloneNode()
node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
注意：
如果括号参数为空或者为false，则是浅拷贝，即只是克隆复制节点本身，不克隆里面的子节点
如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点
1.node.cloneNode(); //浅拷贝，不复制内容，只复制标签
2.node.cloneNode(true); //深拷贝，复制内容、复制标签
3.5 三种创建元素的区别
document.write() element.innerHTML document.createElement()
区别
document.write是直接将内容写在页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
例：
var btn = document.querySelector('button'); btn.onclick = function() { document.write('<div>臭猪</div>'); }
点击前：
点击后：
页面重写了！！
innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂createElement() 创建多个元素效率稍低一点点，但是结构更清晰总结：不同浏览器，innerHTML效率要比creatElement高
var inner = document.querySelector('.inner'); var arr = []; for(var i=0;i<=100;i++) { arr.push('<a href="#">百度</a>'); } inner.innerHTML = arr.join('');
