浅谈childNodes和children以及firstChild和firstElementChild

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。

浅谈childNodes和children以及firstChild和firstElementChild相关推荐

childNodes和children，firstChild和firstElementChild，lastChild和lastElementChild的区别
首先,我们给出HTML的代码 <ul id='city'><li>北京</li><li>南京</li><li>东京</li ...
js中firstChild与firstElementChild及childNodes与children的区别
firstChild: 获取指定元素的第一个子节点 (包括元素节点和文本节点) . 若父元素与第一个子元素之间存在空白节点,firstChild 获取到的将是空白节点而不是第一个子元素.这时可以使用 ...
firstElementChild firstChild 以及childNodes和children方法
[转]js下firstElementChild,firstChild ,childNodes,children 一. <div><p>123</p> </di ...
浅谈浏览器的兼容性（从HTML、CSS、JS、PC端、移动端等方面）
浅谈浏览器的兼容性) 前言一.HTML部分 a.html5的新标签 b.img的alt属性 c.ul标签内外边距问题二.css部分 a.css的hack问题:主要针对IE的不同版本,不同的浏览器的 ...
JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6
Node.js 的基础教学之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...
浅谈前端自动化构建 -- Grunt、Gulp、FIS
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:内容较多,建议通过左侧导航栏进行阅读前端自动化构建基本介绍一切重复工作本应自动化.将开发中的源代码,自动化的转换成生产环境中可以运行的程序, ...
html代码id,浅谈html中id和name的区别实例代码
浅谈html中id和name的区别实例代码更新时间:2008年07月28日 23:00:55 作者: 这个是form里面的name与id的区别我们可以通过一段代码来分析一下其中的微妙差别: 在 ...
浅谈jQuery Mobile设计思想
来自51CTO技术社区:http://mobile.51cto.com/others-288591.htm jQuery Mobile设计思想是本文要介绍的内容,主要是来了解jQuery Mobile ...
浅谈umi router
浅谈umi router 前言基础路由 layout 前言最近学习UmiJS,在umi-router上踩了许多坑,现记录下所学. 基础路由假设 pages 目录结构如下: + pages/+ u ...

浅谈childNodes和children以及firstChild和firstElementChild

浅谈childNodes和children以及firstChild和firstElementChild相关推荐

最新文章

热门文章