XML DOM childNodes 属性_xml childnodes-优快云博客

本文链接：https://blog.youkuaiyun.com/lcj8/article/details/3157193

本文详细解析了childNodes属性的使用方法及特点，介绍了如何通过此属性获取DOM元素的子节点列表，并探讨了不同浏览器下表现的一致性问题。文章还提供了一些实用的示例代码帮助读者更好地理解childNodes的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义和用法

childNodes属性可返回属于document的子节点的节点列表。

语法：

documentObject.childNodes

提示和注释：

提示：请使用NodeList的长度属性来测定节点列表中的节点数目。在您已知晓节点列表的长度后，就能够轻易地循环遍历此节点，并提取您需要的值！

firstChild 获取对象的 childNodes 集合的第一个子对象的引用。

<div onclick="alert(this.firstChild.tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
</div>

lastChild 获取该对象 childNodes 集合中最后一个子对象的引用。

<div onclick="alert(this.lastChild.tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
</div>

在<div>标签内再加一行lastChild就找不到了

<div onclick="alert(this.lastChild.tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
</div>

那么用childNodes来测试

<div onclick="alert(this.childNodes[0].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
</div>

childNodes[0]是表示span，而childNodes[1]表示的并非pre，childNodes[2]才是。

那么如果说childNodes[0]是span，childNodes[2]是pre，那么childNodes[1]则是这两个标签对象间的换行

但为什么childNodes[3]表示了font，而不是childNodes[4]的呢？

<div onclick="alert(this.childNodes[3].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
</div>

再来一行，childNodes[4]表示的又即是换行，childNodes[5]才是标签p

<div onclick="alert(this.childNodes[5].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
<p>p-jack</p>
</div>

根据这个规律，我可以断定childNodes[6]不是换行

<div onclick="alert(this.childNodes[6].tagName)">
<span>span-cnbruce</span>
<pre>pre-cnbruce</pre>
<font>font-james</font>
<p>p-jack</p>
<a>a-href</a>
</div>

那么对于对象的换行来说，首项是1,公差是3的等差数列？

此外，对于FF浏览器的测试结果表示满意：
childNodes[1]、childNodes[3]、childNodes[5]、childNodes[7]分别表示<span> <pre> <font> <p>

一个很笨拙的解决办法：我一般对需要通过dom获取的html对象都写在一行上，免得出现诡异现象。