JS method for getting node sibling, parent, and child elements _ javascript skills

This article describes in detail how to obtain node sibling, parent, and child elements in JS. If you need a friend, refer to it, I hope it will be helpful for you to first talk about the JS acquisition method, which is much more troublesome than the JQUERY method, and the JQUERY method will be used for comparison later.

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

The Code is as follows:

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

Var a = docuemnt. getElementById ("test"). getElementsByTagName ("p"); 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.

The Code is as follows:

Function del_ff (elem ){
Var elem_child = elem. childNodes;
For (var I = 0; 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.

The Code is as follows:

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. find () returns NO content in the initial set, for example, $ ("p"), find ("span"), is from

Element search, equivalent to $ ("p span ")