firstElementChild、firstChild 、childNodes和children方法

一、

<div>
    <p>123</p>
</div>

在上面这段代码中,如果使用以下js代码

var oDiv=document.getElementByTagName("div")[0];
alert(oDiv.firstChild.nodeName)

在ie9以下,alert出来的是p(p标签名字),但是在现代浏览器下,比如Chrome,FF,ie11等等,由于会把<div> <p>两个标签之间的空白节点也解析出来,所以会alert出#text(由于空白节点是属于text文本节点)

如果把html的Demo改成如下,则无论在古老浏览器还是现代浏览器中得到的结果都是一样

<div><p>123</p></div>

由于没有了div与p标签之间的空白,所以执行上面js代码时无论在ie678还是现代浏览器中都输出p标签

二、

在平时写js中,我们经常会想用一个方法直接获取到父元素的第一个子元素节点,就好比如上面的例子中,使用firstChild确实可以实现这一功能

<div><p>123</p></div>
var first=document.getElementByTagName("div")[0].firstChild

这样我们就可以获取到第一个元素子节点,但是当div与p之间存在空白节点的话,first就会获取到空白节点而不是第一个元素节点。

所以,DOM扩展了一个firstElementChild方法,这个方法可以获取到父元素的第一个子元素节点

<div>
    <p>123</p>
</div>
var first=document.getElementByTagName("div")[0].firstElementChild

即便div与p标签中存在空白节点,但是使用firstElementChild方法仍然可以正常的获取到div的第一个子元素节点p。

但是问题又来了,firstElementChild这个方法在现代浏览器中兼容,但是在ie678中却没有这个方法。

三、

虽然firstElementChild方法在ie678中不兼容,但是还有一个方法,便是Children方法。

经测试children方法在所有主流浏览器中都兼容,包括ie678,并且它也能实现firstElementChild的功能

<div>
    <p>123</p>
</div>
var first=document.getElementByTagName("div")[0].children[0]

所以,以后写js的时候,如果想获取到子元素的element节点,最好使用children方法,因为childNodes方法以及firstChild方法在现代浏览器中使用,都会把元素标签中的空白节点检测出来,一般我们使用这两个方法都是为了获取到元素的元素节点,空白节点会给我们造成很多不必要的bug,而children方法则是只检测element元素节点,防范于未然,所以推荐大家以后使用children方法来替代childNodes。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个会写诗的程序员的博客

jQuery Validate自定义各种验证方法jQuery Validate自定义各种验证方法

602
来自专栏问天丶天问

Velocity 基础语法

1824
来自专栏飞雪无情的博客

Go语言实战笔记(五)| Go 切片

切片也是一种数据结构,它和数组非常相似,因为他是围绕动态数组的概念设计的,可以按需自动改变大小,使用这种结构,可以更方便的管理和使用数据集合。

954
来自专栏天天

框架设计续集(六)

774
来自专栏对角另一面

读Zepto源码之样式操作

这篇依然是跟 dom 相关的方法,侧重点是操作样式的方法。 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版...

2180
来自专栏前端开发

【JavaScript】获取对应的节点总结

1544
来自专栏一个会写诗的程序员的博客

Scala类型推导Scala类型推导

根据Picrce的说法:“类型系统是一个可以根据代码段计算出来的值对它们进行分类,然后通过语法的手段来自动检测程序错误的系统。”

922
来自专栏Golang语言社区

深入剖析Go语言编程中switch语句的使用

switch语句可以让一个变量对反对值的列表平等进行测试。每个值被称为一个的情况(case),变量被接通检查每个开关盒(switch case)。 在Go编程,...

3477
来自专栏菜鸟前端工程师

JavaScript学习笔记017-数值方法0Math0定时器

653
来自专栏一直在跳坑然后爬坑

如何通过自定义View方式模拟SVG并实现动画

3.然后我们要进行对五角星动画的裁剪,涉及到的方法是PathMeasure的getLength和getSegment方法,getLength()不用多说,就是用...

781

扫码关注云+社区