JS and jquery Get the parent element, child element, sibling element method

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.

Native JS Gets the child element under the element with 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 going to get a different approach to that is the var B = document.getelementbyidx_x ("Dom") I mentioned in the previous chapter. ChildNodes; If so alert (b.length) IE browser no problem or 3, However, the FF browser will prompt for 4, which is because FF also acts as an element for line breaks.
So we have to deal with the properties of JS. The simplest way to deal with ideas is to iterate over these elements. The element type is a space and the text is deleted. The handler function is like this

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 elements
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 of the 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.

Here's the point!

<div id = "Dom" >
<div></div>
<div></div>

<div></div>

</div>

<script>
function dom () {
var a = document.getelementbyidx_x_x ("Dom");
Del_space (a); Calling a function that cleans up spaces
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; get the next sibling node of a
var e = a.previoussbiling; Get 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 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, there will be no content in the initial collection, such as $ ("P"), Find ("span"), is from

P element starts looking, equivalent to $ ("P span")

————————————————————————— 3-4 —————————————————————————————

The above is what I picked from the network to solve JS and jquery to get the parent-child elements, etc., but there will be problems in the solution:

<script type= "Text/javascript" >//JS Solution     varDom=document.getelementbyid ("Dom"); //to avoid problems with FF, the child element is filteredDel_space (DOM); //1. Get all child nodes under the DOM     varA = Dom.childnodes;//all child nodes;           varb = Dom.parentnode;//parent node;           vare = Dom.firstchild;//first child node           varf = dom.lastchild;//Last child node                      //For some reason, we will study the next sibling node and the previous sibling node that cannot be obtained.--!           varc = Dom.nextSbiling.nodeType;//Next Sibling node           varD = dom.previoussbiling;//Previous sibling node                    //jquery Solution         varA1 = $ ("#dom"). Children ();//all child nodes;           varB2 = $ ("#dom"). Parent ();//parent node;           varC3 = $ ("#dom"). Next ();//Next Sibling node           varD4 = $ ("#dom"). Prev ();//Previous sibling node          vare5 = $ ("#dom"). Children (": first");//first child node           varF6 = $ ("#dom"). Children (": Last");//Last 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 newline as a DOM element, so you have to filter, IE will not produce similar problems     functionDel_space (elem) {varElem_child = Elem.childnodes;//get all the child elements of the parameter element          for(vari = 0; i < elem_child.length; i++) {//traversing child elements                 if(Elem_child[i].nodename = = "#text") {elem.removechild (elem_child[i]); }         }     }                   </script>

JS Get node DOM operation

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 of the comment
DocumentFragment	Node.document_fragment_node	11	Document fragment
Attr	Node.attribute_node	2	Node properties

Method	Describe
CreateAttribute ()	Creates a new attr node with the specified name.
Createcomment ()	Creates a new comment node with the specified string.
CreateElement ()	Creates a new element node with the specified tag name.
createTextNode ()	Creates a new Textnode node with the specified text.
getElementById ()	Returns the element node in the document that has the specified ID attribute.
getElementsByTagName ()	Returns all element nodes in the document that have the specified tag name.

Property	Describe
Attributes	If the node is an element, the attribute of the element is returned in namednodemap form.
ChildNodes	The child nodes of the current node are stored in node[] form. If there are no child nodes, an empty array is returned.
FirstChild	Returns the first child node of the current node in the form of node. Null if there are no child nodes.
LastChild	Returns the last child node of the current node in the form of node. 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 immediately before the current node, in the form of node. If there is no such node, NULL is returned. Previous sibling node

Method	Describe
AppendChild ()	Add nodes to the document tree by adding a node to the childnodes[] group of the current node.
CloneNode ()	Copies the current node, or copies the current node and all its descendant nodes.
HasChildNodes ()	Returns true if the current node has child nodes.
InsertBefore ()	Inserts a node into the document tree, positioned before the specified child node of the current node. If the node already exists, it is removed and then inserted into its place.
RemoveChild ()	Removes and returns the specified child node from the document tree.
ReplaceChild ()	Removes and returns the specified child node from the document tree, replacing it with another node.

JS and jquery Get the parent element, child element, sibling element method (GO)