JS jquery Gets the current element of the sibling previous next element jquery How to get the first or last child element

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

JS get node parent, child element

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 line-wrapping as a DOM element.

?

1234	<div id="test"><div></div><div></div></div>

Native JS Gets the child element under the element with ID test.

Can be used:

?

1	vara = docuemnt.getElementById("test").getElementsByTagName_r("div");

This is no problem.

At this time a.length=2;

But if we change the other way,

?

1	varb =document.getElementByIdx_x("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.

?

12345678

functiondel_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.

?

1234567891011121314151617

<div id="test"><div></div><div></div></div><script>function dom() {var s= document.getElementByIdx_x("test");del_ff(s);  //清理空格var chils= s.childNodes; //得到s的全部子节点var par=s.parentNode;  //得到s的父节点var ns=s.nextSbiling;  //获得s的下一个兄弟节点var ps=s.previousSbiling; //得到s的上一个兄弟节点var fc=s.firstChild;  //获得s的第一个子节点var lc=s.lastChile;  //获得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")

If a jquery object represents a collection of DOM elements, the. First () method constructs a new jquery object that contains a previous set of elements.

1234567

<ul>      <li>list item 1</li>      <li>list item 2</li>      <li>list item 3</li>      <li>list item 4</li>      <li>list item 5</li></ul>

$ (' Li '). First (). CSS (' background-color ', ' red ');

The result of the call is that the first list item is a red background.

If a jquery object represents a collection of DOM elements, the. Last () method constructs a new jquery object from the final matching element.

Consider a simple list on a page:

$ (' Li '). Last (). CSS (' background-color ', ' red ');

The result of the call is the last list item as a red background.

JS jquery Gets the current element of the sibling previous next element jquery How to get the first or last child element