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

Access HTML element later in document through JavaScript

本文关键字：访问 HTML 元素 文档 JavaScript      更新时间：2023-09-26

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

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

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

但是，如果我将代码块移动到元素下方的 <script> 标记中，然后重新加载网页，则没有问题，脚本可以正常工作。这有什么原因吗，以及我可以完成这项工作的方法，这样我就不必在元素下定义我的函数或在 body 元素上包含onload？

感谢您的帮助

原因是当你

启动js代码时，DOM还没有准备好，JS在DOM中找不到这样的元素。

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

JS 同步计算。因此，当您声明函数时确实很重要。在本例中，您将在元素实际存在之前声明它。

其次，当你用这种语法声明一个函数时，它确实会立即被评估。如果您声明，则改为

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

您可以只将调用保存到文档末尾，并将声明保留在开头。

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

jQuery包括一个有用的文档就绪调用事件，这将为您省去很多麻烦，并且恕我直言，比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 文件中的任何位置，因为它适合您。

相关文章：