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

Question

我前几天写了一些代码,由于某些原因,我不知道为什么会这样,但这是我编写的代码的一部分.

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

我经常看过这段代码.此代码的问题是innerImageId的值未定义.item的第一个孩子是图像.我需要获取图像的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;

Answer 2

您还可以使用firstElementChildin 来firstChild跳过那些空文本节点。

编辑：谢谢 BAM5 只是在我打字时没有注意。