1. 程式人生 > >javascript中childNodes與children的區別

javascript中childNodes與children的區別

1、childNodes:獲取節點,不同瀏覽器表現不同;

  IE:只獲取元素節點;

  非IE:獲取元素節點與文字節點;

  解決方案:if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue 

2、children:獲取元素節點,瀏覽器表現相同。

  因此建議使用children。

3、firstChild與firstElementChild

  相同點:獲取父節點下的第一個節點物件;

  不同點:1、firstchild:IE6,7,8:第一個元素節點;

               非IE6,7,8:第一個節點,文字節點或者元素節點;

      2、firstElementChild:IE6,7,8:不支援;

                  非IE6,7,8:第一個元素節點;

function firstChild(obj){
    if(obj.firstElementChild) return obj.firstElementChild;
    return obj.firstChild
}

4、lastChild與lastElementChild

  相同點:獲取父節點下的最後一個節點物件;

  不同點:1、lastchild:IE6,7,8:最後一個元素節點;

               非IE6,7,8:最後一個節點,文字節點或者元素節點;

      2、lastElementChild:IE6,7,8:不支援;

                  非IE6,7,8:最後一個元素節點;

5、nextSibling與nextElementChild

  相同點:獲取後一個兄弟節點物件;

  不同點:1、nextSibling:IE6,7,8:後一個兄弟元素節點;

               非IE6,7,8:後一個兄弟節點,文字節點或者元素節點;

      2、lastElementChild:IE6,7,8:不支援;

                  非IE6,7,8:後一個兄弟元素節點;

6、previousSibling與previousElementChild

  相同點:獲取前一個兄弟節點物件;

  不同點:1、previousSibling:IE6,7,8:前一個兄弟元素節點;

               非IE6,7,8:前一個兄弟節點,文字節點或者元素節點;

      2、previousElementChild:IE6,7,8:不支援;

                  非IE6,7,8:前一個兄弟元素節點;

7、parentNode:獲取父元素,不存在相容性問題。

8、offsetParent:獲取第一個設定定位的父元素;

     offsetLeft:獲取離第一個定位父元素的左距離;

     offsetTop:獲取離第一個定位父元素的上距離;