JS and jquery Get the parent element, the child element, the sibling element realization method _javascript Skill

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