There are two common ways to get elements in JavaScript:

Summary of the node

Everything in a web page is a node (tag, attribute, text, comment, etc.), and in the DOM, nodes are represented using Node. All nodes in the HTML DOM tree are accessible through JavaScript, and all HTML elements (nodes) can be modified, created or deleted.

Node properties

In general, a node has at least three basic attributes: nodeType, nodeName, and nodeValue.

The element node nodeType is 1. The attribute node nodeType is 2. The text node nodeType is 3.Copy the code

In our actual development, node operations operate primarily on element nodes

The node hierarchy

DOM trees can be used to divide nodes into different hierarchies, and the most common one is father-son and brother-son hierarchies.

1. Parent node

 node.parentNode  
Copy the code

The parentNode property returns the nearest parent of a node or null if the specified node has no parent

2. The child nodes

Parentnode. childNodes (Standard)Copy the code

Parentnode. childNodes returns an updated collection of children of the specified node. Note: The return value contains all child nodes, including element nodes, text nodes, and so on. If you only want to get inside element nodes, you need to do this. So we generally don’t recommend using childNodes to iterate over element nodes:

Var ul = document. querySelector(' ul '); for(var i = 0; i < ul.childNodes.length; I ++) {if (ul.childNodes[I].nodeType == 1) {// ul.childNodes[I] is the element node console.log(ul.childnodes [I]); }}Copy the code

There is also a (nonstandard) way to get child element nodes

Parentnode. children (non-standard)Copy the code

Parentnode. children is a read-only property that returns all child element nodes. It returns only the child node, not the rest of the node (this is our focus). Although children is non-standard, it is supported by all browsers, so we can safely use other methods of obtaining child nodes:

//firstChild returns the firstChild, or null if not found. Again, it contains all nodes. Parentnode. firstChild //lastChild returns the lastChild, or null if not found. Again, it contains all nodes. Parentnode. lastChild //firstElementChild returns the first child node, or null if not found. ParentNode. FirstElementChild / / lastElementChild returns the last child node, can't find it returns null. parentNode.lastElementChildCopy the code

In practice, firstChild and lastChild contain other nodes, which is inconvenient, and firstElementChild and lastElementChild have compatibility issues. How do we get the first or lastChild node? Solution: You can use this if you want the first child element node

parentNode.chilren[0] 
Copy the code

You can use this if you want the last child element node

parentNode.chilren[parentNode.chilren.length - 1]  
Copy the code

3. Sibling nodes

//nextSibling returns the nextSibling of the current element, or null if no sibling is found. Again, it contains all nodes. Node. nextSibling //previousSibling returns a sibling node on the current element, or null if no sibling is found. Again, it contains all nodes. Node. previousSibling //nextElementSibling returns the next sibling of the current sibling, or null if no sibling is found. Node. nextElementSibling //previousElementSibling Returns a sibling on the current element, or null if not found. node.previousElementSiblingCopy the code

Note: The two methods nextElementSibling and previousElementSibling have compatibility issues and are only supported in IE9. Encapsulate a compatibility function

function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }  

Copy the code

4. Create a node

document.createElement('tagName')
Copy the code

The document.createElement() method creates the HTML element specified by tagName. Because these elements do not originally exist and are dynamically generated according to our requirements, we also call them dynamically created element nodes.

5. Add a node

node.appendChild() 
Copy the code

The node.appendChild() method adds a node to the end of the list of children of the specified parent node. Similar to the after pseudo-element in CSS.

Node.insertbefore (child, specify element)Copy the code

The node.insertbefore () method adds a node before the specified children of the parent node. This is similar to the before element in CSS.

6. Delete the node

node.removeChild(child) 
Copy the code

The node.removechild () method removes a child node from the DOM and returns the deleted node.

7. Clone node (clone node)

node.cloneNode() 
Copy the code

The node.clonenode () method returns a copy of the node on which it was called. Also called clone node/copy node note:

1. If the parentheses are empty or false, it is a shallow copy, that is, only the node itself is cloned, not the child nodes in it. 2. If the parenthesis argument is true, it is a deep copy, copying the node itself and all its children.Copy the code