怎样理解Node接口 / ParentNode接口 / ChildNode接口

ParentNode 和 ChildNode可以理解为是Node的子集, 它对一些具有父节点或子节点的节点提供了一些额外的方法和属性, 比如: 

1. 继承了ParentNode的接口有: 元素节点 / 文档节点 / 文档片段节点

2. 所有具有父节点的节点都继承了 ChildNode.

下面是一个简单的介绍: 

 

ParentNode

-------------------------------------------------------------------------------

ParentNode.children: 返回当前节点的所有元素子节点

ParentNode.firstElementChild: 返回当前节点的第一个元素子节点

ParentNode.lastElementChild: 返回当前节点的最后一个元素子节点

ParentNode.childElementCount: 返回当前节点的所有元素子节点数目

ParentNode.append(): 在当前节点的最后一个子节点后面添加一个或多个元素子节点或文本子节点

ParentNode.prepend(): 在当前节点的第一个子节点前面添加一个或多个元素子节点或文本子节点

-------------------------------------------------------------------------------

 

 

ChildNode

-------------------------------------------------------------------------------

ChildNode.remove(): 移除当前节点(该节点需要是某个节点的子节点, 因此document.remove()是不生效的);

ChildNode.before(): 在当前节点的前面插入一个或多个同级的元素子节点或文本子节点, 与当前节点具有相同的父节点;

ChildNode.after(): 在当前节点的后面插入一个或多个同级的元素子节点或文本子节点, 与当前节点具有相同的父节点;

ChildNode.replaceWith(): 使用参数元素节点或参数文本节点替换当前节点.

-------------------------------------------------------------------------------