1. Access/Get Node
document.getElementById(id); // Return to access the first object with the specified id
document.getElementsByName(name); // Returns a collection of nodes with the specified name Note spelling: Element s
document.getElementsByTagName(tagname); //Returns a collection of objects with the specified tag name Note spelling: Element s
document.getElementsByClassName(classname); //Returns a collection of objects with the specified class name Note spelling: Element s
2. Create nodes/properties
document.createElement(eName); //Create a node
document.createAttribute(attrName); //Create an attribute on a node
document.createTextNode(text); //Create a text node
3. Add nodes
document.insertBefore(newNode,referenceNode); //Insert a node before a node
parentNode.appendChild(newNode); //Add a child node to a node
4. Copy the node
cloneNode(true | false); //Copy a node Parameters: whether to copy all the properties of the original node
5. Delete the node
parentNode.removeChild(node); //Remove the child node of a node node is the node to be deleted
Note: In order to ensure compatibility, it is necessary to judge the node type (nodeType) of the element node. If nodeType==1, perform the delete operation. With this method, the correct operation can be done in IE and Mozilla.
The nodeType property returns the type of the node. The most important node types are:
| element type | Node type |
|---|---|
| element element | 1 |
| attribute attr | 2 |
| text | 3 |
| Comments | 8 |
| documentdocument | 9 |
6. Modify the text node
| method | effect |
| appendData(data); | Append data to the text node |
| deleteData(start,length); | will delete length characters from start |
| insertData(start,data); | Insert a character at start, the start value of start is 0; |
| replaceData(start,length,data); | Replace length characters with data at start |
| splitData(offset); | Split text nodes at offset |
| substringData(start,length); | Extract length characters from start |
7. Attribute operation
getAttribute(name) //Get the value of a node attribute through the attribute name
setAttribute(name,value); //Modify the value of a node attribute
removeAttribute(name); //Remove an attribute
8. Find Nodes
parentObj.firstChild; //This method can be used if the node is the first child of a known node. This method can be done recursively using parentObj.firstChild.firstChild.....
parentObj.lastChild; //Get the last node of a node, same as firstChild, you can also use parentObj.lastChild.lastChild .....
parentObj.childNodes; //Get all child nodes of the node, then find the target node by loop and index 9. Get adjacent nodes
curtNode.previousSibling; //Get the previous node adjacent to the known node
curtNode.nextSlbling; // Get the next node of the known node
10. Get the parent node
childNode.parentNode; //Get the parent node of the known node
11. Replace Nodes
replace(newNode,oldNode);
————————————- end ————————————–
Source of the article: https://www.cnblogs.com/JanySu/p/5278542.html