The Node type

node

The DOM1 level defines a Node interface that is implemented by all Node types in the DOM. The Node interface is implemented as a Node type in JS and is accessible to all browsers except Internet Explorer. All Node types in JS inherit from Node types, and all Node types share the same methods and properties

Node properties

Each Node has a nodeType attribute, which is used for the type of the surface Node. The Node type must be one of the following 12 values defined in the Node type:

Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3)
Node.CDATA_SECTION_NODE(4)
Node.ENTITY_REFERENCE_NODE(5)
Node.ENTITY_NODE(6)
Node.PROCESSING_INSTRUCTION_NODE(7)
Node.COMMENT_NODE(8)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_FRAGMENT_NODE(11)
Node.NOTATION_NODE(12)
Copy the code

Compare the above constants to determine the type of node and the nodeName and nodeValue attributes

// Suppose someNode refers to some p node
console.log(someNode.nodeType)      / / 1
console.log(someNode.nodeName)      // p
console.log(someNode.nodeValue)     // null
// nodeValue of the element node is always null
Copy the code

Relationship between nodes

childNodes

  1. childNodes

Each Node has a childNodes property that holds a NodeList object. NodeList is an array-like object, It is not an array instance that stores all of the children of the node in this object.

  1. Access methods

The contents can be accessed using square brackets, the length attribute, and the NTH child can be accessed using the item method

  1. Convert to an array
// Replace a node with someNode
console.log(someNode.childNodes)            // Outputs all the children of someNode
console.log(someNode.childNodes[0])         // Outputs the first child of someNode
console.log(someNode.childNodes.item(1))    // Outputs the second child of someNode
console.log(someNode.childNodes.length)     // Outputs the number of someNode children
console.log(someNode.childNodes[someNode.childNodes.length-1])  // Outputs the last child of someNode

// Convert childNodes to an array
var arr = Array.prototype.slice.call(someNode.childNodes, 0)


Copy the code

parentNode

Each node has a parentNode attribute that points to the parentNode in the document

let Parent_Node = someNode.parentNode;      // Access the parent node of someNode

Copy the code

NextSibling and previousSibling

  1. NextSibling points to the nextSibling, and returns null if the nextSibling is empty (i.e., none)
  2. PreviousSibling points to the previousSibling, or returns null if the previousSibling is empty (i.e., none)
// You can use these attributes to determine whether a node is the first or last child of its parent node
if(someNode.previousSibling == null) {console.log(That's the first node.)}else if(someNode.nextSibling == null) {console.log('This is the last node.')}Copy the code

hasChildNodes()

Checks whether a node has child nodes, returning true if one or more children and false if none

if(someNode.hasChildNodes() == true) {
    console.log('There are children')}Copy the code

ownerDocument

Each node has this property and can be accessed directly to the top level (that is, it points to the document node representing the entire document). No node can exist in two or more documents at the same time. With this property, you don’t have to go all the way back to the top

console.log(document.body.ownerDocument)        // #document
Copy the code

Operation node

appendChild()

  1. Receive parameters

Receive a parameter (new node)

  1. Insert the location

It is inserted at the end of a node and becomes the last child node of a node

  1. The return value

After a node is added, the new node of childNodes, the parent node, and the relational pointer to the previous last child node are updated accordingly. AppendChild () returns the new node when the update is complete

var returnedNode = someNode.appendChild(newNode)
if(newNode == someNode.lastChild) { // true
    console.log('Insert successful! ')
}
alert(returnedNode == newNode)      // true
Copy the code
  1. Pay attention to

If the node to be inserted, newNode, is already in the document, it is moved from its original position to the position to be inserted now. No DOM node can be in more than one place in the document at the same time

var returnedNode = someNode.appendChild(someNde.firstChild)
console.log(someNode.firstChild == returnedNode)    // false 
console.log(someNode.lastChild == returnedNode)     // true 

Copy the code

insertBefore()

  1. Receive parameters

Receive two nodes 1. NewNode to be inserted (newNode) 2. Reference node, i.e. inserted before which node?

  1. The return value

Returns the inserted node

// Insert to become the first child of someNode
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild)
console.log(newNode == someNode.firstChild)     // true
Copy the code
  1. Pay attention to

If the reference node is null, it is inserted at the end of the someNode, performing the same operation as appendChild()

// Insert to become the last child of someNode
var returnedNode = someNode.insertBefore(newNode, null)
console.log(newNode == someNode.lastNode)       // true
Copy the code

replaceChild()

  1. role

Unlike the previous two methods, this method removes nodes

  1. parameter
    1. Insert node, the node to be inserted, newNode
    2. Replace the node, the node to replace, replacedNode
// Replace the first node
var returnedNode1 = someNode.replacedChild(newNode, someNode.firstChild)
// Replace the last node
var returnedNode2 = someNode.replacedChild(newNode, someNode.lastChild)
Copy the code
  1. The return value

Returns the replacedNode replacedNode

<! -... -->
<body>

    <p></p>
    <div></div>

    <script>
    console.log(document.body.childNodes)  // NodeList(6) [text, p, text, div, text, script]

    // Replace the second node with the third node of the body child node
    var replacedNode = document.body.replaceChild(document.body.childNodes[2].document.body.childNodes[1]) 
    console.log(replacedNode);      // 
 replaceChild() returns the replacedNode, replacedNode
    </script>
   
</body>
<! -... -->
Copy the code
  1. Pay attention to

This method does not actually remove the original node, but merely changes some relevant Pointers. Technically, the replaced node is still in the document, but it no longer has its place in the document.

<! -... -->
<body>

    <p></p>
    <div></div>
    <script>
    console.log(document.body.childNodes)
    var replacedNode = document.body.replaceChild(document.body.childNodes[2].document.body.childNodes[1])
    console.log(replacedNode)
    console.log(document.body.childNodes)

    var returnedNode = document.body.appendChild(replacedNode)      // You can use 4 to continue inserting the replaced node elsewhere
    console.log(document.body.childNodes)
    </script>
   
</body>
<! -... -->
Copy the code

removeChild()

  1. parameter

A parameter, the node to be removed

  1. The return value

Returns the removed node

  1. Pay attention to

As with replaceChild, the removed node is still in the document, but has no location of its own

var formerNode = someNode.removeChild(someNode.lastChild)
Copy the code

Other methods

cloneNode()

  1. role

Copy a node

  1. parameter

Pass in a Boolean parameter shell 1.false to perform shallow replication, that is, copying only the current node

2. True Performs deep replication to replicate the current node and all its child nodesCopy the code
  1. The return value

Return a copy of someNode

  1. other

The copied copy of the returned node is owned by the document, but no parent node is specified for it. Therefore, the node copy becomes an “orphan” unless it is added to the document through appendChild(), insertBefore(), or replaceChild()

<! Assume the following HTML code -->
<ul>
    <li> li one </li>
    <li> li two </li>
    <li> li three </li>
</ul>

<! -- assuming ul references are stored in myList -->
var deepList = myList.cloneNode(true);
console.log(deepList.length)

var shallowList = myList.cloneNode(false);
console.log(shallowList.length)
Copy the code
  1. Note that the cloneNode() method does not copy JavaScript properties added to DOM nodes, such as event handlers, etc. This method copies only attributes and (when explicitly specified) child nodes, and nothing else. There is a bug in IE that it copies event handlers, so we recommend removing event handlers before copying. Event handlers are things like click events

normalize()

  1. role

Process text nodes in the document tree. For reasons such as parser implementation or DOM manipulation, it is possible that a text node contains no text, or that two text nodes appear in succession. When this method is called on a node, it looks for both cases in the descendants of that node. If an empty text node is found, it is deleted; If adjacent text nodes are found, they are merged into a single text node. This approach is discussed further in this chapter.

  1. explain

That is, it looks for the text node in the descendant node, deletes it if it is empty, and merges it into one if it is two adjacent text nodes