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
Copy Code code as follows:
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!
Copy Code code as follows:
<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")
—————————————— 2014 1-9 ————————————————
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:
Copy Code code as follows:
<script type= "Text/javascript" >
JS Solution
var Dom=document.getelementbyid ("Dom");
To avoid problems with FF, filter the child elements
Del_space (DOM);
1. Get all the child nodes under the 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 some reason, the next sibling node and the last 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 the child elements of the 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 |
Description |
CreateAttribute () |
created with specified name The new attr node. |
createcomment () |
To create a new comment node with the specified string. The |
createelement () |
Creates a new element node with the specified tag name. |
createTextNode () |
To create a new Textnode node with the specified text 。 |
getElementById () |
to return elemen with the specified ID attribute in the document T node. |
getElementsByTagName () |
Return the name of the specified tag in the document has an element node. |
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 |