最好使用children而不是firstchild和firstElementChild

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

来自:js下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中却没有这个方法,一旦在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。

另外还有一种兼容写法:

// 兼容写法
var obj = oUl.firstElementChild || oUl.firstChild;
用异或来做兼容,顺便提一句:firstElementChild在ie678下不会报错,你打印的话会看到undefined,这样通过短路或写法可以在ie678下使用oUl.firstChild更为简便


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流