node

In the HTML DOM (Document Object Model), each part is a node:

  • The document itself is the document node
  • All HTML elements are element nodes
  • All HTML attributes are attribute nodes
  • Text inside an HTML element is a text node (including carriage returns)
  • Comments are comment nodes

An Element object can have child nodes of type Element node, text node, comment node.

The NodeList object represents a list of nodes, such as a collection of children of HTML elements.

Elements can also have attributes. Properties are property nodes.

Summary: An element is an element node, a kind of node, but an element node can contain many nodes.

Node properties

Node.nodeName    // Return the node name, read-only
Node.nodeType    // Returns a constant value of the node type, read-only
Node.nodeValue   // Returns the Text value of the Text or Comment node, read-only
Node.textContent // Returns the text content of the current node and all its descendants, readable and writable
Node.baseURI     // Returns the absolute path to the current page
Copy the code
Node.ownerDocument     // Returns the top-level document object of the current node, i.e. Document
Node.nextSibling      // Returns the first sibling node immediately following the current node
Node.previousSibling  // Returns the nearest sibling preceding the current node
Node.parentNode       // Returns the parent of the current node
Node.parentElement    // Returns the parent Element of the current node
Node.childNodes       // Returns all children of the current node
Node.firstChild       // Returns the first child of the current node
Node.lastChild        // Returns the last child of the current node
Copy the code

ParentNode interface

Node.children           // Returns all Element children of the specified node
Node.firstElementChild  // Returns the first Element child of the current node
Node.lastElementChild   // Returns the last Element child of the current node
Node.childElementCount  // Returns the number of all Element children of the current node.
Copy the code

operation

Node.appendChild(node)                // Add the last child node to the node
Node.hasChildNodes()                  // Returns a Boolean value indicating whether the current node has children
Node.cloneNode(true);                 // Defaults to false(clone node), true(clone node and its properties, and descendants)
Node.insertBefore(newNode,oldNode)    // Insert new child nodes before specifying child nodes
Node.removeChild(node)                // Delete the node on the parent of the node to be deleted
Node.replaceChild(newChild,oldChild)  // Replace the node
Node.contains(node)                   // Returns a Boolean value indicating whether the parameter node is a descendant of the current node.
Node.compareDocumentPosition(node)    // Returns a binary value of 7 bits representing the relationship between the parameter node and the current node
Node.isEqualNode(noe)                 // Returns a Boolean value that checks whether two nodes are equal. The so-called equal node refers to two nodes with the same type, the same attributes, and the same child nodes.
Node.normalize()                      // Used to clean up all Text nodes inside the current node. It removes empty text nodes and merges adjacent text nodes into one.
Copy the code

ChildNode interface

Node.remove()      // Used to delete the current node
Node.before()      // Insert a column of Node or DOMString objects into the parent Node of ChildNode before the ChildNode
Node.after()       The // method inserts Node or DOMString objects into the list of children of its parent Node. Insert after the node
Node.replaceWith() // Replaces the child node under the parent node of this node
Copy the code