JavaScript无法通过ID找到元素？

Question

JavaScript无法通过ID找到元素？

32

<html>
<head>
    <title>Test javascript</title>

    <script type="text/javascript">
        var e = document.getElementById("db_info");
        e.innerHTML='Found you';
    </script>
</head>
<body>
    <div id="content">
        <div id="tables">

        </div>        
        <div id="db_info">
        </div>
    </div>
</body>
</html>

如果我使用alert(e);，它会显示null......显然屏幕上没有出现任何"找到你"的字样。我做错了什么？

- Bluemagica

2

值得思考的问题：JavaScript 代码块何时运行？DIV 元素的 ID 为“db_info”的元素何时被创建和/或保证存在？ - user166390

5个回答

3

浏览器如何知道何时运行脚本标签内的代码？因此，为了使代码在窗口完全加载后运行，

window.onload = doStuff;

function doStuff() {
    var e = document.getElementById("db_info");
    e.innerHTML='Found you';
}

另一种选择是将您的<script...</script>放在闭合的</body>标签之前。

- dheerosaur

2

元素存在之前调用了脚本。

您可以尝试以下方法之一：

将代码包装到一个函数中，并使用 body onload 事件来调用它。
将脚本放置在文档的末尾
在 script 标签声明中使用 defer 属性

- Davis Peixoto

1

脚本在 body 的 DOM 构建之前执行。将所有内容放入一个函数中，并从 body 元素的 onload 中调用它。

- sjngm

1

将代码运行在 onload 事件中，或者就在关闭 body 标签之前运行。你试图在此时找到一个不存在的元素。

- Ionuț Staicu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jwueller · Accepted Answer

问题在于你正在尝试访问尚不存在的元素。你需要等待页面完全加载。一个可能的方法是使用 onload 处理程序：

window.onload = function () {
    var e = document.getElementById("db_info");
    e.innerHTML='Found you';
};

大多数常见的JavaScript库提供了一个DOM就绪事件。这更好，因为window.onload也会等待所有图像加载完毕。在大多数情况下，你并不需要它。

另一种方法是将脚本标签放置在你的闭合</body>标签之前，因为在执行时它前面的所有内容都已加载。