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

Question

我只是从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了？

谢谢你的帮助

Answer 1

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

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

Answer 2

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文件中的任何位置。

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-11-16 00:46:30

解决方案2
-1 2013-11-16 00:48:05

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-11-16 00:46:30

解决方案2 -1 2013-11-16 00:48:05

解决方案1
0 已采纳 2013-11-16 00:46:30

解决方案2
-1 2013-11-16 00:48:05