Question

以下是在加载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>

Answer 1

在页面中呈现HTML后运行Onload。因此，在您的第一个示例中，该元素尚不可用于JavaScript处理。

大多数人使用“文档就绪”，这意味着文档已经呈现。

jQuery示例：

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

Answer 2

您的HTML可能如下所示：

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

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

在整个DOM加载和解析后，

window.onload仅执行 ...这就是运行该函数然后工作的原因。（如果它被附加到在加载DOM之后运行的任何其他事件处理程序，或者即使script和input标记的顺序被颠倒，它也会起作用。）

Answer 3

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

第二个示例将在文档加载并且您的元素可用后执行。

Answer 4

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

Answer 5

第一个脚本可能会也可能不会起作用，具体取决于它在HTML中的位置。如果脚本在字段本身之前（<input id="name_field" />），则脚本将在浏览器确认字段存在之前运行，因此它将不执行任何操作（实际上，它应该抛出一个错误，指出您正在尝试访问未定义对象的value属性。）

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

为什么脚本不能这样工作？

5 个答案: