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

Posted 2021-02-21 ZZZZZLQ

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