js 中childNodes与children的区别,firstChild与firstElementChild区别

Posted ZZZZZLQ

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 中childNodes与children的区别,firstChild与firstElementChild区别相关的知识,希望对你有一定的参考价值。

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:获取离第一个定位父元素的上距离;

 

以上是关于js 中childNodes与children的区别,firstChild与firstElementChild区别的主要内容,如果未能解决你的问题,请参考以下文章

js子节点children和childnodes的用法

js下firstElementChild firstChild 以及childNodes和children方法

javascript中children和childNodes的区别

js表单验证处理和childNodes 和children 的区别

获取子元素节点(children,childNodes)

javascript中children和childNodes的区别