JS method for obtaining node sibling, parent, and child elements

Source: Internet
Author: User

First, let's talk about how to obtain JS, which is much more troublesome than JQUERY's method. Later we will compare it with JQUERY's method.

The JS method is much more troublesome than JQUERY, mainly because FF browser, FF browser will take your line feed as the most DOM Element
Copy codeThe Code is as follows:
<Div id = "test">
<Div> </div>
<Div> </div>
</Div>

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

Var a = docuemnt. getElementById ("test"). getElementsByTagName ("div"); no problem

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 make 4, because FF also regards line feed as an element.

Therefore, here we have to deal with it. We need to traverse these elements and delete all elements of the space type and text.
Copy codeThe Code is as follows:
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 preceding function traverses sub-elements. When the node type in the element is text and the node value of the text type node is empty. Delete it.

NodeNames can obtain the node type of a node, and the regular expression of the/\ s/non-null character in JS. Add above !, It is a null character.

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

If the string contains the text that matches RegExpObject, true is returned; otherwise, false is returned.

NodeValue indicates that the value in the node is obtained.

RemoveChild is the child element that deletes an element.

Then, before calling the sub-, parent, and brother attributes, call the above function to clear the spaces.
Copy codeThe Code is as follows:
<Div id = "test">
<Div> </div>
<Div> </div>
</Div>
<Script>
Function dom (){
Var s = document. getElementById ("test ");
Del_ff (s); // clear spaces
Var chils = s. childNodes; // obtain all child nodes of s.
Var par = s. parentNode; // obtain the parent node of s.
Var ns = s. nextSbiling; // obtain the next sibling node of s.
Var ps = s. previussbiling; // obtain the previous sibling node of s.
Var fc = s. firstChild; // obtain the first subnode of s.
Var lc = s. lastChile; // obtain the last subnode of s.

}
</Script>

The following describes how to find JQUERY's parent, child, and sibling nodes.

JQuery. parent (expr) finds Father's Day points and can pass in expr for filtering, for example, $ ("span "). parent () or $ ("span "). parent (". class ")

JQuery. parents (expr) is similar to jQuery. parents (expr), but it is used to find all ancestor elements, not limited to parent elements.

JQuery. children (expr). Return all child nodes. This method only returns the direct child node and does not return all child nodes.

JQuery. contents (), which returns all the following content, including the node and text. The difference between this method and children () is that, including blank text

JQuery object, children () Only returns 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 the following sibling nodes

JQuery. siblings (), returns the siblings node, regardless of the front and back

JQuery. find (expr) is completely different from jQuery. filter (expr. JQuery. filter () is to filter a part from the initial jQuery object set, while jQuery. NO content in the initial set is returned for find (), for example, $ ("p"), find ("span "), is to start from the <p> element to find <span>, equivalent to $ ("p span ")

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.