js下firstElementChild以及firstChild，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。

转载自：http://www.cnblogs.com/jelly7723/p/4871849.html

js下firstElementChild以及firstChild，Children的用法相关推荐

[转载] js 下获取子元素的方法 -- 李富生
地址:https://www.cnblogs.com/web-fusheng/p/6816440.html firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChi ...
js 下获取子元素的方法
笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js ...
MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
说在前有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都在它的源码 ...
谈谈JS里的{ }大括号和[ ]中括号的用法
为什么80%的码农都做不了架构师?>>> 谈谈JS里的{ }大括号和[ ]中括号的用法,理解后就可以看懂JSON结构了. 一.{ } 大括号,表示定义一个对象,大部分情况下要有 ...
html鼠标键弹起事件,js鼠标按键事件和键盘按键事件用法实例汇总
本文实例讲述了js鼠标按键事件和键盘按键事件用法.分享给大家供大家参考,具体如下: keydown,keyup,keypress:属于你的键盘按键 mousedown,mouseup:属于你的鼠标按键 ...
dtree.js下拉树控件
dtree下拉树的一些基础用法 id Number 唯一的id pid Number 判定父节点的数字,根节点的值为 -1 name String 节点的文本标签 url String ...
自适应分辨率可扩展二层JS下拉菜单
1. S下拉菜单原理下拉菜单实际上就是在开始的时候显示一级或者说是主菜单(图一).当触发条件(例如:鼠标移动到上面时)显示次级菜单(图二). 图一图二那么如何实现这样的效果呢.其实很简单.所有的 ...
jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
linux为什么用tar压缩,linux下tar压缩和解压命令用法详解
linux下tar压缩和解压命令用法详解 2017-03-25 14:06 分享人:老牛将/usr/local/test目录下所有文件仅打包,不压缩到 /usr/local/auto_bak/目下 ...

js下firstElementChild以及firstChild，Children的用法

js下firstElementChild以及firstChild，Children的用法相关推荐

最新文章

热门文章