当我知道 ID 存在时，为什么 document.getElementById() 返回 null 值？

Question

我正在工作中为 CMS 模板编写一些自定义 Javascript。我希望能够使页面上的某个

元素仅接收该页面的“当前”类。因此，在全局页面标题中，我有这样的内容：

<script type="text/javascript">
    function makeCurrent(id) {
      var current = document.getElementById(id);
      current.setAttribute("class", "current"); // for most browsers
      current.setAttribute("className", "current"); // for ie
    }
</script>

然后在每个单独的页面 中，我有这样的内容：

<script type="text/javascript">makeCurrent("undergraduate")</script>

在页面上，我有一个导航

< /code>，类似于：

<li id="undergraduate"><a href="...">Undergraduate Program</a></li>
<li id="graduate"><a href="...">Graduate Program</a></li>

etc.

当我加载页面时，未应用该类。当我查看 Firebug 控制台时，它给出了错误消息：

current is null
(x)  current.setAttribute("class", "current"); 

我仍在掌握编写可靠的原始 javascript 的窍门（在 jQuery 之后向后学习，你知道它是如何进行的），但我想只用 JS 编写它。我犯了什么愚蠢的新手错误？

谢谢大家！

Answer 1

如果在 DOM 树完成加载之前执行 JavaScript，它将返回 null。因此，一个想法是在关闭 body 标记之前在最后一直调用该函数。

这就是为什么大多数 JavaScript 库都支持 dom-ready 事件，现代浏览器也有这个（domcontentloaded），但是对于广泛的浏览器支持，自己做这件事有点棘手（好吧，没那么困难，有 3 或 4 种不同的方式我认为。）

Answer 2

当评估该脚本时，元素尚不存在。将其放入主体的 onload 处理程序或其他内容中，以便在 DOM 就位后执行。

如何在不触及任何标记的情况下执行此操作的示例：

function callWhenLoaded(func) {
  if (window.addEventListener) {
    window.addEventListener("load", func, false);
  } else if (window.attachEvent) {
    window.attachEvent("onload", func);
  }
}

callWhenLoaded(function() { makeCurrent("undergraduate"); });

Answer 3

如果您在脑海中运行 makeCurrent，则 DOM 尚未完全加载。您应该将该脚本放在

标记之后。

您的代码可以优化：您可以直接使用 current.className = 'current'; 设置 class 属性。

Answer 4

原因是您的脚本在页面加载完成之前运行，因此在填充 DOM 之前运行。

您需要确保仅在页面加载完成后调用该函数。通过使用 document.onload() 或 body 标记上的 onload 事件触发它来执行此操作。

Answer 5

在所有的技术答案都已经吐出来之后，我将跳过所有那些很可能的答案，而去寻找一些我遇到过的更明显的答案，一旦我意识到这些答案，这些答案就会让我捂脸：

• 身份中的拼写错误
• 身份不是您想象的那样，因为它是由您正在使用的 Web 框架生成或部分生成的，即在 ASP.NET 中，您可以将客户端 id 设置为“MyControl”，结果却发现通过 例如，在客户端中呈现它时，它是“Page_1$Control_0$MyControl$1”
• 您在一个或多个不正确的位置在它前面添加了#，尽管您在示例中没有使用 jQuery，但如果该对象id 是 MyControl，在 jQuery 和 CSS 中，您使用 #MyControl 引用它，但在对象的实际 id 中，您没有使用 #。在 document.getElementById() 中，您不会像在 jQuery 和 CSS 中那样使用 #，但您可能无意中使用了它。
• 您已在控件中设置 name 元素而不是 id。

正如其他人所提到的，这可能是因为在引用该元素时没有等待该元素可用。