共计 2287 个字符，预计需要花费 6 分钟才能阅读完成。
节点概述
网页中所有的内容都是节点（标签、属性、文本、注释等），再 DOM 中，节点使用 node 来表示
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除
节点至少拥有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性
节点操作主要操作的是元素节点
元素节点（所有的标签 比如div，html是根节点）
nodeType为 1属性节点（所有的属性 比如class）
nodeType为 2文本节点（所有的文本）
nodeType为 3 （文本节点包含文字、空格、换行等）
节点层级
利用DOM树可以把节点划分为不同层级关系，常见的是父子兄层级关系
查找父级节点
子元素.parentNodeparentNode 属性可以返回某节点的父节点，是最近的一个父节点
如果指定的节点没有父节点则返回null
查找子级节点
// 标准
父元素.childNodes
// 如果只想要里面的元素节点，则需要专门处理 一般不提倡使用childNodes
let ul = document.querySelector('ul')
for(let i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeType === 1) {
// ul.childNodes[i] 是元素节点
console.log(ul.childNodes[i])
}
}父元素.childNodes 返回包含指定节点的集合，该集合为即时更新的集合
返回的节点里面包含了所有的子节点，包括元素节点，文本节点等
常用
// 非标准
父元素.children父元素.children 是一个只读属性，返回所有的子元素节点，其他节点不返回
虽然children是个非标准，但是得到了各个浏览器的支持，因此可以放心使用
父元素.firstChildfirstChild 返回第一个子节点，找不到则返回null
同样，也是包含所有的节点
父元素.lastChildlastChild 返回最后一个子节点，找不到则返回null
同样，也是包含所有的节点
常用
父元素.firstElementChildfirstElementChild 返回第一个子元素节点，找不到则返回null
父元素.lastElementChildlastElementChild 返回最后一个子元素节点，找不到则返回null
这两个方法有兼容性问题，IE9以上才支持
解决方法：如果想要第一个或最后一个子元素节点，可以使用
// 第一个子元素节点
父元素.chilren[0]
// 最后一个子元素节点
父元素.chilren[父元素.chilren.length - 1]查找兄弟节点
父元素.nextSibling
nextSibling返回当前元素的下一个兄弟节点（包含所有的节点），找不到则返回null
父元素.previousSibling
previousSibling返回当前元素的上一个兄弟节点（包含所有的节点），找不到则返回null
常用
父元素.nextElementSibling
nextElementSibling返回当前元素的下一个兄弟节点，找不到则返回null
父元素.previousElementSibling`
previousElementSibling返回当前元素的上一个兄弟节点，找不到则返回null
这两个方法有兼容性问题，IE9以上才支持
解决方法：
funciton getElenemtSibling(element) {
let el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}创建节点
document.createElement('标签名')
document.createElement('标签名')方法创建由 标签名 指定的HTML元素因为这些因素原先不存在，是根据我们的需求动态生成的，所以我们称为动态创建元素节点
追加节点
父元素.appendChild(要添加的元素)
父元素.appendChild(要添加的元素)方法将一个节点添加到指定节点的子节点列表末尾类似于CSS里面的after伪元素
父元素.insertBefore(要添加的元素, 在那个元素前面)
父元素.insertBefore(要添加的元素, 在那个元素前面)方法将一个节点添加到父节点的指定节点前面类似于CSS里面的before伪元素
删除节点
父元素.removeChild(要删除的元素)
父元素.removeChild(要删除的元素)方法从DOM中删除父元素的一个节点，返回删除的节点再JavaScript原生DOM操作中，要删除元素必须通过父元素删除
如不存在父子级关系则删除不成功
克隆节点（复制节点）
元素.cloneNode(布尔值)
元素.cloneNode(布尔值)方法返回调用该方法的节点的一个副本如果括号参数为 true，则是深拷贝，即克隆复制节点本身，克隆里面的子节点
如果括号参数为 空或 false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
三种动态创建元素区别
document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则他回导致页面全部重绘element.innerHTML是将内容写入某个 DOM 节点，不会导致页面全部重绘，创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂document.createElement()创建多个元素效率稍低一些，但是结构更清晰
