Jquery selects sibling nodes

jq

$('#id').siblings() All sibling nodes of the current element
$('#id').prev() The previous sibling node of the current element
$('#id').prevaAll() All before the current element Sibling node
$('#id').next() The first sibling node after the current element
$('#id').nextAll() All sibling nodes after the current element

1. The way js gets child nodes

1. Obtain child nodes directly by obtaining dom

Among them, the value of the parent tag id of test, and div is the name of the tag. getElementsByTagName is a method. What is returned is an array. When accessing, it should be accessed in the form of an array.

var a = document.getElementById(“test”).getElementsByTagName(“div”);
2. Get child nodes through childNodes

When using childNodes to obtain child nodes, childNodes returns a collection of child nodes in an array format. He will also treat newlines and spaces as node information.

var b =document.getElementById(“test”).childNodes;
In order not to display unnecessary newline spaces, we must perform necessary filtering if we want to use childNodes. Use regular expressions to remove unnecessary information. The following is filtered out

//Remove the newline space
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 get the same length as length 4. Get child nodes through children

It is most convenient to use children to get child elements, and it will also return an array. Access to its sub-elements only needs to be accessed in the form of an array.

var getFirstChild = document.getElementById(“test”).children[0];
5. Get the first child node

firstChild to get the first child element, but in some cases undefined will be displayed when we print, what is the situation? ? In fact, firstChild and childNodes are the same. When the browser parses it, it will be parsed as a newline and a space. In fact, what you get is the first child node, but this child node is a newline or a space. Then don't forget to handle it the same way as childNodes.

var getFirstChild = document.getElementById(“test”).firstChild;
6. firstElementChild gets the first child node

When using firstElementChild to get the first child element, there is no such thing as firstChild. The node of the first child element of the parent element will be obtained so that the text information can be displayed directly. It does not match newlines and spaces.

var getFirstChild = document.getElementById(“test”).firstElementChild;
7. Get the last child node

The way lastChild gets the last child node is actually similar to firstChild. The same lastElementChild and firstElementChild are the same. No more redundant.

var getLastChildA = document.getElementById(“test”).lastChild;
var getLastChildB = document.getElementById(“test”).lastElementChild;
Second, the way js gets the parent node

1. parentNode gets the parent node

Gets the immediate parent element of the current element. parentNode is w3c standard.

var p = document.getElementById(“test”).parentNode;
2. parentElement gets the parent node

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 the offset. In fact, this is the upper and lower levels related to the position, and all parent nodes can be obtained directly. The corresponding value is all node information under the body.

var p2 = document.getElementById(“test”).offsetParent;
3. How js gets sibling nodes

1. Obtain sibling nodes by obtaining parent nodes and then obtaining child nodes

var brother1 = document.getElementById(“test”).parentNode.children[1];
2. Get the previous sibling node

You can use previousSibling and previousElementSibling when getting the previous sibling node. The difference is that previousSibling will match characters, including newlines 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

Similar to previousSibling and previousElementSibling, nextSibling and nextElementSibling.

var brother4 = document.getElementById(“test”).nextElementSibling;