JS获取DOM元素

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、childNodes：获取节点，不同浏览器表现不同；
IE：只获取元素节点；
非IE：获取元素节点与文本节点；
解决方案：if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue

2、children：获取元素节点，浏览器表现相同。
因此建议使用children。

childNodes返回的是节点的子节点集合，包括元素节点、文本节点还有属性节点。
children返回的只是节点的元素节点集合，所以返回的只有span元素。

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与nextElementSibling
相同点：获取后一个兄弟节点对象；
不同点：1、nextSibling：IE6,7,8：后一个兄弟元素节点；
非IE6,7,8：后一个兄弟节点，文本节点或者元素节点；
2、lastElementChild：IE6,7,8：不支持；
非IE6,7,8：后一个兄弟元素节点；

6、previousSibling与previousElementSibling
相同点：获取前一个兄弟节点对象；
不同点：1、previousSibling：IE6,7,8：前一个兄弟元素节点；
非IE6,7,8：前一个兄弟节点，文本节点或者元素节点；
2、previousElementChild：IE6,7,8：不支持；
非IE6,7,8：前一个兄弟元素节点；

7、parentNode：获取父元素，不存在兼容性问题。