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

Question

有这样一个内容的 HTML 页面。

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

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

但是，在开发人员工具 (Chromium) 中，它是相反的。

![在此处输入图片描述][2]

So, why exactly the first node is not <h1>PyCon Video Archive</h1>? Why a text object as first element?

我会很感激这里的一些帮助。

EDIT

所以，我刚刚发现在 Firebug (FF) 中，相同的函数会有不同的行为。

我的新问题:使用 .childNodes() 是一种不可靠的访问 DOM 元素的方式吗？

Answer 1

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

document.body.firstElementChild;

...但较旧的浏览器不支持它。

---

一个支持度更高的方法是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 );