JS method to get sibling parent and child elements of a node

First, let's talk about the method of JS acquisition, which is much more troublesome than the method of JQUERY, and then make a comparison with the method of JQUERY.

The JS method is much more cumbersome than JQUERY, mainly because of the FF browser, which treats your newline as the most DOM element

<div id="test">
<div></div>
<div></div>
</div>

Native JS gets the child under the element with ID test. You can use:

Var a = docuemnt. GetElementById (" test "). The getElementsByTagName (" div ");   There's no problem with that

At this point a. ength = 2;

But if we do it the other way around

Var b = document. GetElementById (" test "). The.childnodes;  

At this point, b.ength works fine in Internet explorer, which is still equal to 2, but in the FF browser it works out to be 4, because FF treats the newline as an element.

So, at this point, we're going to do something, we're going to go through these elements, and we're going to delete them as Spaces and as text.

function del_ff(elem){
var elem_child = elem.childNodes;
for(var i=0; i<elem_child.length;i++){
if(elem_child[i].nodeName == "#text" && !/s/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)
}
}
}

The above function iterates over the child element when the element has a node type of text and the value of the text type node is empty. Just delete him.

NodeNames can get the node type of a node, /\s/ non-null character in JS regular expression. In front! , represents a null character

The test() method detects if a string matches a pattern. The syntax is RegExpObject. Test (string)

Returns true if the string string contains text that matches RegExpObject, or false otherwise.

NodeValue means to get a value in this node.

RemoveChild removes children of an element.

Then, before calling the child, parent, and brother attributes, call the above function to clean up the space

<div id="test">
<div></div>
<div></div>
</div>
<script>
function dom() {
var s= document.getElementById("test");
del_ff(s);    //Clean up the space
var chils= s.childNodes;  //I get all the children of s
var par=s.parentNode;   //I get the parent of s
var ns=s.nextSbiling;   //Get s's next sibling node
var ps=s.previousSbiling;  //I get the last sibling of s
var fc=s.firstChild;   //Get the first child node of s
var lc=s.lastChile;   //Gets the last child of s
}
</script>

Here's how to find the parent, child, and sibling nodes of JQUERY

JQuery. The parent (expr)   To find the parent node, you can pass in expr for filtering, such as $("span").parent() or $("span").parent(".class")

Jquery.parents (expr), similar to jquery.parents (expr), but looking for all ancestor elements, not just the parent

JQuery. Children (expr). Returns all child nodes. This method only returns direct child nodes, not all children

Jquery.contents (), which returns everything below, including the node and the text. The difference between this method and children() is that, including blank text, it is also treated as one

The jQuery object returns, and children() only returns nodes

JQuery. Prev (), returns the last sibling, not all

JQuery. PrevAll (), which returns all previous sibling nodes

JQuery. Next (), returns the next sibling, not all siblings

JQuery. NextAll (), returns all subsequent sibling nodes

JQuery. Siblings (), returns siblings(no siblings)

JQuery. Find (expr) is completely different from jquery.filter (expr). JQuery. Filter () filters out a portion of the initial set of jQuery objects, while jquery.find () returns nothing from the original set, such as $("p"),find("span"), from < P> Elements start to find < Span> , equal to $("p span")