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 条评论
登录 后参与评论

相关文章

来自专栏WindCoder

JavaScript字符串数组排序

思考路线:需要区分数字字符和非数字字符,故可知数字字符为此条件中的”特殊字符“,即特殊情况,需单独处理。数字字符的ASCII值为48-57。每次比较两个字符串(...

541
来自专栏前端知识分享

第30天:DOM对象操作

documment.getElementById() documment.getElementsByTagName() documment.getElement...

451
来自专栏web前端教室

js数组去重的思路与缓动公式

前端开发的面试中,至少有一类题是必出的,那就是去重。什么叫去重呢?就是把一组字符串中重复出现的,都删除掉。 这种题重要的是解决的思路要正确,思路正确的话其实也很...

1898
来自专栏代码世界

Python基础数据类型之列表和元组

一、列表   list   列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[]括起来,每个元素以逗号隔开,...

26812
来自专栏Micro_awake web

es6(二):解构赋值

ES中允许按照一定格式从数组,对象值提取值,对变量进行赋值,这就是解构(Destructuring) 1 let [a,b,c]=[1,10,100] 2 ...

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

JavaScript学习笔记010-DOM节点的运用

633
来自专栏Play & Scala 技术分享

酷炫的一行代码 - Scala就是这么任性!

3547
来自专栏小詹同学

Leetcode打卡 | No.27 移除元素

欢迎和小詹一起定期刷leetcode,每周一和周五更新一题,每一题都吃透,欢迎一题多解,寻找最优解!这个记录帖哪怕只有一个读者,小詹也会坚持刷下去的!

461
来自专栏阿炬.NET

asp.net mvc 验证码

2587
来自专栏韦弦的微信小程序

Swift 字符串转整数 (atoi) - LeetCode

1、在找到第一个非空字符之前,需要移除掉字符串中的空格字符。如果第一个非空字符是正号或负号,选取该符号,并将其与后面尽可能多的连续的数字组合起来,这部分字符即为...

803

扫码关注云+社区