繁体   English   中英

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

[英]Why is document.getElementById() returning a null value when I know the ID exists?

我正在为工作中的CMS模板开发一些自定义Javascript。 我希望能够在页面上创建某个<li>元素,只接收该页面的“当前”类。 所以在全局页面头我有这样的事情:

<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>

然后在每个单独的页面<head> ,我有这样的事情:

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

在页面上我有一个nav <ul> ,类似于:

<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编写它。 我正在做什么愚蠢的新手错误?

感谢大家!

如果在DOM树加载完成之前执行javascript,它将返回null。 所以一个想法是在关闭body标签之前最后调用函数。

这就是为什么大多数JavaScript库都支持dom-ready事件的原因,现代浏览器也支持这种情况(domcontentloaded)但是对于广泛的浏览器支持来说,为自己做这件事有点棘手(好吧,不是那么困难,3或4种不同的方式)我认为。)

在评估该脚本时,该元素尚不存在 把它放在body的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"); });

如果在makeCurrent运行makeCurrent ,则DOM未完全加载。 之后,你可以把那个剧本<li>标记。

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

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

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

在所有的技术答案已经喷出之后,我将跳过所有那些它本来可能成为的东西并去寻找一些我已经遇到的更明显的答案,一旦我意识到这一点就让我面对面:

  • 错字的身份
  • 身份不是您认为的,因为它是由您正在使用的Web框架生成或部分生成的,即在ASP.NET中,您可以将客户端ID设置为“MyControl”,但只有在它被渲染时才能找到它在客户端它是“Page_1 $ Control_0 $ MyControl $ 1”
  • 例如,你已经在一个或多个不正确的地方用#前缀了它,虽然如果对象id是MyControl你没有在你的例子中使用jQuery,在jQuery和CSS中你使用#MyControl引用它,但是对象的实际id,你没有使用#。 在的document.getElementById()你喜欢,你会在jQuery和CSS使用#,但你可能无意中使用它。
  • 您已在控件中设置name元素而不是id。

正如其他人提到的那样,可能是因为在你引用元素时没有等待元素可用。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM