Question

我刚开始使用JavaScript，我有一个简单的代码，可以将值发送到ID为p的元素。我目前正在我的文档的<script>元素的<head>中声明此功能。

function writeP(resultSet) {
        document.getElementById('p').innerHTML = resultSet.length;
    };

    writeP(results);

当我在<head>元素中列出并运行网页时，firebug会向我抛出此错误：TypeError: document.getElementById(...) is null。

但是，如果我将代码块移动到元素下面的<script>标记然后重新加载网页，则没有任何问题，并且脚本可以正常工作。是否有任何理由，以及我可以使这项工作的方式，所以我不必在元素下定义我的函数或在我的body元素上包含onload？

感谢您的帮助

Answer 1

原因是，当您启动js代码时，DOM尚未准备好，而JS无法在DOM中找到此类元素。

您可以使用window.onload（docs on W3schools）触发器在所有元素准备就绪后触发您的函数。它与在body元素上具有onload属性相同，但更清晰，因为您可以在js代码中定义它，而不是在html中定义它。

Answer 2

JS同步评估。因此，在声明函数时它很重要。在这种情况下，您在元素实际存在之前声明它。

其次，当您使用该语法声明一个函数时，它会立即得到eval'd。如果您声明了，而不是

var    writeP=function(resultSet) {
    document.getElementById('p').innerHTML = resultSet.length;
};

你可以只将通话保存到Doc的末尾，并将声明保留在开头。

但是，我建议你阅读一些jQuery教程，以学习更简单的方法来处理dom操作。没有人再为该任务运行原始JS了。

jQuery包含一个对文档就绪事件的有用调用，这将为您节省很多麻烦，并且-IMHO-比onload事件更有效。在这种情况下，您将在代码中的某处包含jQuery库

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然后添加

<script>
jQuery(document).ready(function() {
    var writeP=function(resultSet) {
        jQuery('#p').html(resultSet.length);
    };
    writeP(resultSet);
});
</script>

几乎在您的文档中的任何位置或外部js文件，因为它适合您。

稍后通过JavaScript访问文档中的HTML元素

2 个答案: