JavaScript getElementByID（）不起作用[重复]答案

【问题标题】：JavaScript getElementByID() not working [duplicate]JavaScript getElementByID（）不起作用[重复]
【发布时间】：2010-12-22 05:50:25
【问题描述】：

为什么refButton 在下面的 JavaScript 代码中会得到 null？

<html>
<head>
    <title></title>
    <script type="text/javascript">
        var refButton = document.getElementById("btnButton");

        refButton.onclick = function() {
            alert('I am clicked!');
        };
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <input id="btnButton" type="button" value="Click me"/>
    </div>
    </form>
</body>
</html>

【问题讨论】：

标签： javascript getelementbyid

【解决方案1】：

在您调用函数时，页面的其余部分尚未呈现，因此该元素此时不存在。尝试在window.onload 上调用您的函数。像这样的：

<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
           var refButton = document.getElementById("btnButton");

            refButton.onclick = function() {
                alert('I am clicked!');
            }
        };
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <input id="btnButton" type="button" value="Click me"/>
    </div>
    </form>
</body>
</html>

【讨论】：

或者考虑使用 Prototype、JQuery 或者其他一些包来处理 DOM 就绪事件。
我认为他不需要为 DOM 就绪事件导入整个库。 ;)
@Paul - 好点。 @JMSA DOM 就绪事件实际上在所有图像下载之前和所有脚本和页面下载之后触发。因此，DOM 就绪事件在 window.onload 事件之前触发。 :)

【解决方案2】：

您需要将 JavaScript 放在 body 标记的末尾。

它没有找到它，因为它还没有在 DOM 中！

您也可以像这样将其包装在 onload 事件处理程序中：

window.onload = function() {
var refButton = document.getElementById( 'btnButton' );
refButton.onclick = function() {
   alert( 'I am clicked!' );
}
}

【讨论】：

这是标准做法还是仅在这种情况下？
标准做法是从页面加载时开始执行。
标准做法是仅在构建 DOM 树后运行脚本。
不，只有在页面完全加载时树才准备就绪。由于<script> 标签是文档的一部分，因此您的建议也不够用。我要么看看一个 JavaScript 包，要么如果这对你的实现来说太过分了，看看这个：javascriptkit.com/dhtmltutors/domready.shtml
@JMSA - 不一定。这完全取决于您需要它做什么，以及页面在整个渲染过程中的进度。附加到 window.onload 事件将确保页面中包含的所有文件（CSS、JS、图像）都已下载。如果您知道您只需要在您的脚本标签上方呈现的 HTML，当然可以，但最好附加到事件并了解这些事件的含义。

【解决方案3】：

因为脚本执行时浏览器还没有解析<body>，所以不知道有指定id的元素。

试试这个：

<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = (function () {
            var refButton = document.getElementById("btnButton");

            refButton.onclick = function() {
                alert('Dhoor shala!');
            };
        });
    </script>
    </head>
<body>
    <form id="form1">
    <div>
        <input id="btnButton" type="button" value="Click me"/>
    </div>
</form>
</body>
</html>

请注意，您也可以使用addEventListener 而不是window.onload = ... 以使该函数仅在整个文档被解析后才执行。

【讨论】：

window.onload 在整个文档被解析并下载所有文件之前不会触发