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

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 ")