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

Question

I am just starting out with JavaScript and I have a simple code that sends a value to an element with id p . 我只是从JavaScript开始，我有一个简单的代码将值发送到ID为p的元素。 I am currently declaring this function in a <script> in the <head> element of my document. 我目前在文档的<head>元素中的<script>中声明此功能。

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

    writeP(results);

When I have this listed within the <head> element and run the webpage, firebug throws this error at me: TypeError: document.getElementById(...) is null . 当我在<head>元素中列出此内容并运行网页时，firebug向我抛出此错误： TypeError: document.getElementById(...) is null 。

However, if I move the code block into a <script> tag beneath the element and then reload the webpage, no problems and the script works as it should. 但是，如果我将代码块移到元素下方的<script>标记中，然后重新加载网页，则不会出现问题，脚本将按预期运行。 Is there any reason for this, and a way I could make this work so I wouldn't have to define my functions beneath the element or include a onload on my body element? 是否有任何原因，以及我可以进行此工作的方式，这样我就不必在元素下定义函数或在body元素上包含onload了？

Thanks for your help 谢谢你的帮助

Answer 1

Reason is that by the time your launch js code, DOM is not yet prepared, and JS can't find such element in DOM. 原因是，当您启动js代码时，尚未准备好DOM，而JS在DOM中找不到此类元素。

You can use window.onload ( docs on W3schools ) trigger to fire your functions after all elements are ready. 您可以使用window.onload （ W3schools上的文档）触发器在所有元素准备就绪后触发功能。 It's same as having onload property on body element, but is more clear, as you can define it in your js code, not in html. 它与在body元素上具有onload属性相同，但是更加清楚，因为您可以在js代码中定义它，而不是在html中定义它。

Answer 2

JS evaluates syncronically. JS进行同步评估。 Therefore, it does matter WHEN you declare the function. 因此，当您声明函数时，这确实很重要。 In this case, you're declaring it before the element actually exists. 在这种情况下，您要在元素实际存在之前声明它。

Second, when you declare a function with that syntax, it does get eval'd inmediately. 其次，当您使用该语法声明一个函数时，它确实会立即被评估。 If you declared, instead 如果您声明，则改为

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

you could save just the call to the end of the Doc, and leave the declaration at the beggining. 您可以将调用保存到文档末尾，然后将声明保留在开始时。

However, I would advise you to read a few jQuery tutorials to learn easier ways to deal with dom manipulation. 但是，我建议您阅读一些jQuery教程，以学习处理dom操纵的更简单方法。 Nobody runs raw JS for that task anymore. 没有人再为该任务运行原始JS。

jQuery includes an useful call to document ready event, which will save you a lot of headaches and is -IMHO- more efficient than the onload event. jQuery包括一个有用的文档准备事件调用，它将为您省去很多麻烦，并且它比onload事件效率更高。 In this case, you would include the jQuery library somewhere in your code 在这种情况下，您将在代码中的某个位置包含jQuery库

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

and then add 然后添加

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

just about anywhere in your document or an external js file, as it suits you. 适合您的文档或外部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