js获取子节点、父节点、兄弟节点的不同方式及不同方式之间的差别

开始之前，必须要说 还不是因为自己写个小demo的时候坑了自己一把，忽略了previousSibling和previousElementSibling的区别，所以特此对获取各种亲人节点做一下总结

一、js获取子节点

1、直接动过DOM元素获取直接节点

    如：

var aLi=document.getElementById("#test").getElementsByTagName("li");

2、通过childNodes获取子节点

var oChild=document.getElementById("test").childNodes;

要注意的是：childNodes获取子节点时，获取的不光是元素节点还有空格和换行，还有就是获取的子节点是类数组格式。

var aLi=document.getElementById("#test").childNodes;

可以通过循环去掉空格和换行

var aLi=document.getElementById("test").getElementsByTagName("li");
    for(var i=0;i<aLi.length;i++){
      if(aLi[i].nodeName=="#text"&&/\s/.test(aLi[i].nodeValue)){
          document.getElementById("test").removeChild(aLi[i]);
        }
    }

childElementCount获取子元素的长度

var len=document.getElementById("test").childElementCount;

3、通过children来获取，只是这方法也只是获取的类数组格式，写代码时需要加[]

var oChild=document.getElementById("test").children[0];

4、获取第一个子节点firstChild和最后一个子节点lastChild.

var oFirstchild=document.getElementById("test").firstChild;
var olastchild=document.getElementById("test").lastChild;

但是，需要注意的是：lastchild和firstChild这种方式跟childNodes一样获取的不光是元素节点还有空格和换行

5、获取第一个子节点firstElementChild和最后一个子节点lastElementChild.

var oFirstchild=document.getElementById("test").firstElementChild;
var olastchild=document.getElementById("test").lastElementChild;

不同于firstChild和lastChild的是，这种方式获取的只有元素节点。

二、js获取父节点

1、parentNode和parentElementNode获取父节点

跟firstElementChild和firstChild、lastElementChild和lastChild一样，parentNode获取的节点包括元素节点、空格和换行，parentElementNode只有元素节点。

var oDiv=document.getElementById("test").parentNode;
var oDiv=document.getElementById("test").parentElementNode;

2、parentElement跟parentNode一样，只是parentElement是ie的标准。

3、offsetparent获取所有的父节点，这个有点意思，这个获取的是body下此节点所有的父节点。

var all = document.getElementById("test").offsetParent;

三、js获取兄弟节点
1、获取上一个兄弟节点previousSibling（包括元素 空格和换行符），previousElementSibling（只有元素节点）

    

var aLi=document.getElementById("#test").previousSibling;
var aLi=document.getElementById("#test").previousElementSibling;

2、获取下一个兄弟节点nextSibling（包括元素 空格和换行符），nextElementSibling（只有元素节点）

var aLi=document.getElementById("#test").nextSibling;
var aLi=document.getElementById("#test").nextElementSibling;