ParentNode interface, ChildNode interface

In addition to inheriting the Node interface, the node object also has other interfaces. The ParentNode interface indicates that the current node is a parent node and provides some methods for handling child nodes. The ChildNode interface indicates that the current node is a child node and provides some related methods.

ParentNode interface

If the current node is the parent node, it will mixin the ParentNode interface. Since only element nodes (element), document nodes (document) and document fragment nodes (documentFragment) have child nodes, only these three types of nodes will have the ParentNode interface.

ParentNode.children

The children property returns an HTMLCollection instance, and the members are all element child nodes of the current node. This attribute is read-only.

The following is an example of traversing all element child nodes of a node.

for (var i = 0; i < el.children.length; i++) {
  // ...
}

Note that the children attribute only includes element child nodes, not other types of child nodes (such as text child nodes). If there are no child nodes of the element type, the length property of the return value HTMLCollection instance is 0.

In addition, HTMLCollection is a dynamic collection, which will reflect any changes in the DOM in real time.

ParentNode.firstElementChild

The firstElementChild property returns the first element child node of the current node. If there are no element child nodes, null is returned.

document.firstElementChild.nodeName;
// "HTML"

In the above code, the first element child node of the document node is <HTML>.

ParentNode.lastElementChild

The lastElementChild property returns the last element child node of the current node. If there is no element child node, it returns null.

document.lastElementChild.nodeName;
// "HTML"

In the above code, the last element child node of the document node is <HTML> (because document only contains this element child node).

ParentNode.childElementCount

The childElementCount property returns an integer that represents the number of all element child nodes of the current node. If it does not contain any element child nodes, it returns 0.

document.body.childElementCount; // 13

ParentNode.append(), ParentNode.prepend()

(1) ParentNode.append()

The append() method appends one or more child nodes to the current node, the position is behind the child node of the last element.

This method can not only add element child nodes (parameters are element nodes), but also text child nodes (parameters are strings).

var parent = document.body;

// Add element child nodes
var p = document.createElement("p");
parent.append(p);

// Add text child node
parent.append("Hello");

// Add multiple element child nodes
var p1 = document.createElement("p");
var p2 = document.createElement("p");
parent.append(p1, p2);

// Add element child nodes and text child nodes
var p = document.createElement("p");
parent.append("Hello", p);

This method has no return value.

Note that this method is different from the Node.prototype.appendChild() method in three points.

-append() allows strings as parameters, appendChild() only allows child nodes as parameters. -append() has no return value, while appendChild() returns the added child node. -append() can add multiple child nodes and strings (ie multiple parameters are allowed), appendChild() can only add one node (ie only one parameter is allowed).

(2) ParentNode.prepend()

The prepend() method adds one or more child nodes to the current node, the position is in front of the child node of the first element. Its usage is exactly the same as the append() method, and there is no return value.

ChildNode interface

If a node has a parent node, then the node has the ChildNode interface.

ChildNode.remove()

The remove() method is used to remove the current node from the parent node.

el.remove();

The above code removes the el node from the DOM.

ChildNode.before(), ChildNode.after()

(1) ChildNode.before()

The before() method is used to insert one or more nodes at the same level before the current node. Both have the same parent node.

Note that this method can not only insert element nodes, but also text nodes.

var p = document.createElement("p");
var p1 = document.createElement("p");

// insert element node
el.before(p);

// Insert text node
el.before("Hello");

// Insert multiple element nodes
el.before(p, p1);

// Insert element nodes and text nodes
el.before(p, "Hello");

(2) ChildNode.after()

The after() method is used to insert one or more sibling nodes after the current node, both of which have the same parent node. The usage is exactly the same as the before method.

ChildNode.replaceWith()

The replaceWith() method uses the parameter node to replace the current node. Parameters can be element nodes or text nodes.

var span = document.createElement("span");
el.replaceWith(span);

In the above code, the el node will be replaced by the span node.