脚本标签的位置正在影响代码执行[重复]答案

【问题标题】：position of a script tag is influencing the code execution [duplicate]脚本标签的位置正在影响代码执行[重复]
【发布时间】：2015-03-16 21:28:15
【问题描述】：

当我在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();
}

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

【问题讨论】：

因为当元素在头部时，你在它存在之前引用它。
learn.jquery.com/using-jquery-core/document-ready 看看这个以获得进一步的解释。
那么如果我在脚本中引用一个标签，那么脚本标签必须在脚本中引用的标签之后？
原生 JavaScript 也有解决方案，像 jQuery 这样的完整库并不是解决这个“小”和普遍问题的正确答案
@DanielRuf 我并没有建议将其作为答案，但它确实提供了一些关于等待 dom 加载之前您可以对其进行操作的信息。

标签： javascript html tags

【解决方案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 就绪事件的官方源代码：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? 给你同样的答案

【讨论】：

我很好奇这在实践中经常使用吗？这种方法如何也有效： document.getElementById("myBtn").addEventListener( "onclick", displayDate, false ); document.getElementById("myBtn").onclick = function(){displayDate()};函数 displayDate() { document.getElementById("demo").innerHTML = Date(); }
为什么本例第二条语句中没有添加事件onclick？
因为第二个语句只在可以访问 DOM 和元素时才起作用。第一条语句添加事件，当元素可用时stackoverflow.com/questions/6348494/addeventlistener-vs-onclick

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

除此之外，您还必须记住，DOM（HTML 的编程表示）需要一些时间才能形成，因此您需要完成它。根据上面的答案，有几种方法可以等待。

【讨论】：