js下firstElementChild以及firstChild，Children的用法

雨点打透心脏的1/2处 2022-06-03 04:54 167阅读 0赞

一、

<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

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关 Ajax的特性以及用法

一、什么是Ajax 1、jQuery的Ajax ①：get方法编辑 ②：post方法 ③：Ajax（这个重要，jQuery的ajax最常用） PS：一定要注意，数

布满荆棘的人生/ 2024年03月23日 12:14/ 0 赞/ 32 阅读

相关 JS符号 && || 用法

var a = 1 && 2; console.log(a) // 2 var b = 0 && 2; console.log(b)

古城微笑少年丶/ 2022年12月02日 10:48/ 0 赞/ 89 阅读

相关 js sort()用法

语法：array.sort(fun)；参数fun可选。规定排序顺序。必须是函数。注：如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照

阳光穿透心脏的1/2处/ 2022年11月29日 00:47/ 0 赞/ 87 阅读

相关 require.js的用法

一、为什么要用require.js？最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文

ゞ浴缸里的玫瑰/ 2022年08月21日 13:43/ 0 赞/ 126 阅读

相关 angularJS指令以及用法

指令描述 ng-app 定义应用程序的根元素。 ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerH

柔光的暖阳◎/ 2022年08月20日 03:17/ 0 赞/ 156 阅读

相关 js跳转页面并传值以及localStorage的用法

之前写一个页面需要跳转页面，那个页面需要这边这个页面的“跳转按钮”所执行的一系列的函数的值，我用的是 window.location.href=url; 然而

Bertha 。/ 2022年08月09日 00:49/ 0 赞/ 288 阅读

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

1、childNodes属性：返回指定元素的子节点集合，包括元素节点和文本节点。除了IE9和Firefox，其他浏览器都支持通过childNodes\[i\]获取第i个

╰半橙微兮°/ 2022年06月16日 05:17/ 0 赞/ 162 阅读

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

一、 <div> <p>123</p> </div> 在上面这段代码中，如果使用以下js代码 var oDiv=document.

雨点打透心脏的1/2处/ 2022年06月03日 04:54/ 0 赞/ 168 阅读

相关 js indexOf()用法

<1> indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。语法 stringObject.indexOf(searchvalue,f

快来打我*/ 2022年05月04日 00:56/ 0 赞/ 256 阅读

相关 Session, ViewState 以及用法

基本理论： session值是保存在服务器内存上,那么,可以肯定,大量的使用session将导致服务器负担加重. 而viewstate由于只是将数据存入到页面隐藏控件里,不

水深无声/ 2021年09月29日 18:32/ 0 赞/ 277 阅读