Question

当我在head代码中声明脚本代码时，我的代码无效，例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <script type="text/javascript" src="jquery-1.11.2.js" async></script>
  <script type="text/javascript" src="skript.js" async></script> 
</head>
<body> 
  <p>
    Click "Try it" to execute the displayDate() function.
  </p>
  <button id="myBtn">
    Try it
  </button>
  <p id="demo"></p>
</body>  
</html>

但是当我在底部body标记中设置脚本标记时，它会起作用，例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>  
</head>
<body> 
  <p>
    Click "Try it" to execute the displayDate() function.
  </p>
  <button id="myBtn">
    Try it
  </button>
  <p id="demo"></p>
  <script type="text/javascript" src="jquery-1.11.2.js" async></script>
  <script type="text/javascript" src="skript.js" async></script> 
</body>  
</html>

skript文件包含以下内容：

document.getElementById("myBtn").onclick = function(){displayDate()};

function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}

有没有人有一个确切的答案为什么会发生这种情况？

Answer 1

应始终在主体的底部和底部加载脚本，以便它们可以访问DOM和元素。

你可以将它包装在你的代码周围，这样就可以在加载eversthing时执行

document.addEventListener("DOMContentLoaded", function() {
  // your code
});

或

document.attachEvent("onreadystatechange", function(){
  if (document.readyState === "complete"){
    document.detachEvent( "onreadystatechange", arguments.callee );
    // your code
  }
});

在这里查看jQuery ready事件的官方源代码：https://github.com/jquery/jquery/blob/master/src/core/ready.js#L81

当页面完全加载时，

调用completed（）方法

https://stackoverflow.com/a/21814964/753676和How can I detect DOM ready and add a class without jQuery?会给你相同的答案

Answer 2

脚本在创建DOM树之前执行。因此，如果在头部添加脚本，则在创建DOM树之前执行函数。如果要在头部添加脚本，请在窗口加载中调用函数。

Answer 3

您必须将脚本标记视为内容包含标记。您在第一个代码中所做的是包含需要在引入之后的数据的内容（脚本）。

更重要的是，你必须记住，DOM（HTML的程序化表示）需要一些时间来形成，所以你需要完成它。根据上面的答案，有几种方法可以等待。

脚本标记的位置正在影响代码执行

3 个答案: