Node对象
描述
- Node对象是用于解析DOM节点树的入口
- Node对象提供了对节点操作的属性和方法
判断节点类型
-
节点类型分为：
- 元素节点
- 属性节点
- 文本节点
- 文档节点
-
判断方式分为：
- nodeName - 节点名称
- nodeType - 节点类型
- nodeValue - 节点的值
我是谁，我在那，我要干啥
获取父节点
- 通过定位子节点，来获取父节点
parentNode属性
- 表示获取父节点，等到的不一定的元素节点，也可能是Document对象
手机
手表
电脑
parentElement属性
- 表示获取父元素节点，等到的一定是元素节点
手机
手表
电脑
获取子节点
- 通过定位父节点来获取子节点
- childNodes：表示获取所有子节点
- firstChild：表示获取第一个子节点
- lastChild：表示获取最后一个子节点
- 在获取子节点时也会一同获取到“空白节点（可能是空的文本节点）”
手机
手表
电脑
获取相邻兄弟节点
- previousSibling：表示获取前面的兄弟节点
- nextSibling：表示获取后面的兄弟节点
- 在获取相邻兄弟节点的时候也存在“空白节点（可能是空的文本节点）”的问题
手机
手表
电脑
空白节点
- 在浏览器解析DOM节点树结构时，会产生 空白节点 ，使得到的数据结果出现问题
- 空白节点是通过在编写HTML代码时由于元素换行或空格产生的
- 空白节点一般会显示为文本节点(可能是空的文本节点)
处理获取子节点时产生的空白节点
手机
手表
电脑
处理相邻兄弟节点中的空白节点
手机
手表
电脑
替换节点
-
replaceChild
- 表示对指定的元素节点进行替换
手机
手表
电脑
插入节点
- 表示在指定位置插入节点
- appendChild（）：表示在指定父节点中最后的位置插入节点
- insertBefore（）：表示在指定目标节点的前面插入节点
手机
手表
电脑
删除节点
-
removeChild
- 表示删除指定的元素节点
- 被删除的元素节点只是在DOM节点数中被删除，并不是在内存中被删除,还可以在调用
手机
手表
电脑
复制节点
-
cloneNode（）
-
括号中添写布尔值“true或false”
- true：表示复制后代节点
- false：表示不复制后代节点（默认值）
-
- 如果被复制的节点具有ID属性，复制后要修改ID属性的属性值
手机
手表
电脑