Summary of basic DOM operation methods in JavaScript

Basic methods of DOM

1. Direct reference to the node
1.document.getElementById(id);
--Find the node by id in the document
2.document.getElementByTagName(tagName);
--Returns an array containing references to these nodes
--For example: document.getElementByTagName("span"); will return all types of span Nodes
2. Indirect reference to nodes
3.element.childNodes
--Returns all child nodes of element, which can be called using element.childNodes[i]
-- element.firstChild=element.childNodes[0];
--element.lastChild=element.childNodes[element.childNonts.length-1];
4.element.parentNode
--Reference the parent node
5.element.nextSibling; //Refer to the next sibling node
element.previousSibling; //Reference the previous sibling node
3. Get node information
6.nodeName attribute to get the node Point name
--For element nodes, the tag name is returned, such as: ac859e3da82eff21228b9a0626a9c34a3499910bf9dac5ae3c52d5ede7383485, the returned is "a"
--For attribute nodes, the attribute name is returned, such as ：class="test" returns test
--For text nodes, the content of the text is returned
7.nodeType returns the type of the node
--Element nodes return 1
- -Attribute node returns 2
--Text node returns 3
8.nodeValue returns the value of the node
--Element node returns null
--Attribute node returns undefined
--Text node returns text content
9.hasChildNodes() determines whether there are child nodes
10.tagName attribute returns the tag name of the element
--This attribute is only available for element nodes, and is equivalent to The nodeName attribute of the element node
4. Processing attribute nodes
11. Each attribute node is an attribute of the element node and can be accessed through (element node.property name)
12. Use the setAttribute() method to add attributes to element nodes
--elementNode.setAttribute(attributeName,attributeValue);
--attributeName is the name of the attribute, attributeValue is the value of the attribute
13. Use getAttribute() Method to obtain attribute value
--elementNode.getAttribute(attributeName);
5. Processing text nodes
14. innerHTML and innerText attributes, I believe everyone is familiar with these two methods, I won’t introduce them, they are worth Note that both IE and Firefox easily regard spaces, newlines, tabs, etc. as text nodes. When text nodes are generally referenced through element.childNodes[i], they generally need to be processed:

<script language"javaScript" type="text/javascript"> 
function cleanWhitespace(element) 
{ 
for(var i=0; i<element.childNotes.length; i++) 
{ 
var node = element.childNodes[i]; 
if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
{ 
node.parentNode.removeChild(node); 
} 
} 
} 
</script>

6. Change the hierarchical structure of the document
15. The document.createElement() method creates element nodes
--For example: document.createElement("Span");
16.document.createTextNode() method creates text nodes
--For example: document.createTextNode(" "); //Note: Other It will not be encoded through html, which means that what is created here is not a space, but a string
17. Use the appendChild() method to add nodes
--parentElement.appendChild(childElement);
18.Use The insertBefore() method inserts a child node
--parentNode.insertBefore(newNode, referenceNode);
--newNode is the inserted node, referenceNode is the inserted node before this
19. Use the replaceChild method Replace the child node
--parentNode.replaceChild(newNode,oldNode);
--Note: oldNode must be the child node of parentNode,
20. Use the cloneNode method to copy the node
-- node.cloneNode(includeChildren);
--includeChildren is bool, indicating whether to copy its child nodes
21. Use the removeChild method to delete child nodes
--parentNode.removeChild(childNode);
7. Table operations
--Note: A complete table node cannot be directly inserted into the document in IE
22. Add rows and cells
var _table=document.createElement("table" ); //Create a table
table.insertRow(i); //Insert a row in the i-th row of the table
row.insertCell(i); //Insert a cell in the i-th position of the row
23. Reference cell object
--table.rows[i].cells[i];
24. Delete rows and cells
--table.deleteRow(index);
- -row.deleteCell(index);
25. Swap two rows to obtain the positions of two cells
node1.swapNode(node2);
--This method will cause an error in firefox
General method ：

function swapNode(node1,node2) 
{ 
var _parent=node1.parentNode; 
var _t1=node1.nextSubling; 
var _t2=node2.nextSubling; 
if(_t1)parent.insertBefore(node2,_t1); 
else _parent.appendChild(node2); 
if(_t2)parent.insertBefore(node1,_t2); 
else _parent.appendChild(node1);
}

The above is the detailed content of Summary of basic DOM operation methods in JavaScript. For more information, please follow other related articles on the PHP Chinese website!