Question

第一个：

function change(){
    document.getElementById("clr").style.backgroundColor="red";
    document.getElementById("test1").innerHTML="hwllo world";
}

第二个：

document.getElementById("test1").innerHTML="hwllo world";

第一个工作正常。但是第二个在加载文件时不起作用。

Answer 1

Javascript和HTML呈现按照在文件中找到的顺序执行。因此，如果您在呈现HTML元素之前执行一段JS，那么JS代码将无法工作。

这将失败：

<script>
  document.getElementById("test1").innerHTML="hwllo world";
</script>
<div id="test1"></div>

这将按预期工作：

<div id="test1"></div>
<script>
  document.getElementById("test1").innerHTML="hwllo world";
</script>

或者，您可以使用各种onload和dom ready事件来确保在渲染完所有HTML后执行脚本：

<script>
  window.onload = function(){
    document.getElementById("test1").innerHTML="hwllo world";
  }
</script>
<div id="test1"></div>

Answer 2

控制台中出现了什么错误？可能是您正在尝试设置不存在节点的innerHTML？如果你想用div操作，你必须在加载页面后这样做，所以通常把它称为body事件onLoad：

<script>
function init() {
  document.getElementById("test1").innerHTML="hello world";
}
</script>

<body onload="init();">
<div id="test1"></div>
...

Answer 3

正如James Allardice在评论中所说，代码可能在DOM准备好之前执行。然后您的代码可能会失败，因为元素可能不存在。这是一个已知问题，但也有一个已知的解决方案。最常用的解决方案可能是使用jQuery，它有一种简单的方法允许函数只在文档准备好后执行。要使用此方法，首先需要将jQuery包含为脚本引用，然后按如下所示修改代码：

$(document).ready(function() {
    document.getElementById("clr").style.backgroundColor="red";
    document.getElementById("test1").innerHTML="hwllo world";
});

现在，如果您正在使用jQuery，您还可以重写代码以使用jQuery选择器并使其更紧凑：

$(document).ready(function() {
    $("#clr").css("backgroundColor", "red");
    $("#test1").html("hwllo world");
});

这两段代码在功能上都是等价的。

是＆＃34; innerHTML＆＃34;依赖于事件处理程序？

3 个答案: