外部 Javascript 文件如何影响 HTML 文件的 DOM？答案

【问题标题】：How can an external Javascript file affect an HTML file's DOM?外部 Javascript 文件如何影响 HTML 文件的 DOM？
【发布时间】：2014-11-22 07:38:20
【问题描述】：

假设我们的 HTML 文件有以下代码：

<html>
 <head>
  <script src="totti.js"></script>
 </head>
 <body>
  <span id="tim">this'll change on load</span>
 </body>
</html>

而且由于我不知道我该怎么做，所以这是我想要实现的代码（例如 totti.js）：

function changeText(){
 document.getElementById("tim").innerHTML = "changed text";
}
changeText();

我想我们需要先将它的 id 定义为一个变量，还是将它作为 HTML 端的参数传入？帮助将不胜感激。谢谢。

【问题讨论】：

不清楚你的问题是什么。这是关于javascript如何工作的一般问题吗？您基本上已经自己回答了……浏览器加载了一个 HTML 页面和一个 javascript 文件；如果浏览器有 javascript 解释器（几乎所有浏览器都有），它会运行脚本文件中的代码。脚本通常会有一个声明来告诉浏览器何时运行脚本，例如当页面加载时，当 DOM 准备好时，等等。

标签： javascript html dom

【解决方案1】：

您的代码是正确的，但是，如果您将脚本放在 head 标记内，那么脚本将在文档加载之前执行，因此它将不起作用（id 为 tim 的元素不会仍然存在）。

要解决此问题，您可以将脚本标签放在要修改的元素之后（或 body 标签的底部），如下所示：

<html>
 <head>
 </head>
 <body>
  <span id="tim">this'll change on load</span>
  <script src="totti.js"></script>
 </body>
</html>

或者您可以让函数在文档加载后运行，如下所示：

<html>
 <head>
  <script src="totti.js"></script>
 </head>
 <body onload="changeText()">
  <span id="tim">this'll change on load</span>
 </body>
</html>

在这种情况下，请从 totti.js 中删除 changeText() 行。

【讨论】：

不建议使用inline onload handler

【解决方案2】：

你快到了，这是正确的方法。但是，您的 Javascript 在呈现“tim”元素之前已加载并执行，因此无法找到它。

将您的代码包装在一个事件中，一旦加载了所有 DOM 元素就会触发：

document.addEventListener('DOMContentLoaded', function(){
    changeText();
});

function changeText(){
    document.getElementById("tim").innerHTML = "changed text";
}

请注意，函数本身不在事件回调中，因此它在 javascript 加载时立即注册。只有实际调用 changeText() 函数取决于 DOM。

【讨论】：

是的！ DOMContentLoaded 绝对是实现兼容性的方法。虽然Document.readyState 提供了更多的灵活性。我怀疑随着 PWA 的兴起，这将变得更加重要。 ;)

【解决方案3】：

问题：
在创建元素之前，您正在使用 document.getElementById("tim") 访问 dom 元素。

有两种方法可以解决您的问题：

1.将script-tag 移动到body-tag 的末尾：

<html>
 <head>
 </head>
 <body>
  <span id="tim">this'll change on load</span>
  <script src="totti.js"></script>
 </body>
</html>

2。使用onload：

<html>
 <head>
  <script src="totti.js"></script>
 </head>
 <body onload="changeText()">
  <span id="tim">this'll change on load</span>
 </body>
</html>

【讨论】：

【解决方案4】：

三种方式：

在您的内容之后导入 js 文件。
使用 window.onload = function(){ ... }
document.addEventListener('DOMContentLoaded', function(){ ... }

所以它可以找到元素。

【讨论】：

【解决方案5】：

如果您需要在加载所有元素后执行更改，为什么不使用简单的 JQuery 函数。

$(document).ready(function () { 
  $('#tim').html("changed text"); 
});

【讨论】：

请不要假设每个人都使用jQuery