Example of Javascript code used to obtain parent-level elements, child-level elements, and sibling elements

First of all talk about the acquisition of JS, which is much more cumbersome than the jquery method, followed by the jquery method for comparison

JS method is much more troublesome than jquery, mainly because the FF browser, FF browser will be your line of exchange as the most DOM element

Native JS Gets the child element under the element with the ID test. Can be used:

Like what:

<div id= "Dom" >
<div></div>
<div></div>
<div></div>
</div>

var a = Docuemnt.getelementbyid ("Dom"). Getelementsbytagname_r ("div"); This is no problem.
At this time a.length=3;

But now we're getting another way to get the var B = document.getelementbyidx_x ("Dom") that I mentioned in the previous chapter. ChildNodes If this alert (b.length) IE browser is OK or 3, However, the FF browser prompts 4, which is because FF also acts as an element in the newline.
So we have to deal with those attributes that can be used with JS. The process of thinking is very simple to traverse these elements. The element type is a space and the text is deleted. The processing function is like this

function Del_space (elem) {

var elem_child = elem.childnodes;//Gets all the child elements of the parameter element

for (Var i=0;i<elem_child.length;i++) {//traverse child element
if (Elem_child.nodename = = "#text" &&!/\s/.test (Elem_child.nodevalue)) {
Elem.removechild (Elem_child)}
}

}

}
The above function traverses the child element, when the element has a node type that is text and the node value is empty. Just to remove him.

Nodenames can get the node type of a node,/\s/the regular expression of the non-empty character in JS. Front Plus! , it indicates that it is a null character

The test () method is used to detect whether a string matches a pattern. Syntax: Regexpobject.test (String)

Returns True if string strings contain text that matches regexpobject, or false.

NodeValue represents the value in this node.

RemoveChild is the child element of the deletion element.

Here's the point!

<div id = "Dom" >
<div></div>
<div></div>

<div></div>

</div>

<script>
function dom () {
var a = document.getelementbyidx_x_x ("Dom");
Del_space (a); Call a function that clears the space
var B = a.childnodes; gets all the child nodes of A;
var c = A.parentnode; Gets the parent node of A;
var d = a.nextsbiling; Gets the next sibling node of a
var e = a.previoussbiling; Gets the previous sibling node of a
var f = a.firstchild; Gets the first child node of a
var g = A.lastchild; Gets the last child node of a

}
</script>

The following is a description of the parent, child, and sibling node lookup method of jquery

Jquery.parent (expr) for the Father node, you can filter through expr, such as $ ("span"). Parent () or $ ("span"). Parent (". Class")

Jquery.parents (expr), similar to jquery.parents (expr), but is to find all ancestor elements, not limited to the parent element

Jquery.children (expr). Returns all child nodes, this method only returns the direct child node, does not return all descendants node

Jquery.contents () returns all of the following, including nodes and text. The difference between this method and children () is that, including blank text, it is also used as a

The jquery object returns, children () returns only the node

Jquery.prev (), return to the previous sibling node, not all sibling nodes

Jquery.prevall (), return all previous sibling nodes

Jquery.next (), return to the next sibling node, not all sibling nodes

Jquery.nextall (), returning all sibling nodes after

Jquery.siblings (), Return sibling node, no points before and after

Jquery.find (expr) is completely different from jquery.filter (expr). Jquery.filter () is a subset of the initial set of jquery objects that is filtered out, while Jquery.find ()

The return result will not have the contents of the initial collection, such as $ ("P"), Find ("span"), from

P elements start looking, equivalent to $ ("P span")

————————————————————————— 2013 3-4 ————————————————————— One, get the parent element
1. Parent ([expr]):

Gets all the parent elements of the specified element

<div id= "Par_div" ><a id= "Href_fir" href= "#" >href_fir</a>
<a id= "Href_sec" href= "#" >href_sec</a>
<a id= "Href_thr" href= "#" >href_thr</a></div>
<span id= "Par_span" >
<a id= "Href_fiv" href= "#" >href_fiv</a>
</span>
$ (document). Ready (function () {
$ ("a"). Parent (). addclass (' A_par ');
});
Firebug View jquery Parent Effect

Second, get the sibling elements:
1. Next ([expr]):
Gets the next sibling element of the specified element (note that the next sibling element OH)

<! DOCTYPE html>
<script type= "Text/javascript" src= "/jquery/jquery.js" ></script>

<body>
<ul>
<li>list Item 1</li>
<li>list Item 2</li>
<li class= "Third-item" >list item 3</li>
<li>list Item 4</li>
<li>list Item 5</li>
</ul>

<script>
$ (' Li.third-item '). Next (). CSS (' background-color ', ' red ');
</script>

</body>

The result of this example is that only the list item 4 background color turns red

2, Nextall ([expr]):
Gets all sibling elements behind the specified element

Hello

Hello Again
<div><span>and again</span></div>
var P_nex = $ ("P"). Nextall ();
P_nex.addclass (' P_next_all ');
Firebug_jq_nextall
Pay attention to the last "<p&gt" label Oh, also was added ' P_next_all ' This class name Oh ~ ~

3, Andself ():
Gets all sibling elements behind the specified element, followed by the specified element

I feel like this function is the most interesting one function, what does it mean? The literal translation is "also Me", "also has oneself", yes, and own.

<p>hello</p><p>hello Again</p><div><span>and Again</span></div>
var P_nex = $ ("P"). Nextall (). Andself ();
P_nex.addclass (' P_next_all ');
Pay attention to the first "<p>" tag, which means to select all the sibling tags that follow the p tag, as well as yourself ...
Firebug_jq_andself

The following two do not give a specific example, is actually next () and Nextall () the contrary

4, prev (): Gets the previous sibling element of the specified element (is the last OH).

5, Prevall (): Gets all the sibling elements at the front of the specified element.

Third, get child elements

1, find the child element way 1:>

For example: var anods = $ ("ul > a"); Look for all a tags under UL

2, find the child element way 2:children ()

3, find the child element way 3:find ()

Here is a brief introduction to the similarities and differences of the following children () and find ():

1> children and Find methods are used to obtain the element's elements, neither of which returns text node, as most jquery methods do.
The 2> children method obtains only the element one subordinate child element, namely: immediate children.
The 3> Find method obtains all the subordinate elements, namely: descendants of these elements in the DOM tree
The parameter selector of the 4> children method is optional (optionally), which is used to filter the child elements,

However, the parameter selector method of the Find method is required.
The 5> Find method can actually be implemented by using JQuery (selector, context). That is $ (' li.item-ii '). Find (' Li ') equals $ (' li ', ' Li.item-ii ').

Cases:

<ul class= "Level-1" >
<li class= "Item-i" >I</li>
<li class= "Item-ii" >ii
<ul class= "Level-2" >
<li class= "Item-a" >A</li>
<li class= "Item-b" >b
<ul class= "Level-3" >
<li class= "Item-1" >1</li>
<li class= "Item-2" >2</li>
<li class= "Item-3" >3</li>
</ul>
</li>
<li class= "Item-c" >C</li>
</ul>
</li>
<li class= "ITEM-III" >III</li>
</ul>
Use: $ (' Ul.level-2 '). Children (). CSS (' border ', ' 1px solid green '); The effect is:

The jquery selector gets the parent element, the sibling element, the child element-yes-Zhao Yanping's network home
Use $ (' Ul.level-2 '). Find (' Li '). CSS (' border ', ' 1px solid green '); The effect is:

The above is I picked from the network to solve JS and jquery to get the parent-child elements, etc., but in the solution will still have problems:

<script type= "Text/javascript" >
js resolves var dom=document.getelementbyid ("Dom"); To avoid problems with FF, the sub element is filtered to process del_space (DOM); 1. Get all child nodes under dom var a = dom.childnodes;//all child nodes;
var b = dom.parentnode;//parent node;
var e = dom.firstchild;//First child node
var f = dom.lastchild;//Last child node//For unknown reason, the next sibling node and the previous sibling node will not be available to ...--! var C = dom.nextsbiling.nodetype;//Next sibling node
var d = dom.previoussbiling;//Previous sibling node
jquery Solution
var a1 = $ ("#dom"). Children ();//all child nodes;
var b2 = $ ("#dom"). Parent ();//parent node;
var C3 = $ ("#dom"). Next ()//Next sibling node
var D4 = $ ("#dom"). Prev ();//previous sibling node
var e5 = $ ("#dom"). Children (": first");
var F6 = $ ("#dom"). Children (": Last");//FINAL child node
/* alert (a.length);
for (Var i=0;i<a.length;i++) {
Alert (a[i].nodename+ ":" +a[i].nodevalue+ ":" +/\s/.test (A[i].nodevalue)); }         */
FF will default to your line as a DOM element, so you must filter, IE does not produce similar problems
function Del_space (elem) {var elem_child = elem.childnodes;//gets all child elements of a parameter element
for (var i = 0; i < elem_child.length; i++) {//traverse child element
if (Elem_child[i].nodename = = "#text") {Elem.removechild (elem_child[i]);} }
</script>

JS get node DOM operations

Interface	NodeType Constants	NodeType value	Note
Element	Node.element_node	1	ELEMENT node
Text	Node.text_node	3	Text node
Document	Node.document_node	9	Document
Comment	Node.comment_node	8	Text for Comments
DocumentFragment	Node.document_fragment_node	11	Document fragment
Attr	Node.attribute_node	2	Node properties

Method	Describe
CreateAttribute ()	Creates a new attr node with the specified name.
Createcomment ()	Creates a new comment node with the specified string.
CreateElement ()	Creates a new element node with the specified tag name.
createTextNode ()	Creates a new Textnode node with the specified text.
getElementById ()	Returns the element node in the document with the specified ID attribute.
getElementsByTagName ()	Returns all the element nodes in the document that have the specified tag name.

Property	Describe
Attributes	If the node is an element, the attribute of the element is returned in namednodemap form.
ChildNodes	Holds the child nodes of the current node in the form of node[]. If there are no child nodes, an empty array is returned.
FirstChild	Returns the first child node of the current node in node form. Null if there are no child nodes.
LastChild	Returns the last child node of the current node in node form. Null if there are no child nodes.
NextSibling	Returns the sibling next node of the current node as node. If there is no such node, NULL is returned. Next Sibling node
NodeName	The name of the node, and the element node represents the tag name of the element.
NodeType	Represents the type of node.
ParentNode	Returns the parent node of the current node in the form of node. Null if there is no parent node.
PreviousSibling	Returns the sibling node that is close to the current node and before it. If there is no such node, NULL is returned. Previous sibling node