外部 Javascript 文件如何影响 HTML 文件的 DOM？
Posted
技术标签:
【中文标题】外部 Javascript 文件如何影响 HTML 文件的 DOM？【英文标题】：How can an external Javascript file affect an HTML file's 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 准备好时，等等。 【参考方案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以上是关于外部 Javascript 文件如何影响 HTML 文件的 DOM？的主要内容，如果未能解决你的问题，请参考以下文章
html如何连接外部样式表,关于html：链接到外部样式表和javascript文件
如何使用从 javascript/html 中的外部 php 文件中提取的 JSON 数据？
如何将变量从外部 JavaScript 传递到 HTML 表单