为什么脚本不这样工作呢?

why doesn't the script work this way?

本文关键字：工作 脚本 为什么      更新时间：2023-09-26

下面的语句应该在HTML页面加载时运行。

document.getElementById("name_field").value = "JavaScript";

但是这没有任何作用。如果我尝试用不同的方式做同样的事情:

window.onload = init;
function init() {
document.getElementById("name_field").value = "JavaScript";
}

第一个脚本有什么问题?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="valtest.js">
</script>
</head>
<body>
<form>
<label>Enter your name&nbsp;&nbsp;<input type="text" id="name_field" /></label> <br/>
<input type="submit" value="submit" />
</form>
</body>
</html>

Onload在页面中呈现HTML之后运行。因此，在第一个示例中，元素还不能用于JavaScript处理。

大多数使用"document ready"，这意味着文档已经呈现。

jQuery的例子:

$(document).ready(function() {
   init()
});

你的HTML可能看起来像这样:

<script>
document.getElementById("name_field").value = "JavaScript";
</script>
<!--
More
code
here
-->
<input id="name_field" value="Static">

如果是这种情况，当JavaScript运行时，DOM中还没有ID为"name_field"的元素。

window.onload只在加载并解析完整个DOM后才执行…这就是为什么运行这个函数是有效的。(如果它被附加到DOM加载后运行的任何其他事件处理程序，或者即使script和input标记的顺序颠倒，它也会工作。)

id为'name_field'的元素在DOM中还不可用，因为整个文档是按顺序加载的。

第二个示例将在文档加载完毕并且元素可用时执行。

第一个示例中的javascript在任何DOM呈现之前立即执行。在尝试对DOM进行操作之前，必须等待DOM呈现，这是在第二个示例中所做的。

第一个脚本可能工作，也可能不工作，这取决于它在HTML中的位置。如果脚本在字段本身(<input id="name_field" />)之前，脚本将在浏览器确认字段的存在之前运行，因此它不会做任何事情(实际上，它应该抛出一个错误，说明您正在尝试访问未定义对象的value属性)。

第二个版本在页面加载完成后运行。到那时，浏览器已经知道了您的字段，脚本才能正常工作。

相关文章：