JS childNodes,firstChild,firstElementChild,children用法

约定不等于承诺〃 2023-10-05 08:23 3阅读 0赞

**在JS中获取元素子节点时候，使用childNode()遇到了一些问题，找了一些资料总结如下。**

首先，用于测试先规定好HTML：

1.  `<div>`
2.  `<p>`
3.  `<span></span>`
4.  `<span></span>`
5.  `<span></span>`
6.  `</p>`
7.  `<div></div>`
8.  `</div>`

#### 1 childNodes ####

1.  `var node = document.getElementsByTagName("div")[0].childNodes;`
2.  `document.write(node[0].nodeName+"<br/>");`
3.  `document.write(node[1].nodeName);`

打印出来内容的第一个是 \#text，原本以为获取的是第一个子节点p，然而得出的是 \#text，可以查一下文本节点的 nodeName 是 \#text，空白符 / 回车符都属于文本节点，<div>和<p>之间有一个回车，所以使用childNode方法想获取第一个子节点就有问题了。

#### 2 firstChild ####

该方法本质上和childNode一样，它只是在父节点<div>基础上直接获取它的第一个子节点，在没有改变HTML结构的情况下，得出的结果还是 \#text。

1.  `var node = document.getElementsByTagName("div")[0];`
2.  `document.write(node.firstChild.nodeName);`

#### 3 firstElementChild ####

为了解决获取第一个子节点时会被空白符 / 回车符干扰的问题，使用firstElementChild可以有效获取到父元素的第一个子元素节点，是元素节点哦，空白符 / 回车符都是文本节点。

1.  `var node = document.getElementsByTagName("div")[0];`
2.  `document.write(node.firstElementChild.nodeName);`

得出的结果有效的获取到了原本想要的 p。

#### 4 children ####

然而firstElementChild使用中会有兼容问题，在IE6 7 8中是没有这个方法，因此呢，出现了children方法，它可以兼容所有浏览器。但是，需要注意的一点，children返回的结果是一个数组。

1.  `var node = document.getElementsByTagName("div")[0];`
2.  `document.write(node.children[0].nodeName);`

得出的结果也有效的获取到了原本想要的 p，在改变children\[1\]，可以获取到DIV。

JS childNodes,firstChild,firstElementChild,children用法

发表评论取消回复

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

相关阅读

相关 js中...的用法

相关 JS符号 && || 用法

相关 js sort()用法

相关 JS TS Splice用法

相关 require.js的用法

相关 js中typeOf用法

相关 Android：WebView用法（Js交互）

相关 js排序——sort()排序用法

相关 js indexOf()用法

相关 JS中__doPostBack用法