DOM basic methods_basic knowledge

Direct reference to the node
1.document.getElementById(id);
--Find the node by id in the document
2.document.getElementByTagName(tagName);
--Return an array , including references to these nodes
--such as: document.getElementByTagName("span"); will return all nodes of span type

2. Indirect reference to nodes
3. element.childNodes
--Returns all child nodes of element. You can use element.childNodes[i] to call
--element.firstChild=element.childNodes[0];
--element .lastChild=element.childNodes[element.childNonts.length-1];
4.element.parentNode
--Reference the parent node
5.element.nextSibling; //Reference the next sibling node
element.previousSibling; //Refer to the previous sibling node

3. Obtain node information
6. The nodeName attribute obtains the node name
--for element nodes, the returned Tag name, such as: returns "a"
--for attribute nodes, returns the attribute name, such as: class="test" returns test
--for text The node returns the content of the text
7.nodeType returns the type of the node
--element node returns 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() judgment Whether there are child nodes
10. The 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. Process attribute structures Point
11. Each attribute node is an attribute of the element node and can be accessed through (element node.attribute name)
12. Use the setAttribute() method to add attributes to the element node
--elementNode.setAttribute(attributeName,attributeValue);
--attributeName is the name of the attribute, attributeValue is the value of the attribute
13. Use the getAttribute() method to obtain the attribute value
--elementNode.getAttribute(attributeName ; Spaces, newlines, tabs, etc. are treated as text nodes. All text nodes that are generally referenced through element.childNodes[i] generally need to be processed:



6. Change the hierarchy of the document
15.document.createElement() method Create element node
--such as: document.createElement("Span");
16.document.createTextNode() method creates text node
--such as: document.createTextNode(" "); //Note: 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 insertBefore() method to insert child nodes
--parentNode.insertBefore(newNode, referenceNode);
--newNode is the inserted node, referenceNode is the inserted node before this
19. Use the replaceChild method to replace the child node
--parentNode.replaceChild(newNode,oldNode);
--Note: oldNode must be a 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 ; =document.createElement("table"); //Create table
table.insertRow(i); //Insert row in row i of table
row.insertCell(i); //Insert row in row i Insert cells at i positions
23. Reference cell objects
--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 is available in firefox An error will occur in
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);
}


Delete all blank nodes:


nodetype=3 node type is text s matches all blanks
Insert the node into the specified index position
function insertAt(parentNode,newNode,index)
{
if(!parentNode.hasChildNodes())
{
parentNode.appendChild(newNode);
return newNode;
}
//Use try to catch exceptions when the index does not exist
try{
parentNode.insertBefore(newNode,parentNode.childNodes[index]);
}
catch(e){
return null;
}
return newNode;