前几天我写了一些代码,出于某种原因,我不知道为什么会发生这种情况,但这是我编写的代码的一部分。
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中进行了一些调试,发现"object" 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中不断发生。
请问有人能解释一下为什么会有这两个额外的随机节点吗?
<div><img /></div>
- WhiteHatdiv
应该仍然只有一个节点,因为在浏览器中这样做太荒谬了。 - Ronit JoshifirstElementChild
)-使用它们。MDN 文档关于firstChild
很清楚地解释了这个问题。另外,请更仔细地编辑你的问题。var item = document.getElementByClass('object');
会立即停止解释器,因为没有这样的 API。 - user663031