获取子类元素，FirstElementChild、children和ChildNode等等

最新推荐文章于 2024-02-01 10:49:45 发布

原创最新推荐文章于 2024-02-01 10:49:45 发布 · 1.9k 阅读

CC 4.0 BY-SA版权

本文介绍了如何通过firstElementChild、childNodes等方法获取DOM元素中的特定文本内容，并对比了这些方法的区别及适用场景。

<div>111

123

</div>

目的是想要获得第一个div里面的“111”和“123”这个元素，作为字符串输出。

1、使用firstElementChild

var ad=document.getElementsByTagName('div')[0].firstChild;

console.log(ad);

获得的是text类型的111，就是如果标签之间有text元素或者是空白格也都会作为firstChild检测出来，类型是object text。

想要获得“123”，name就使用lastChild。

2、使用childNodes

使用childNodes，

var ad=document.getElementsByTagName("div")[0].childNodes;

console.log(ad);

获得的是Nodelist，用于遍历，可以用中括号或者是item（）来获得各类元素；

3、使用firstElemetChild

var ad=document.getElementsByTagName("div")[0]firstElementChild;

console.log(ad);

而如果想要获得div里面的div元素，那么可以使用firstElementChild。只会获得Element元素。最后一个标签元素可以用lastElementChi获得。

4、使用children

var ad=document.getElementsByTagName("div")[0].children[0];

console.log(ad);

firstElementChild对于ie6.7.8都不兼容，而使用children不会获取第一位obj text类的元素，而是获取了Element的元素，不会获取所有节点元素。

5、获得obj text里面的字符。

可以使用.data 和wholeText方法获得text文本里面的字符值

5、元素element是note里面的一种类型。

而dom扩展里，element类型有children等扩展属性。children是element的属性。而childNodes是Node的属性。
因为使用id选择器获得元素是element类的也是note类型的，所以可以使用children和childNodes属性。

可是用childNodes获得元素之后并不能使用children属性。

node使用children属性会获得undefined。