JS gets the sibling of the node, parent, child element

JS Gets the sibling of the node, parent, child elementCategory: Software and technology 2012-05-14 00:40 112271 people read review (a) collection report jquery Browser Regular Expression stringdivfunction

First of all, the method of JS acquisition, which is more troublesome than the jquery method, followed by the jquery method for comparison.

JS is a lot more troublesome than jquery, mainly because the FF browser, the FF browser, will take your newline as the most DOM element.

<div id= "Test" >

<div></div>

<div></div>

</div>

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

var a = Docuemnt.getelementbyid ("Test"). getElementsByTagName ("div"); This is no problem.

At this time a.length=2;

But if we change the other way,

var b =document.getelementbyid ("Test"). ChildNodes;

At this time b.length in IE browser is not a problem, it is still equal to 2, but in the FF browser will make 4, because the FF is also a line to change the element.

So, here we are going to do the processing, we need to traverse these elements, the element type is a space and the text is deleted.

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 above functions traverse the child element when the element has a node type that is text and the node value of the text type node is empty. Just remove him.

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

Regexpobject.test (String)

Returns True if the string contains text that matches regexpobject, otherwise false.

NodeValue indicates that the value in this node is obtained.

RemoveChild is the child element of the delete element.

Then, before calling the child, father, brother, these attributes, call the above function to clean up the space.

<div id= "Test" >

<div></div>

<div></div>

</div>

<script>

function dom () {

var s= document.getelementbyid ("test");

DEL_FF (s); Clean up spaces

var chils= s.childnodes; Get all the child nodes of S

var Par=s.parentnode; Get the parent node of S

var ns=s.nextsbiling; Get the next sibling node of S

var ps=s.previoussbiling; Get the previous sibling node of S

var fc=s.firstchild; Get the first child node of S

var lc=s.lastchile; Get the last child node of s

}

</script>

The following is a description of jquery's parent, child, and sibling node lookup methods

Jquery.parent (expr) to find a Father 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 finds all ancestor elements, not limited to parent elements

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

Jquery.contents (), returns all of the following, including nodes and text. The difference between this method and children () is that, including blank text, it will also be 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 (), 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 (), back to sibling nodes, no points

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

The return result, will not have the contents of the initial collection, such as $ ("P"), Find ("span"), is the beginning of the <p> element to find <span>, equivalent to $ ("P span")

JS gets the sibling of the node, parent, child element