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

Question

假设我们的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方面的论据传递？ 帮助将不胜感激。 谢谢。

Answer 1

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

要解决此问题，您可以将script标记放在要修改的元素之后（或在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()行。

Answer 2

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

将代码包装在加载所有DOM元素后触发的事件中：

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

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

请注意，该函数本身不在事件回调内部，因此在加载JavaScript时会立即注册该函数。 仅实际调用changeText()函数取决于DOM。

Answer 3

问题：
您甚至在创建document.getElementById("tim")之前，使用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>

Answer 4

通过三种方式：

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

这样就可以找到该元素。

Answer 5

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

$(document).ready (function (){ Document.getElementByID('tim').innerHTML = "changed text"; 
});

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

问题描述

5 个解决方案

解决方案1
6 已采纳 2014-09-27 11:17:59

解决方案2
4 2014-09-27 11:16:48

解决方案3
1 2014-09-27 11:18:53

解决方案4
0 2014-09-27 11:24:10

解决方案5
-2 2014-09-27 12:14:25

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

问题描述

5 个解决方案

解决方案1 6 已采纳 2014-09-27 11:17:59

解决方案2 4 2014-09-27 11:16:48

解决方案3 1 2014-09-27 11:18:53

解决方案4 0 2014-09-27 11:24:10

解决方案5 -2 2014-09-27 12:14:25

解决方案1
6 已采纳 2014-09-27 11:17:59

解决方案2
4 2014-09-27 11:16:48

解决方案3
1 2014-09-27 11:18:53

解决方案4
0 2014-09-27 11:24:10

解决方案5
-2 2014-09-27 12:14:25