[英]Why is document.getElementById() returning null when there is an element with that Id?
[英]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事件触发它来完成此操作。
在所有的技术答案已经喷出之后,我将跳过所有那些它本来可能成为的东西并去寻找一些我已经遇到的更明显的答案,一旦我意识到这一点就让我面对面:
正如其他人提到的那样,可能是因为在你引用元素时没有等待元素可用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.