外部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