一、节点概述
- 网页中的所有内容都是节点(标签、属性、文本、注释等)，使用node表示。HTML、DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除。
- 利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
- 一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性。在实际开发中，节点操作主要操作的是元素节点。
- 元素节点nodeType为1。
- 属性节点nodeType为2。
- 文本节点nodeType为3（文本节点包含文字、空格、换行等）。
二、获取父节点
1.子元素.parentNode
返回某节点的父节点，得到的是离元素最近的父级节点(即亲爸爸)。如果找不到父节点，就返回为null。
三、获取子节点(伪数组)
1.父节点.children
返回所有的子元素节点，只返回子元素节点，其余节点不返回。
返回第一个子元素节点的写法：父节点.children[0]
返回最后一个子元素节点的写法是：父节点.children[parentNode.children.length - 1]
四、获取兄弟节点
- 获取下一个兄弟节点：
元素.nextElementSibling- 返回当前元素的下一个兄弟元素节点，如果找不到则返回null。
- 获取上一个兄弟节点：
元素.previousElementSibling- 返回当前元素的上一个兄弟元素节点，如果找不到则返回null。
五、创建节点/添加节点
- 步骤：先创建节点再添加节点。
- 创建节点语法格式：
document.createElement('标签名') - 添加节点：
- 在最后面追加节点：
父元素.appendChild(子元素) - 在某个子元素的前面追加节点：
父元素.insertBefore(要插入的元素, 在哪个元素前面)
- 在最后面追加节点：
六、删除节点
1.父元素.removeChild(要删除的元素)
删除节点必须通过父元素删除。
七、复制节点
1.元素.cloneNode(布尔值)
- 默认是fales，是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
- 若为true，是深度拷贝，会复制节点本身以及里面所有的子节点。