javascript - 使用 alert() 时变量未定义

Question

I have this script:

<script>

var prop = document.getElementById('div1').firstChild.getAttribute("id");

function aler()
{
    alert(prop);
}
</script>

并在脚本标签之外：

<div id="div1">some content</div>
<button onclick="aler()"></button>

有人可以向我解释为什么当我单击按钮时显示：“未定义”

更正：在 div 我拖动图片：

  <img  id="C" src="C.png"  draggable="true" ondragstart="drag(event)" width="91px" height="91px">

例如。

Answer 1

div1 的第一个子节点是一个文本节点。它没有 id。

编辑

至于您的更正，如果生成的 HTML 看起来像这样，那么第一个孩子仍然是一个文本节点：

<div id="div1">
    <img  id="C" etc.>
</div>

因为文本包括制表符、空格和回车。我不确定拖放如何影响它。

Answer 2

在DOM中，有各种各样的“节点”。您的<div id="div1">some content</div>标记定义了两个节点：一个Element是 a div，以及它的第一个（也是唯一的）子Text节点，一个包含您在div. 该Text节点没有id. div元素有，id但文本节点没有。

Answer 3

document.getElementById('div1').firstChild是文本some content。当你调用getAttribute("id")它时，由于纯文本没有 no id，你会得到undefined.