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 elementReplace 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 featuresRead-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.