1.js method of obtaining child nodes
1. Obtain child nodes directly by obtaining dom
var a = document.getElementById("test").getElementsByTagName("div");
2. Get child nodes through children
Using children to get child elements is the most convenient. It will also return an array. The access to its sub elements only needs to be in the form of array access.
1 var getFirstChild = document.getElementById("test").children[0];
3. Obtain child nodes through childNodes
childNodes returns a collection of child nodes in the form of an array. He will also regard line breaks and spaces as node information.
1 var b =document.getElementById("test").childNodes;
In order not to display unnecessary newline spaces, we must filter if we want to use childNodes. Remove unnecessary information through regular expressions. Here is the filter out
1 2 3 4 5 6 7 8 9 10 11 12 //Remove newline spaces for(var i=0; i<b.length;i++){ if(b[i].nodeName == "#text" && !/\s/.test(b.nodeValue)){ document.getElementById("test").removeChild(b[i]); } } //Print test for(var i=0;i<b.length;i++){ console.log(i+"---------") console.log(b[i]); } //Supplement document getElementById("test"). childElementCount; You can directly obtain the same length as length
4. Get the first child node
1 //Line breaks and whitespace information will be matched var getfirstchild = document getElementById("test"). firstChild;
1 //Newline and whitespace information will not be matched var getfirstchild = document getElementById("test"). firstElementChild;
5. Get the last child node
//The way lastChild gets the last child node is actually similar to firstChild.
1 //Matches newline and space information var getLastChildA = document.getElementById("test").lastChild;
1 <br>//Newline and space information will not be matched var getLastChildB = document.getElementById("test").lastElementChild;
2. How to obtain the parent node
1. Get parent node from parentnode
Gets the immediate parent element of the current element. parentNode is the w3c standard.
2. Get parent node from parentelement
parentElement is the same as parentNode, except that parentElement is the standard of ie.
var p1 = document.getElementById("test").parentElement;
3. offsetParent gets all parent nodes
When we look at offset, we know that it is an offset. In fact, it is related to the position of the upper and lower levels. We can directly obtain all the parent nodes. The corresponding value is the information of all the nodes under the body.
3. How to obtain sibling nodes
1. Obtain the sibling node by obtaining the parent node and then obtaining the child node
var brother1 = document.getElementById("test").parentNode.children[1];
2. Get the last sibling node
You can use previousSibling and previousElementSibling when getting the previous sibling node. The difference is that previousSibling matches characters, including line breaks and spaces, rather than nodes. previousElementSibling directly matches the node.
var brother2 = document.getElementById("test").previousElementSibling;
var brother3 = document.getElementById("test").previousSibling;
3. Get the next sibling node
It is similar to previousSibling and previousElementSibling, nextSibling and nexterelementsibling.
1 2 var brother4 = document.getElementById("test").nextElementSibling; var brother5 = document.getElementById("test").nextSibling;