Js and jquery get the implementation of parent-level elements, child-level elements, and sibling Elements

First, let's talk about how to obtain JS, which is much more troublesome than JQUERY's method. Later, we will compare it with JQUERY's method.

The JS method is much more troublesome than JQUERY, mainly because FF browser, FF browser will take your line feed as the most DOM Element

Native JS gets the child element under the element with ID test. Available:

For example:

<Div id = "dom">
<Div> </div>
<Div> </div>
<Div> </div>
</Div>

Var a = docuemnt. getElementById ("dom"). getElementsByTagName_r ("div"); no problem

A. length = 3;

But now we can use another method to obtain the var B = document. getElementByIdx_x ("dom "). childNodes; if so alert (B. length) There is no problem on IE or 3, but the FF browser will prompt 4, which is because FF regards the line feed as an element.
So we have to deal with the JS attributes. The solution is simply to traverse these elements. The element type is space and all text is deleted. The processing function is like this.
Copy codeThe Code is as follows:
Function del_space (elem ){

Var elem_child = elem. childNodes; // obtain all the child elements of the Parameter Element.

For (var I = 0; I <elem_child.length; I ++) {// traverse the child element
If (elem_child.nodeName = "# text "&&! /\ S/. test (elem_child.nodeValue )){
Elem. removeChild (elem_child )}
}
}
}

The preceding function traverses sub-elements. If the node type in the element is text and the node value of the node is empty. Delete it.

NodeNames can obtain the node type of a node, and the regular expression of the/\ s/non-null character in JS. Add above !, It is a null character.

The test () method is used to check whether a string matches a certain pattern. The syntax is RegExpObject. test (string)

If the string contains the text that matches RegExpObject, true is returned; otherwise, false is returned.

NodeValue indicates that the value in the node is obtained.

RemoveChild is the child element that deletes an element.

Here is the focus!
Copy codeThe Code is 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 the function for clearing Spaces
Var B = a. childNodes; obtain all subnodes OF;
Var c = a. parentNode; obtain the parent node of;
Var d = a. nextSbiling; obtain the next sibling node of.
Var e = a. previussbiling; obtain the previous sibling node of.
Var f = a. firstChild; obtain the first subnode of.
Var g = a. lastChild; obtain the last subnode of.
}
</Script>

The following describes how to find JQUERY's parent, child, and sibling nodes.

JQuery. parent (expr) finds Father's Day points and can pass in expr for filtering, for example, $ ("span "). parent () or $ ("span "). parent (". class ")

JQuery. parents (expr) is similar to jQuery. parents (expr), but it is used to find all ancestor elements, not limited to parent elements.

JQuery. children (expr). Return all child nodes. This method only returns the direct child node and does not return all child nodes.

JQuery. contents (), which returns all the following content, including the node and text. The difference between this method and children () is that, including blank text

JQuery object, children () Only returns nodes

JQuery. prev (), returns 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 the following sibling nodes

JQuery. siblings (), returns the siblings node, regardless of the front and back

JQuery. find (expr) is completely different from jQuery. filter (expr. JQuery. filter () is a part of the initial jQuery object set, while jQuery. find ()

NO content in the initial set, for example, $ ("p"), find ("span"), is from

Start to find the p element, equivalent to $ ("p span ")

-------------- 2014 1-9 ----------------

The above is the method I picked from the network to solve js and jquery to get the parent and child elements, but the solution still produces problems:
Copy codeThe Code is as follows:
<Script type = "text/javascript">

// JS Solution
Var dom = document. getElementById ("dom ");
// Filter child elements to avoid ff Problems
Del_space (dom );
// 1. Obtain all sub-nodes in the dom
Var a = dom. childNodes; // All subnodes;
Var B = dom. parentNode; // parent node;
Var e = dom. firstChild; // The first subnode
Var f = dom. lastChild; // The Last subnode.

// For some reason, you cannot obtain the next sibling node or the last sibling node after study ...--!
Var c = dom. nextSbiling. nodeType; // The next sibling Node
Var d = dom. previussbiling; // previous sibling Node

// JQuery Solution
Var a1 = $ ("# dom"). children (); // All subnodes;
Var b2 = $ ("# dom"). parent (); // parent node;
Var c3 = $ ("# dom"). next (); // The next sibling Node
Var d4 = $ ("# dom"). prev (); // previous sibling Node
Var e5 = $ ("# dom"). children (": first"); // The first subnode
Var f6 = $ ("# dom"). children (": last"); // The last subnode.

/*
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 use your line feed as a dom element by default, so you must filter the content. Similar issues will not occur in IE.
Function del_space (elem ){
Var elem_child = elem. childNodes; // obtain all the child elements of the Parameter Element.
For (var I = 0; I <elem_child.length; I ++) {// traverse the child element
If (elem_child [I]. nodeName = "# text "){
Elem. removeChild (elem_child [I]);
}
}
}
</Script>

Js get node dom operation

Interface	NodeType constant	NodeType Value	Remarks
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	Annotated text
DocumentFragment	Node. DOCUMENT_FRAGMENT_NODE	11	Document parts
Attr	Node. ATTRIBUTE_NODE	2	Node attributes

Method	Description
CreateAttribute ()	Create a new Attr node with the specified name.
CreateComment ()	Creates a Comment node with the specified string.
CreateElement ()	Create an Element node with the specified tag name.
CreateTextNode ()	Creates a TextNode with the specified text.
GetElementById ()	Return the Element node with the specified id attribute in the document.
GetElementsByTagName ()	Returns all Element nodes with the specified tag name in the document.

Attribute	Description
Attributes	If the node is an Element, the attribute of the Element is returned in the form of NamedNodeMap.
ChildNodes	Store the subnodes of the current Node in the form of Node. If no child node exists, an empty array is returned.
FirstChild	Return the first subnode of the current Node as a Node. If no subnode exists, the value is null.
LastChild	Return the last subnode of the current Node as a Node. If no subnode exists, the value is null.
NextSibling	Return the sibling Node of the current Node in the form of Node. If no such node exists, null is returned.Next sibling Node
NodeName	The name of the node. The Element node represents the Tag Name of the Element.
NodeType	Indicates the node type.
ParentNode	ReturnsParent node. If no parent node exists, the value is null.
Previussibling	Return the sibling Node next to the current Node and before it in the form of Node. If no such node exists, null is returned.Previous sibling Node