js 下获取子元素的方法

约定不等于承诺〃 2022-04-24 04:18 1774阅读 0赞

**笔记核心：**

firstElementChild只会获取元素节点对象，从名称就可以看出来，firstChild则可以获取文本节点对象（当然也可以获取元素节点对象），比如空格和换行都被当做文本节点。

js不同于jQuery，在获取DOM时，有很多不方便的地方，哎，没办法，原始的东东，虽然万能，但却不方便。

咱今天在使用原生js的时候，就遇见一个坑------》firstChild，具体是使用firstChild获取元素的第一个子节点，可是相当的悲剧！！！

这个是一个小模型：

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

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

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

死活都得不出结果，后来查了才知道，原来：在现代浏览器下，比如Chrome,FF，ie11等等，由于会把<div>   <p>两个标签之间的空白节点也解析出来，所以会alert出\#text（由于空白节点是属于text文本节点）

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

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

这让咱想起了代码压缩的好处~~~

**解决：使用firstElementChild**

使用firstChild确实可以实现获取到父元素的第一个子元素节点,但是当div与p之间存在空白节点的话，first就会获取到空白节点而不是第一个元素节点。

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

可以理解嘛，毕竟从字面意思上，firstChild就是第一个孩子，空白节点也算是嘛，虽说看不见，但是还是纯在的呀（你看不见，它就不纯在嘛？！）

而firstElementChild就指明要第一个子元素，空白的东东就不算了~~

但是问题又来了，firstElementChild这个方法在现代浏览器中兼容，但是在ie678中却没有这个方法，一旦在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。

转自：[https://www.cnblogs.com/web-fusheng/p/6816440.html][https_www.cnblogs.com_web-fusheng_p_6816440.html]

[https_www.cnblogs.com_web-fusheng_p_6816440.html]: https://www.cnblogs.com/web-fusheng/p/6816440.html

发表评论取消回复

表情：

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

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

相关阅读

相关 fabric.js 获取Group中的某个元素中的子元素

fabric.js 中的 Group 对象代表一组由多个元素组成的对象。要获取 Group 中的某个元素中的子元素，可以使用 Group 对象的 getObjects() 方法

r囧r小猫/ 2024年03月25日 18:59/ 0 赞/ 25 阅读

相关 JS获取元素节点和子节点的三种方法(dom查询)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

深藏阁楼爱情的钟/ 2023年01月20日 15:58/ 0 赞/ 264 阅读

相关 js中获取元素的方法总结

1,根据 ID 获取 > 使用 getElementById() 方法可以获取带有 ID 的元素对象。 document.getElementById('id'

朱雀/ 2022年12月05日 00:51/ 0 赞/ 167 阅读

相关 JS_JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法

$(function(){ //遍历获取的input元素对象数组，绑定click事件 var len = $("input[type=

水深无声/ 2022年08月30日 05:22/ 0 赞/ 129 阅读

相关 js获取元素下的第一级子元素

js childnodes获取的是所有的子元素，而我们实际要获取第一级子元素。 function getChildren(obj){ var obj

朱雀/ 2022年08月23日 05:45/ 0 赞/ 245 阅读

相关 js和jquery获取父级元素、子级元素、兄弟元素的方法

原生的JS获取ID为test的元素下的子元素。可以用：比如： <div id="dom"> <div></div> <div></div>

冷不防/ 2022年08月10日 08:51/ 0 赞/ 264 阅读

相关 js中的children实时获取子元素

先看下面一个小例子的结果 <!DOCTYPE html> <html lang="en"> <head> <meta cha

古城微笑少年丶/ 2022年05月23日 11:27/ 0 赞/ 236 阅读

相关 js 下获取子元素的方法

笔记核心： firstElementChild只会获取元素节点对象，从名称就可以看出来，firstChild则可以获取文本节点对象（当然也可以获取元素节点对象），比如空格和换

约定不等于承诺〃/ 2022年04月24日 04:18/ 0 赞/ 1775 阅读

相关 js 获取元素，同级元素下的子元素总结

太原总结不慌不慌，来日方长 \\ 1.获取同级元素 form 下的 div 元素下的 input标签的value值 \\ //html代码 <d

亦凉/ 2021年11月05日 04:40/ 0 赞/ 1138 阅读

相关 js 获取指定坐标下的元素

`elementFromPoint`的用法语法： oElement = document . elementFromPoint ( iX , iY ) 参数

骑猪看日落/ 2021年06月26日 16:06/ 0 赞/ 608 阅读