Question

有HTML页面，内容如下。

enter image description here

MDN上的文档说childNodes returns a collection of child nodes of the given element是一个NodeList。

因此，根据文档，NodeList的第一个子节点应为<h1>PyCon Video Archive</h1>。

但是，在开发者工具（Chromium）中，它反过来说。

！[在此输入图片说明] [2]

那么，为什么第一个节点不是<h1>PyCon Video Archive</h1>？为什么将文本对象作为第一个元素？

我会在此感谢一些帮助。

修改

所以，我只是想到在Firebug（FF）中，同样的函数表现不同。

enter image description here

我的新问题： 使用.childNodes（）是一种访问DOM元素的不可靠方式吗？

Answer 1

因为在h1元素之前有一个空白文本节点。据推测，在源代码中（如果您查看源代码），h1开始标记要么缩进，要么移动到正文中的新行（或两者）以便于阅读。猜测一下，我想它就像下面这样：

<body>
    <h1>PyCon Video Archive</h1>
    <!-- ...other html... -->

如果您将其修改为：

<body><h1>PyCon Video Archive</h1><!-- ...other html... -->

然后第一个childNode确实是h1元素。

值得注意的是，即使在元素标记之外，文本仍然是父元素的子节点。虽然使用选择器无法轻易定位。

Answer 2

要获得第一个元素子元素，您可以使用...

document.body.firstElementChild;

......但是较老的brwosers不支持它。

具有更大支持的方法是children集合......

document.body.children[0];

...它有很好的支持，但在旧浏览器方面仍有一些漏洞。

（只需双重检查，只要您不支持Firefox 3，只要您不在标记中包含HTML代码注释，使用.children将是安全的。）

为确保您拥有最广泛的浏览器支持，请创建一个功能......

function firstElementChild( parent ) {

    var el = parent.firstChild;
    while( el && el.nodeType !== 1 )
        el = el.nextSibling;

    return el;
}

并像这样使用它......

var h1 = firstElementChild( document.body );

document.body.childNodes中NodeList的第一个元素

2 个答案: