javascript - 为什么 firstChild 不返回第一个元素？

Question

前几天我在写一些代码，出于某种原因，我不知道为什么会这样，但这是我写的代码的一部分。

    var item = document.getElementByClass('object');
    var innerImageId = item.firstChild.id;

我多次检查这段代码。这段代码的问题是 innerImageId 的值是未定义的。 item 的 firstChild 是一个图像。我需要获取图像的 ID，但无论我检查代码多少次，它都不起作用。这是代码的 HTML 文件。

    <div class="object inventory-box">
        <img src="image.png" id="sample-image">
    </div>

这看起来不正确吗？好吧，我在 Google Chrome 中做了一些调试，结果发现 div“对象”中有 3 个节点。第一个和最后一个节点的 id 未定义，但第二个是“sample-image”。然后我尝试使用“firstElementChild”而不是“firstChild”，效果很好。

然后为了测试它，我做了这样的事情-

    <div class="object inventory-box">



       <img src="image.png" id="sample-image">



    </div>

(或多行不必要的空格)

但它仍然显示 3 个节点，输入符号、div 和另一个输入符号。此问题在 Chrome、Internet Explorer 和 Firefox 中不断出现。

有人可以解释为什么会有这些随机的 2 个额外节点吗？

Answer 1

当您的代码中有空格或新行时，浏览器会插入一个文本节点。您正在定位其中之一。

尝试

var img = document.querySelector('.object img');
var innerImageId = img.id;