Article From:

Original address:


var chils= s.childNodes;  //Get all the sub nodes of the S

var par=s.parentNode;   //Get the parent node of S

var ns=s.nextSbiling;   //Get the next brother node of S

var ps=s.previousSbiling;  //Get the last brother node of S

var fc=s.firstChild;   //Get the first sub node of S

var lc=s.lastChile;   //Get the last child node of S


JSGet the parent level of the node, the sublevel element

First, let’s talk about the way to get JS, which is much more troublesome than JQUERY’s method. Later, we compare it with JQUERY.

JSThe method is much more troublesome than JQUERY, mainly because of FF browser, and FF browsers will also regard your line changing as DOM element.

<div id="test">

The native JS gets the child elements under ID’s test element.

It can be used as follows:

var a = docuemnt.getElementById("test").getElementsByTagName_r("div");

It’s no problem.

At this time a.length=2;

But if we change the other way

var b =document.getElementByIdx_x("test").childNodes;


At this point, b.length is not a problem in IE browser, it is still equal to 2, but in FF browser, it will cause 4 because FF also regards line wrap as an element.

So, here we are going to deal with it. We need to traverse these elements, leave the element type blank and delete the text.

function del_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))

The above function traverses the child element, where the node type is text and the node value of the text type node is empty. Just remove him.

nodeNamesThe node type of a node can be obtained. /\s/ is a regular expression of non empty characters in JS. Ahead of you! The representation is an empty character

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

If the string string contains text matching with RegExpObject, it returns true, otherwise it returns false.

nodeValueIt represents the value in this node.

removeChildIt is the subelement that deletes the element.

After that, call the above functions to clean up the spaces before calling these properties.


<div id="test">
function dom() {
var s= document.getElementByIdx_x("test");
del_ff(s);  //Clean up the space
var chils= s.childNodes; //Get all the sub nodes of the S
var par=s.parentNode;  //Get the parent node of S
var ns=s.nextSbiling;  //Get the next brother node of S
var ps=s.previousSbiling; //Get the last brother node of S
var fc=s.firstChild;  //Get the first sub node of S
var lc=s.lastChile;  //Get the last child node of S

The following is a description of the parent, child and brother node lookup method of JQUERY.

jQuery.parent(expr)  To find a father node, it can be filtered into expr, such as $(“span”).Parent () or $(“span”).Parent (“.Class”).

jQuery.parents(expr),Similar to jQuery.parents (expr), but it looks for all ancestral 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 descendants.

jQuery.contents(),Return to the following contents, including nodes and text. The difference between this method and children () is that, including blank text, it will also be used as a

jQueryThe object returns, children () will only return to the node

jQuery.prev(),Returns the last sibling node, not all sibling nodes.

jQuery.prevAll(),Return all the previous brotherhood nodes,Returns the next sibling node, not all sibling nodes.

jQuery.nextAll(),Return all the brother nodes after all

jQuery.siblings(),Return to siblings

jQuery.find(expr),It’s quite different from jQuery.filter (expr). JQuery.filter () is selected from the initial collection of jQuery objects, and jQuery.find ().
The result of the return does not contain the contents of the initial collection, such as $(“P”), find (“span”), starting from < p> element; < span> equal to $(P span).


Leave a Reply

Your email address will not be published. Required fields are marked *