-
理解 DOM 节点
页面由一个一个节点组成，页面的每一部分都是一个节点
- Document 是页面中最大的节点，但不属于元素节点，它是一个承载所有节点的容器，每个页面都有一个 Document 节点
- html 是页面中最大的元素节点，叫做根节点，它承载所有元素节点
- head、body、div 等都属于一般元素节点，各自性能都不雷同
- 文本节点承载文本内容，每一段文本都是一个文本节点，文本节点包含换行和空格，个别文本节点是元素节点的子节点
- 属性节点指元素身上的用于形容元素的属性
- 正文节点个别以独立内容呈现，用于阐明文本
-
DOM 节点属性
-
节点编号（nodeType）
- 元素节点：1
- 属性节点：2
- 文本节点：3
- 正文节点：8
- 文档节点：9
-
节点名称（nodeName）
- 元素节点：大写标签名
- 属性节点：属性名
- 文本节点：#text
- 正文节点：#comment
-
节点值（nodeValue）
- 元素节点：null
- 属性节点：属性值
- 文本节点：文本内容（包含换行和空格）
- 正文节点：文本内容（包含换行和空格）
-
获取 DOM 节点 API
- 获取元素中所有子节点 ：
获取元素的变量.childNodes
能够应用 length 属性获取伪数组长度，和遍历伪数组内容
返回值：由元素的所有子节点汇合，是一个伪数组 - 获取元素中所有子元素节点 ：
获取元素的变量.children
能够应用 length 属性获取伪数组长度，和遍历伪数组内容
返回值：由元素的所有子元素节点汇合，是一个伪数组
- 获取元素中第一个子节点 ：
获取元素的变量.firstChild
返回值：元素的第一个子节点 - 获取元素中第一个子元素节点 ：
获取元素的变量.firstElementChild
返回值：元素的第一个子元素节点
- 获取元素中最初一个子节点 ：
获取元素的变量.lastChild
返回值：元素的最初一个子节点 - 获取元素中最初一个子元素节点 ：
获取元素的变量.lastElementChild
返回值：元素的最初一个子元素节点
- 获取元素的上一个兄弟节点 ：
获取元素的变量.previousSibling
返回值：上一个兄弟节点 - 获取元素的上一个兄弟元素节点 ：
获取元素的变量.previousElementSibling
返回值：上一个兄弟节点
- 获取元素的下一个兄弟节点 ：
获取元素的变量.nextSibling
返回值：上一个兄弟节点 - 获取元素的下一个兄弟元素节点 ：
获取元素的变量.nextElementSibling
返回值：下一个兄弟元素节点
- 获取元素的父节点 (最高失去 Document)：
获取元素的变量.parentNode
返回值：元素的父节点 - 获取元素的父元素节点 ：
获取元素的变量.parentElement
返回值：元素的父元素节点
- 获取元素的所有属性节点 ：
获取元素的变量.attribute -
创立 DOM 节点的 API
- 创立元素节点：
document.createElement(‘标签名’)
返回值：创立好的元素节点 - 创立文本节点 ：
document.createTextNode(‘文本内容’)
返回值：创立好的文本节点 - 创立正文节点 ：
document.createComment(‘正文内容’)
返回值：创立好的正文节点 - 创立属性节点 ：
document.createAttribute(‘属性名’)
返回值：创立好的属性节点 -
DOM 节点操作 API
-
插入节点：将一个节点插入到另一个节点外部
在父节点外部最初插入节点：父节点.appendChild(子节点) 在父节点外部指定元素前插入节点 父节点.insertBefore(子节点, 指定元素) -
删除节点：将一个存在的节点删除
将节点从父元素中删除：父节点.removeChild(子节点) 将本人从父结点中删除：节点.remove() -
替换节点：应用一个节点替换一个存在的节点
父节点.replaceChild(替换节点, 被替换节点) -
克隆节点：将某一个节点复制一份
节点.cloneNode(参数) 参数为选填，默认为 true，示意克隆所有节点，参数为 false 时，示意不克隆后辈节点 -
文档碎片容器
作用：用于承载多个节点，之后一次性将所有节点插入到页面中，插入页面时，文档碎片节点不会被插入到页面中，缩小 DOM 操作，晋升性能
- 创立一个文档碎片容器
const fr = document.createDocumentFragment() // 向文档碎片容器增加内容 fr.appendChild(节点)