Javascript 无法通过 id 找到元素？ [复制]答案

【问题标题】：Javascript can't find element by id? [duplicate]Javascript 无法通过 id 找到元素？ [复制]
【发布时间】：2011-05-28 18:17:46
【问题描述】：

<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.... 显然我没有在屏幕上看到任何“找到你”。我做错了什么？

【问题讨论】：

深思：JavaScript 代码块何时运行？ id 为“db_info”的 DIV 何时创建和/或保证存在？

标签： javascript getelementbyid

【解决方案1】：

问题是您试图在元素存在之前访问它。您需要等待页面完全加载。一种可能的方法是使用onload 处理程序：

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

不过，大多数常见的 JavaScript 库都提供了 DOM-ready 事件。这更好，因为window.onload 也等待所有图像。在大多数情况下，您不需要它。

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

【讨论】：

+1 用于 window.onload 和匿名函数 ^^

【解决方案2】：

浏览器如何知道何时运行脚本标签内的代码？所以，要让代码在窗口完全加载后运行，

window.onload = doStuff;

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

另一种选择是将 <script...</script> 保留在结束 </body> 标记之前。

【讨论】：

【解决方案3】：

脚本在构建主体的 DOM 之前执行。将其全部放入一个函数中，然后从 body-element 的onload 调用它。

【讨论】：

【解决方案4】：

在 onload 事件中运行代码，或者在您关闭 body 标记之前。您尝试找到一个在您执行此操作时不存在的元素。

【讨论】：

【解决方案5】：

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

您应该尝试以下方法之一：

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

【讨论】：