ParentNode 接口，ChildNode 接口
节点对象除了继承 Node 接口以外，还会继承其他接口。
ParentNode 接口
表示当前节点是一个父节点，提供一些处理子节点的方法。
ChildNode 接口
表示当前节点是一个子节点，提供一些相关方法。
- ParentNode 接口
- 如果当前节点是父节点，就会继承ParentNode接口。
- 由于只有元素节点（element）、文档节点（document）和文档片段节点（documentFragment）拥有子节点
- 因此只有这三类节点会继承 ParentNode 接口。
- 如果当前节点是父节点，就会继承ParentNode接口。
-
- ParentNode.children 属性
- 成员是当前节点的所有元素子节点，返回一个HTMLCollection实例。
- 该属性只读。
- 只包括元素节点。
- 如果没有元素类型的子节点，返回值 HTMLCollection 实例的 length 属性为 0 。
- 下面是遍历某个节点的所有元素子节点的示例。
for (var i = 0; i < el.children.length; i++) { // ... }
- 下面是遍历某个节点的所有元素子节点的示例。
- HTMLCollection 是动态集合，会实时反映 DOM 的任何变化
- ParentNode.children 属性
-
- ParentNode.firstElementChild 属性
- 返回当前节点的第一个元素子节点。如果没有任何元素子节点，则返回 null
-
document.firstElementChild.nodeName // "HTML" document 节点的第一个元素子节点是<HTML>
- ParentNode.firstElementChild 属性
-
- ParentNode.lastElementChild 属性
- 返回当前节点的最后一个元素子节点，如果不存在任何元素子节点，则返回 null
- ParentNode.lastElementChild 属性
-
- ParentNode.childElementCount 属性
- 表示当前节点的所有元素子节点的数目，返回一个整数。
- 如果不包含任何元素子节点，则返回 0
- ParentNode.childElementCount 属性
-
- ParentNode.append() ParentNode.prepend()
- append() 为当前节点追加一个或多个子节点，位置是最后一个元素子节点的后面
- prepend() 为当前节点追加一个或多个子节点，位置是第一个元素子节点的前面
- 不仅可以添加元素子节点，还可以添加文本子节点
- 没有返回值
-
var parent = document.body; var p = document.createElement('p'); p.innerHTML = "这是p" parent.append(p); // 添加 元素子节点 parent.append('Hello'); // 添加 文本子节点 var p1 = document.createElement('p'); var p2 = document.createElement('p'); p1.innerHTML = "这是p1" p2.innerHTML = "这是p2" // 添加多个元素子节点 parent.append(p1, p2); var p3 = document.createElement('p'); p3.innerHTML = "这是p3" // 添加元素子节点和文本子节点 parent.append('Hello', p3);
-
对应的会生成的 HTML 代码为
-
- ParentNode.append() ParentNode.prepend()
- ChildNode 接口
- 只要这个节点有父节点，那么该节点就继承了 ChildNode 接口
-
- ChildNode.remove() 方法
- 从父节点移除当前节点
ele.remove(); // 在 DOM 里移除 ele 节点
- 从父节点移除当前节点
- ChildNode.remove() 方法
-
- ChildNode.before() ChildNode.after()
- .before() 方法用于在当前节点前面，插入一个或多个同级节点。与当前节点拥有同一父元素。
- 注意：不仅可以插入元素节点，还可以插入文本节点
-
var p = document.createElement('p'); var p1 = document.createElement('p'); el.before(p); // 插入元素节点 el.before('Hello'); // 插入文本节点 el.before(p, p1); // 插入多个元素节点 el.before(p, 'Hello'); // 插入元素节点和文本节点
- .after() 方法用于在当前节点前面，插入一个或者多个同级节点。与当前节点拥有同一父元素。
- .before() 方法用于在当前节点前面，插入一个或多个同级节点。与当前节点拥有同一父元素。
- ChildNode.before() ChildNode.after()
- ChildNode.replaceWith()
- 使用参数节点，替换当前节点。参数可以是元素节点，也可以是文本节点。
-
var span = document.createElement('span'); el.replaceWith(span);