childNodes和children以及firstChild和firstElementChild的作用区别

1、childNodes属性: 返回指定元素的子节点集合,包括元素节点和文本节点。 除了IE9和Firefox,其他浏览器都支持通过childNodes[i]获取第i个子节点。   2、children属性: 返回...

1、childNodes属性:


返回指定元素的子节点集合,包括元素节点和文本节点。


除了IE9和Firefox,其他浏览器都支持通过childNodes[i]获取第i个子节点。


 


2、children属性:


返回指定元素的子元素集合,只包括元素节点,不包括文本节点。


除了IE9和Firefox,其他浏览器都支持通过children[i]获取第i个子节点。


注意:children在IE中包含注释节点。


 


3、firstChild属性:


获取指定元素的第一个子节点,可以是元素节点,也可以是文本节点。


问题:若父元素与第一个子元素之间存在空白节点,firstChild获取到的将是空白节点而不是第一个子元素。


解决:使用firstElementChild属性。


问题:IE6/7/8中不支持firstElementChild属性。


解决:使用children[0]属性。


 


4、firstElementChild属性:


获取指定元素的第一个子元素节点,不会检测到文本节点。


 


总结:


如果想获取到指定元素的子元素节点,最好使用children方法,childNodes方法及firstChild方法在现代浏览器中都会把空白节点检测出来,所以推荐以后使用children方法来替代childNodes。


你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章