外部Javascript文件如何影响HTML文件的DOM？
[英]How can an external Javascript file affect an HTML file's DOM?
问题描述
Say we have this code for our HTML file: 
假设我们的HTML文件具有以下代码：
<html>
<head>
<script src="totti.js"></script>
</head>
<body>
<span id="tim">this'll change on load</span>
</body>
</html>
And since I don't know how exactly I can do this, this is the code I want to implement (eg. totti.js): 而且由于我不知道该怎么做，这是我要实现的代码（例如totti.js）：
function changeText(){
document.getElementById("tim").innerHTML = "changed text";
}
changeText();
I suppose we need to define its id into a variable first, or pass in it as an arguement in the HTML side? 我想我们需要先将其id定义为变量，或者将其作为HTML方面的论据传递？ Help would be appreciated. 帮助将不胜感激。 Thanks. 谢谢。
5 个解决方案
解决方案1
6 已采纳 2014-09-27 11:17:59
Your code is correct, however, if you put the script inside the head tag, then the script will be executed before the document is loaded and thus it will not work (the element with the id tim does not yet exist at that point). 您的代码是正确的，但是，如果将脚本放在head标记内，则该脚本将在加载文档之前执行，因此它将不起作用（此时id tim的元素尚不存在）。
To fix this, you can either put the script tag after the element you want to modify (or at the bottom of the body tag) like this: 要解决此问题，您可以将script标记放在要修改的元素之后（或在body标记的底部），如下所示：
<html>
<head>
</head>
<body>
<span id="tim">this'll change on load</span>
<script src="totti.js"></script>
</body>
</html>
Or you can make the function run once the document loads, like this: 或者，您可以使函数在文档加载后立即运行，如下所示：
<html>
<head>
<script src="totti.js"></script>
</head>
<body onload="changeText()">
<span id="tim">this'll change on load</span>
</body>
</html>
In this case, remove the changeText() line from totti.js . 在这种情况下，请从totti.js中删除changeText()行。
解决方案2
4 2014-09-27 11:16:48
You're almost there, this is the correct approach. 您快到了，这是正确的方法。 However, your Javascript is loaded and executed before the "tim" element is rendered, so it can't find it. 但是，您的Javascript是在呈现“ tim”元素之前加载并执行的，因此找不到它。
Wrap your code in an event that is fired once all DOM elements are loaded: 将代码包装在加载所有DOM元素后触发的事件中：
document.addEventListener('DOMContentLoaded', function(){
changeText();
});
function changeText(){
document.getElementById("tim").innerHTML = "changed text";
}
Note that the function itself is not inside the event callback, so it's registered right when the javascript loads. 请注意，该函数本身不在事件回调内部，因此在加载JavaScript时会立即注册该函数。 Only actually calling the changeText() function depends on the DOM. 仅实际调用changeText()函数取决于DOM。
解决方案3
1 2014-09-27 11:18:53
The problem: 问题：
You're accessing a dom element with document.getElementById("tim") before the element is even created. 您甚至在创建document.getElementById("tim")之前，使用document.getElementById("tim")访问dom元素。
There are two possible ways of solving your problem: 有两种方法可以解决您的问题：
1. Moving the script -tag to the end of the body -tag: 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. Using onload : 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
0 2014-09-27 11:24:10
In three ways: 通过三种方式：
- Import js file after your content. 在您的内容之后导入js文件。
- Use window.onload = function(){ ... } 使用window.onload = function（）{...}
- document.addEventListener('DOMContentLoaded', function(){ ... } document.addEventListener（'DOMContentLoaded'，function（）{...}
So it can find the element. 这样就可以找到该元素。
解决方案5
-2 2014-09-27 12:14:25
If you need to execute the change after all elements are loaded, why not use a simple JQuery function. 如果需要在所有元素加载后执行更改，为什么不使用简单的JQuery函数。
$(document).ready (function (){ Document.getElementByID('tim').innerHTML = "changed text";
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.