5.1 为什么学节点操作 获取元素通常使用两种方式： 1. 利用 DOM 提供的方法获取元素
document.getElementById() document.getElementsByTagName() document.querySelector 等 逻辑性不强、繁琐
2. 利用节点层级关系获取元素 利用父子兄节点关系获取元素
逻辑性强， 但是兼容性稍差 这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单
5.2 节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。 HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以 创建或删除。
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个 基本属性。 元素节点 nodeType 为 1 属性节点 nodeType 为 2 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等） 我们在实际开发中，节点操作主要操作的是元素节点
5.3 节点层级
利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
1. 父级节点 node.parentNode parentNode 属性可返回某节点的父节点，注意是最近的一个父节点 如果指定的节点没有父节点则返回 null
2. 子节点 1. parentNode.childNodes（标准） parentNode.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. parentNode.children（非标准） parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返 回 （这个是我们重点掌握的）。 虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
3. parentNode.firstChild firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。 4. parentNode.lastChild lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。 5. parentNode.firstElementChild firstElementChild 返回第一个子元素节点，找不到则返回null。 6. parentNode.lastElementChild lastElementChild 返回最后一个子元素节点，找不到则返回null。 注意：这两个方法有兼容性问题，IE9 以上才支持。
实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？ 解决方案： 1. 如果想要第一个子元素节点，可以使用 parentNode.chilren[0] 2. 如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]
案例：下拉菜单
① 导航栏里面的li 都要有鼠标经过效果，所以需要循环注册鼠标事件 ② 核心原理： 当鼠标经过li 里面的 第二个孩子 ul 显示， 当鼠标离开，则ul 隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; font-size: 14px; } .nav { margin: 100px; } .nav>li { position: relative; float: left; width: 80px; height: 41px; text-align: center; } .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } .nav>li>a:hover { background-color: #eee; } .nav ul { display: none; position: absolute; top: 41px; left: 0; width: 100%; border-left: 1px solid #FECC5B; border-right: 1px solid #FECC5B; } .nav ul li { border-bottom: 1px solid #FECC5B; } .nav ul li a:hover { background-color: #FFF5DA; } </style> </head> <body> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> </ul> <script> // 1. 获取元素 var nav = document.querySelector('.nav'); var lis = nav.children; // 得到4个小li // 2.循环注册事件 for (var i = 0; i < lis.length; i++) { lis[i].onmouseover = function() { this.children[1].style.display = 'block'; } lis[i].onmouseout = function() { this.children[1].style.display = 'none'; } } </script> </body> </html>3. 兄弟节点
1. node.nextSibling nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。 2. node.previousSibling previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。 3. node.nextElementSibling nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。 4. node.previousElementSibling previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。 注意：这两个方法有兼容性问题， IE9 以上才支持。
问：如何解决兼容性问题 ？ 答：自己封装一个兼容性的函数
function getNextElementSibling(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; }5.4 创建节点
document.createElement('tagName') document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在， 是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
5.4 添加节点
1. node.appendChild(child) node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。 2. node.insertBefore(child, 指定元素) node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。
案例：简单版发布留言案例
案例分析 ① 核心思路： 点击按钮之后，就动态创建一个li，添加到ul 里面。 ② 创建li 的同时，把文本域里面的值通过li.innerHTML 赋值给 li ③ 如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore
5.5 删除节点
node.removeChild(child) node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。
删除留言案例
案例分析 ① 当我们把文本域里面的值赋值给li 的时候，多添加一个删除的链接 ② 需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li ③ 阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { padding: 100px; } textarea { width: 200px; height: 100px; border: 1px solid pink; outline: none; resize: none; } ul { margin-top: 50px; } li { width: 300px; padding: 5px; background-color: rgb(245, 209, 243); color: red; font-size: 14px; margin: 15px 0; } </style> </head> <body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul> <script> // 1. 获取元素 var btn = document.querySelector('button'); var text = document.querySelector('textarea'); var ul = document.querySelector('ul'); // 2. 注册事件 btn.onclick = function() { if (text.value == '') { alert('您没有输入内容'); return false; } else { // console.log(text.value); // (1) 创建元素 var li = document.createElement('li'); // 先有li 才能赋值 li.innerHTML = text.value; // (2) 添加元素 // ul.appendChild(li); ul.insertBefore(li, ul.children[0]); } } </script> </body> </html>5.6 复制节点(克隆节点)
node.cloneNode() node.cloneNode() 方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点 注意： 1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。 2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。
案例：动态生成表格
案例分析 ① 因为里面的学生数据都是动态的，我们需要js 动态生成。 这里我们模拟数据，自己定义好 数据。 数据我们采取对象形式存储。 ② 所有的数据都是放到tbody里面的行里面。 ③ 因为行很多，我们需要循环创建多个行（对应多少人） ④ 每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格， 并且把数据存入里面（双重for循环） ⑤ 最后一列单元格是删除，需要单独创建单元格。 ⑥ 最后添加删除操作，单击删除，可以删除当前行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> table { width: 500px; margin: 100px auto; border-collapse: collapse; text-align: center; } td, th { border: 1px solid #333; } thead tr { height: 40px; background-color: #ccc; } </style> </head> <body> <table cellspacing="0"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> // 1.先去准备好学生的数据 var datas = [{ name: '魏璎珞', subject: 'JavaScript', score: 100 }, { name: '弘历', subject: 'JavaScript', score: 98 }, { name: '傅恒', subject: 'JavaScript', score: 99 }, { name: '明玉', subject: 'JavaScript', score: 88 }, { name: '大猪蹄子', subject: 'JavaScript', score: 0 }]; // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行 var tbody = document.querySelector('tbody'); for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr // 1. 创建 tr行 var tr = document.createElement('tr'); tbody.appendChild(tr); // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i] for (var k in datas[i]) { // 里面的for循环管列 td // 创建单元格 var td = document.createElement('td'); // 把对象里面的属性值 datas[i][k] 给 td // console.log(datas[i][k]); td.innerHTML = datas[i][k]; tr.appendChild(td); } // 3. 创建有删除2个字的单元格 var td = document.createElement('td'); td.innerHTML = '<a href="javascript:;">删除 </a>'; tr.appendChild(td); } // 4. 删除操作 开始 var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child) tbody.removeChild(this.parentNode.parentNode) } } // for(var k in obj) { // k 得到的是属性名 // obj[k] 得到是属性值 // } </script> </body> </html>5.8 三种动态创建元素区别
document.write() element.innerHTML document.createElement() 区别 1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘 2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘 3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂 4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰 总结：不同浏览器下，innerHTML 效率要比 creatElement 高
