javascript中的childNodes与children

最新推荐文章于 2023-05-17 09:25:23 发布

原创最新推荐文章于 2023-05-17 09:25:23 发布 · 619 阅读

CC 4.0 BY-SA版权

文章标签：

6 篇文章

订阅专栏

本文详细解析了JavaScript中DOM操作的关键方法，包括childNodes与children的区别、firstChild与firstElementChild等节点选择器的不同之处，并介绍了parentNode、offsetParent等属性的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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