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:获取父元素,不存在兼容性问题。

 

posted on 2017-11-16 10:59  ranyonsue  阅读(716)  评论(0编辑  收藏  举报

导航