Summary of JavaScript DOM node operation methods

There are three main types of nodes: element nodes, attribute nodes and text nodes.

The main thing about DOM is to add, delete, modify and check element nodes and attribute nodes. The following will introduce the operations on element nodes and the operations on attribute nodes respectively.

Element node

check

Before adding, deleting and modifying the DOM, you must first find the corresponding element. The specific search methods are as follows:

 getElementByID() // Get a single node getElementsByTagName() // Get the node array NodeList getElementsByName() // Get the node array NodeList

At the same time, you can also use the attributes of the element node to obtain its parent and child nodes and text nodes:

Children nodes

 Node.childNodes //Get the child node list NodeList; Note that line breaks are counted as text nodes in the browser. If you obtain the node list in this way, filtering is required Node.firstChild //Return the first child node Node.lastChild //Return the last child node

Parent node

 Node.parentNode // Returns the parent node Node.ownerDocument // Returns the ancestor node (the entire document)

Compatriot nodes

 Node.previousSibling // Returns the previous node, if not, return nullNode.nextSibling // Returns the next node

increase

To add a new node, you must first create a node, and then insert the newly created node into the DOM. Therefore, the following are the methods of creating nodes and inserting nodes, and the method of replicating nodes is also introduced in the creation of nodes.

Create a node

 createElement() // Create a new element node according to the specified tag name

Create code snippets (To avoid frequent refresh of the DOM, you can create code snippets first, and then add them to the DOM after completing all node operations)

 createDocumentFragment()

Replication node

 clonedNode = Node.cloneNode(boolean) // There is only one parameter, pass in a boolean value, true means copying all child nodes under the node; false means copying only the node

Insert node

 /*Insert node*/parentNode.appendChild(childNode); //Append a new node to the end of the child node list parentNode.insertBefore(newNode, targetNode); //Insert newNode into targetNode/*Insert html code*/node.insertAdjacentHTML('beforeBegin', html); //Insert the code node.insertAdjacentHTML('afterBegin', html); //Insert the code node.insertAdjacentHTML('afterBegin', html); //Insert the code node.insertAdjacentHTML('beforeEnd', html); //Insert the code after the last child element of the element node.insertAdjacentHTML('afterEnd', html); //Insert the code after the element

Replace nodes

 parentNode.replace(newNode, targetNode); //Replace targetNode with newNode

delete

Remove nodes

 parentNode.removeChild(childNode); // Remove the target node node.parentNode.removeChild(node); //Use without knowing the parent node

Attribute node

Operation attribute nodes are to add, delete, modify and check the DOM styles. There are different operating methods for in-line styles, inline styles, and external styles; the styles obtained by various methods are also divided into readable, writable and read-only.

Get CSS styles directly

 node.style.color // Readable or writeable

The properties and methods of Style itself

 node.style.cssText //Get the node inline style string node.style.length //Get the number of inline styles node.style.item(0) //Get the style at the specified position

Get and modify element styles

HTML5 provides a new attribute for elements: classList to implement the addition, deletion, modification and search of element style sheets. The operation is as follows:

 node.classList.add(value); //Add the specified class node.classList.contains(value); // Determine whether the element contains the specified class. If there is a truenode.classList.remove(value); // Delete the specified class node.classList.toggle(value); // Delete if there is a certain class, and add the specified class if there is no.

Methods to modify DOM characteristics

 Node.getAttribute('id') // Get Node.setAttribute('id') // Set Node.removeAttribute() // Remove Node.attributes // Get all DOM features

Read-only method

getComputedStyle is the method of window. It can get all the end-used CSS attribute values of the current element, but are read-only. It has two parameters, the first one is the incoming node, the second one can pass in:hover, :blur, etc. to get its pseudo-class style, and if not, null will be passed in.

However, IE does not support the getComputedStyle method, and currentStyle can be used to maintain compatibility:

 window.getComputedStyle ? window.getComputedStyle(node, null) : node.currentStyle

The above summary of JavaScript DOM node operation methods is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.