脚本标签的位置影响代码执行

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>

脚本文件包含以下内容：

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

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

有没有人能准确回答为什么会这样？

Answer 1

脚本应始终在最后加载并在正文底部加载，以便它们可以访问 DOM 和元素。

您可以将其包裹在您的代码中，以便在加载所有内容时执行它

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

或

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

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

当页面完全加载时，它调用 completed() 方法

and How can I detect DOM ready and add a class without jQuery?给你同样的答案

Answer 2

脚本在 DOM 树创建之前执行。因此，如果您在头部添加脚本，函数将在 DOM 树创建之前执行。如果要在头部添加脚本，请调用window load.

中的函数

Answer 3

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

不仅如此，您还必须牢记 DOM（您的 HTML 的程序化表示）需要一些时间才能形成，因此您需要完成它。根据上面的答案，有几种等待方法。

脚本标签的位置影响代码执行

position of a script tag is influencing the code execution

html

javascript

tags