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
The test () method is used to detect whether a string matches a pattern. The syntax is: 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