本文详细介绍了DOM节点的类型（如元素、文本、属性和注释），以及如何通过各种方法获取、创建、插入、替换、克隆、移除节点，以及使用文档碎片提高操作效率。
DOM节点介绍
- 节点：浏览器页面文档中一个个小小的组成部分
- DOM节点有很多类型，常见DOM节点类型：
- 元素节点：页面标签元素，组成html页面的结构
- 文本节点：标签包裹的文本内容（包括空格、换行等）
- 属性节点：用于描述标签元素的节点，不能独立存在
- 注释节点：html页面中的注释内容
<div class="box">
你好
<span>hello</span>
世界
<span>world</span>
<!-- 我是注释内容 -->
</div>
div.box元素节点内有哪些节点？
1. 文本节点：一个换行 + 四个空格 + 你好 + 一个换行 + 四个空格
2. 元素节点：span元素
3. 文本节点：一个换行 + 四个空格 + 世界 + 一个换行 + 四个空格
4. 元素节点：span元素
5. 文本节点：一个换行 + 四个空格
6. 注释节点：我是注释内容
7. 文本节点：一个换行- 注意：js中所有的节点都是复杂类型数据
节点获取
- 之前学习过的DOM节点获取方法
- 非常规获取元素节点
document.documentElementdocument.headdocument.bodydocument.scriptsdocuemnt.imagesdocument.forms
- 常规获取元素节点
元素.getElementById元素.getElementsByClassName元素.getElementsByTagName元素.querySelector元素.querySelectorAll
- 非常规获取元素节点
- 新的DOM节点获取方法
- 子节点获取
- childNodes
- 语法：
节点.childNodes - 获取节点的所有子节点组成的伪数组
- 语法：
- children
- 语法：
节点.children - 获取节点的所有子元素节点组成的伪数组
- 语法：
- firstChild
- 语法：
节点.firstChild - 获取节点的第一个子节点
- 语法：
- lastChild
- 语法：
节点.lastChild - 获取节点的最后一个子节点
- 语法：
- firstElementChild
- 语法：
节点.firstElementChild - 获取节点的第一个子元素节点
- 语法：
- lastElementChild
- 语法：
节点.lastElementChild - 获取节点的最后一个子元素节点
- 语法：
- childNodes
- 兄弟节点获取
- previousSibling
- 语法：
节点.previousSibling - 获取节点的上一个兄弟节点
- 语法：
- nextSibling
- 语法：
节点.nextSibling - 获取节点的下一个兄弟节点
- 语法：
- previousElementSibling
- 语法：
节点.previousElementSibling - 获取节点的上一个兄弟元素节点
- 语法：
- nextElementSibling
- 语法：
节点.nextElementSibling - 获取节点的下一个兄弟元素节点
- 语法：
- previousSibling
- 父节点获取
- parentNode
- 语法：
节点.parentNode - 获取节点的父节点
- 语法：
- parentElement
- 语法：
节点.parentElement - 获取节点的父元素节点
- 语法：
- parentNode
- 属性节点获取
- attributes
- 语法：
节点.attributes - 获取节点所有的属性节点组成的伪数组
- 语法：
- attributes
- 子节点获取
节点属性
- 节点属性：所有节点描述、节点特点信息的属性
- 属性节点：节点的一个类型（不要搞混）
- 常见的节点属性
- 节点类型
- 语法：
节点.nodeType - 以数值的形式返回，以区分不同类型的节点
- 元素节点：
1 - 属性节点：
2 - 文本节点：
3 - 注释节点：
8
- 元素节点：
- 语法：
- 节点名称
- 语法：
节点.nodeName - 以字符串的形式返回
- 元素节点：元素标签名的大写
- 属性节点：属性名
- 文本节点：
#text - 注释节点：
#comment
- 语法：
- 节点值（内容）
- 语法：
节点.nodeValue- 元素节点：
null - 文本节点：文本内容
- 属性节点：属性值
- 注释节点：注释内容
- 元素节点：
- 语法：
- 节点类型
节点创建
- createTextNode
- 语法：
document.createTextNode(文本内容) - 返回一个创建好的文本节点
- 语法：
- createElement
- 语法：
document.createElement(标签名) - 返回一个创建好的元素节点
- 语法：
节点插入
- appendChild
- 语法：
节点.appendChild(插入的节点) - 将传入的节点插入到元素节点内的最后
- 语法：
- insertBefore
- 语法：
节点.insertBefore(插入的节点, 在哪个子节点前插入) - 将传入的节点插入到元素节点的某一个子节点前
- 语法：
节点替换
- replaceChild
- 语法：
节点.replaceChild(替换上的节点, 替换下的节点) - 替换元素节点内的某一个子节点
- 语法：
- replaceWith
- 语法：
节点.replaceWith(替换上的节点) - 节点替换
- 语法：
节点克隆
- cloneNode
- 语法：
节点.cloneNode()- 如果不传参数或传递
false则默认克隆节点本身（不包括后代节点） - 如果传入
true实参，则克隆节点本身及其后代节点
- 如果不传参数或传递
- 返回值：克隆后的节点
- 语法：
节点移除
- removeChild
- 语法：
节点.removeChild(移除的子节点) - 移除节点的某一个子节点
- 语法：
- remove
- 语法：
节点.remove() - 移除节点本身
- 语法：
文档碎片
- 语法：
document.createDocumentFragment() - 作用：避免频繁操作页面DOM元素，解决操作效率低的问题
- 返回值：一个文档碎片节点
196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
