search

Home >Web Front-end >JS Tutorial >JS method to get the brothers, parents, and child elements of a node_javascript skills

JS method to get the brothers, parents, and child elements of a node_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:04:511632browse

Let’s first talk about the JS acquisition method, which is much more troublesome than the JQUERY method. The JQUERY method will be used for comparison later.

The JS method is much more troublesome than JQUERY, mainly because FF browser will treat your line breaks as DOM elements

Copy code The code is as follows:






Native JS gets the child elements under the element with ID test. Available:

var a = docuemnt.getElementById("test").getElementsByTagName("div"); This is no problem

At this time a.length=2;

But if we use another method

var b =document.getElementById("test").childNodes;

At this time, b.length is no problem in IE browser, it is still equal to 2, but in FF browser, it will be 4, because FF also treats line breaks as an element.

So, here, we are going to do processing. We need to traverse these elements and delete all elements that are spaces and text.

Copy code The code is as follows:

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

The above function traverses the child elements. When there is a node type in the element that is text and the text The node value of type node is empty. Just delete him.

nodeNames can get the node type of a node, /s/ is the regular expression of non-empty characters in JS. Add in front! , it means the empty character

The test() method is used to check whether a string matches a certain pattern. The syntax is: RegExpObject.test(string)

Returns true if the string string contains text matching RegExpObject, otherwise returns false.

nodeValue means getting the value in this node.

removeChild deletes the child elements of the element.

After

, before calling the properties of son, father, brother, etc., just call the above function to clear the spaces

Copy code The code is as follows:





<script><br>function dom() {<br>var s= document.getElementById("test");<br>del_ff(s); //Clean up spaces <br>var chils= s.childNodes; //Get all child nodes of s<br>var par=s.parentNode; //Get the parent node of s<br>var ns=s.nextSbiling; //Get s's Next sibling node<br>var ps=s.previousSbiling; //Get the previous sibling node of s<br>var fc=s.firstChild; //Get the first child node of s<br>var lc=s .lastChile; //Get the last child node of s <p>}<br></script>


The following introduces JQUERY’s method of finding parent, child, and sibling nodes

jQuery.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 searches all ancestor elements, not limited to parent elements

jQuery.children(expr). Returns all child nodes. This method will only return direct child nodes and will not return all descendant nodes

jQuery.contents(), returns all content below, including nodes and text. The difference between this method and children() is that including blank text will also be treated as a

jQuery object is returned, children() will only return nodes

jQuery.prev(), returns the previous sibling node, not all sibling nodes

jQuery.prevAll(), returns all previous sibling nodes

jQuery.next(), returns the next sibling node, not all sibling nodes

jQuery.nextAll(), returns all subsequent sibling nodes

jQuery.siblings(), returns sibling nodes, regardless of front or rear

jQuery.find(expr) is completely different from jQuery.filter(expr). jQuery.filter() filters out a part of the initial collection of jQuery objects, and the return result of jQuery.find() will not contain the contents of the initial collection, such as $("p"), find("span") , starting from the

element to find , which is equivalent to $("p span")

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of how js/jquery parses json and array formats_javascript skillsNext article：Detailed explanation of how js/jquery parses json and array formats_javascript skills

Related articles

See more