javascript - Javascript通过id获取元素

Question

我的 HTML 包含以下代码：

<div id="msg"></div>

在它的身体里。

在头部，我有：

var msg = document.getElementByID("msg");

但是当我在一个函数中调用时：

msg.innerHTML = "test";

它返回一个错误，声明msg为空。我应该怎么办？

Answer 1

首先，你必须考虑到 JavaScript 是区分大小写的语言，所以你应该使用getElementById（注意最后一个字母的大小写）。接下来，如果您通过 id 获取元素，则应将 ID 作为参数（而不是标签名称）传递：

var msg = document.getElementById("msg");

您可以在MDN中阅读有关此方法的更多信息：

• https://developer.mozilla.org/en-US/docs/DOM/document.getElementById

此外，一个重要的注意事项是在标记完全加载时使用此代码，即当您的msg元素对 JavaScript “可见”时。为了实现这一点，一种选择是将您的<script>标签（带有相应的 JavaScript 代码）放在 HTML 的末尾，就在</body>.

Answer 2

在头部，我有：

var msg = document.getElementByID("div");

三个问题：

1. 如果该代码在 中head，但元素在 中定义body，则在运行代码时该元素还不存在。

2. 元素id是"msg"，不是div。div是它的标签名称，并且不是唯一的。

3. 是getElementById，不是getElementByID。

如果您将包含代码的脚本元素移动到</body>页面上的结束标记之前，并使用document.getElementById("msg")，您应该没问题。

Answer 3

因为您在页面加载元素之前调用它。您需要等待文档准备好或window.onload才能引用该元素。