Question

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

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

我经常使用这段代码。此代码的问题是innerImageId的值未定义。 item的第一个孩子是图像。我需要获取图像的ID，但无论我多少次查看代码，它都无法正常工作。这是代码的HTML文件。

    <div class="object inventory-box">



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



    </div>

这看起来不正确吗？好吧，我在Google Chrome中进行了一些调试，结果发现div中有3个节点＆＃34; object＆＃34;。第一个节点和最后一个节点的id未定义，但第二个节点是＆＃34; sample-image＆＃34;。然后我尝试了＃34; firstElementChild＆＃34;而不是＆＃34; firstChild＆＃34;，这很有效。

然后只是为了测试它，我做了类似的事情 -

"SEP"

（或多行不必要的空格）

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

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

Answer 1

当代码中有空格或新行时，浏览器会插入文本节点。你的目标就是其中之一。

尝试

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

Answer 2

您也可以使用firstElementChild代替firstChild，这将跳过这些空文本节点。

编辑：Blah感谢BAM5，因为我打字时没注意。

Answer 3

没有getElementByClass方法，这就是您失败的原因。打开控制台，你会看到JS错误。我猜你的想法是getElementsByClassName。注意它是复数形式，它返回一个类似数组。
即使您完成了第一个问题，您仍可能因标记问题而失败。 firstChild确实会在子项中返回第一个，包括文本节点。你最好的选择是firstElementChild。或者您必须这样写以避免文本节点子项：
```
<div><img></div>
```

所以，这应该给你想要的东西：

var items = document.getElementsByClassName('object');
var innerImageId = items[0].firstElementChild.id;

另一方面，其他答案指出querySelector确实可以胜任这项工作。它有一个兄弟querySelectorAll。您可以在MDN中搜索它们的用法以及它们之间的细微差别。

Answer 4

使用firstElementChild代替firstChild。作为l。 Catallo说，你可能会得到一个文本节点而不是一个元素。

看起来Atheist打败了我，但在他的回答中他错误地使用了firstChildElement。会评论，但不足以代表......

Answer 5

我在学习DOM探索时遇到了类似的问题，我观察到，当下一行有空格或下一个标记时，节点列表通常会显示一个文本节点。例如：如果我按如下所示编写HTML代码，并尝试获取元素主体的所有子节点。

HTML代码：

<body>
    <h2> Lets Study DOM!! </h2>
    <input type = 'text' id = 'topic'> </input></br>
    <button onClick = addToList()> Click Me to Add </button>

使用Javascript：

console.log(document.querySelector('body').childNodes);

上面的代码给了我以下输出：

[text, h2, text, input#topic, text, br, text, button, text, ul#unordered, text, script]

另一方面，如果我修改了我的代码，如下所示，然后尝试打印节点列表，我得到了不同的输出，如下所示：

HTML代码：

<body><h2> Lets Study DOM!! </h2>
        <input type = 'text' id = 'topic'> </input></br>
        <button onClick = addToList()> Click Me to Add </button>

使用Javascript：

console.log(document.querySelector('body').childNodes);

上面的代码给了我以下输出：

[h2, text, input#topic, text, br, text, button, text, ul#unordered, text, script]

很明显，浏览器将body标记后面的空格视为文本节点。

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

5 个答案: