节点操作
1.节点操作
1.1 为什么学节点操作
获取元素通常使用两种方式： 1. 利用 DOM 提供的方法获取元素 document.getElementById()
document.getElementsByTagName()
document.querySelector 等
逻辑性不强、繁琐
2. 利用节点层级关系获取元素 利用父子兄节点关系获取元素
逻辑性强， 但是兼容性稍差
这两种方式都可以获取元素节点,我们后面都会使用，但是节点操作更简单
1.2. 节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
1.元素节点 nodeType 为 1 2.属性节点 nodeType 为 2 3.文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等） 我们在实际开发中，节点操作主要操作的是元素节点
1.3. 节点层级
利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
1.4.1. 父级节点
1. 父级节点
node.parentNode 1>parentNode 属性可返回某节点的父节点，注意是最近的一个父节点 2>如果指定的节点没有父节点则返回 null
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(erweima.parentNode);
</script>1.4. 2子节点
1.所有子节点
1. parentNode.childNodes（标准） parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。 注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。 如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes
2. 子元素节点
2. parentNode.children（非标准） parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返 回 （这个是我们重点掌握的）。 虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
// DOM 提供的方法（API）获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
</script>3.第一个子节点
3. parentNode.firstChild firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
4.最后一个子节点
4.parentNode.lastChild lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
5.第一个子元素节点
5. parentNode.firstElementChildfirstElementChild 返回第一个子元素节点，找不到则返回null。 6.最后一个子元素节点
6. parentNode.lastElementChild lastElementChild 返回最后一个子元素节点，找不到则返回null。 注意：这两个方法有兼容性问题，IE9 以上才支持。
实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？ 解决方案： 1. 如果想要第一个子元素节点，可以使用 parentNode.chilren[0] 2. 如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<script>
var ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>1.5兄弟节点
1.下一个兄弟节点
1. node.nextSibling nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
2.上一个兄弟节点
2. node.previousSibling previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2. nextElementSibling 得到下一个兄弟元素节点
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);
</script>3.下一个兄弟元素节点（有兼容性问题）
3. node.nextElementSibling nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null
4.上一个兄弟元素节点（有兼容性问题）
4. node.previousElementSibling previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。 注意：这两个方法有兼容性问题， IE9 以上才支持。
5.问：如何解决兼容性问题 ？
答：自己封装一个兼容性的函数
function getNextElementSibling(element){
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
1.6 .1创建节点
document.createElement('tagName') document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在， 是根据我们的需求动态生成的，所以我们也称为动态创建元素节点
1.6.2添加节点
1. node.appendChild(child) node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。
2. node.insertBefore(child, 指定元素)node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。
<ul>
<li>123</li>
</ul>
<script>
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
</script>1.7 删除节点
node.removeChild(child) node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
// 1.获取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2. 删除元素 node.removeChild(child)
// ul.removeChild(ul.children[0]);
// 3. 点击按钮依次删除里面的孩子
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
}
</script>1.8 复制（克隆）节点
node.cloneNode() node.cloneNode() 方法返回调用该方法的节点的一个副本。
注意： 1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。 2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。
<ul>
<li>1111</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>1.9 创建元素的三种方式
1>document.write() 2>innerHTML 3>document.createElement()
区别 1. document.write 是直接将内容写入页面的内容流，会导致页面全部重绘 2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘 3. innerHTML 复制节点的时候，不会复制原先节点的事件，会存在内存泄露问题 4. 如果页面创建元素很多，建议使用 innerHTML 因其效率更高（不要拼接字符串，采取数组形式拼接） 5. 如果页面创建元素较少，建议使用 createElement() 总结：不同浏览器下，innerHTML 效率要比 creatElement 高
<script>
// 三种创建元素方式区别
// 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
var btn = document.querySelector('button');
btn.onclick = function() {
document.write('<div>123</div>');
}
// 2. innerHTML 创建元素
var inner = document.querySelector('.inner');
for (var i = 0; i <= 100; i++) {
inner.innerHTML += '<a href="#">百度</a>'
}
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
// 3. document.createElement() 创建元素
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
</script>innerTHML和createElement效率对比
innerHTML字符串拼接方式（效率低）
<script>
function fn() {
var d1 = +new Date();
var str = '';
for (var i = 0; i < 1000; i++) {
document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>createElement方式（效率一般）
<script>
function fn() {
var d1 = +new Date();
for (var i = 0; i < 1000; i++) {
var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '2px';
div.style.border = '1px solid red';
document.body.appendChild(div);
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>innerHTML数组方式（效率高）
<script>
function fn() {
var d1 = +new Date();
var array = [];
for (var i = 0; i < 1000; i++) {
array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
}
document.body.innerHTML = array.join('');
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>腾讯云开发者
