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

說我們有此代碼爲我們的HTML文件：外部Javascript文件如何影響HTML文件的DOM？

<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方面的一個參數傳入？幫助將不勝感激。謝謝。

來源

2014-09-27 kittenparry

目前尚不清楚你的問題是什麼。這是一個關於javascript如何工作的普遍問題？你本質上已經回答了它...瀏覽器加載了一個HTML頁面和一個JavaScript文件;如果瀏覽器有JavaScript解釋器（幾乎所有的瀏覽器都這樣做），它將在腳本文件中運行代碼。該腳本通常會有一個聲明告訴瀏覽器何時運行該腳本，例如當頁面被加載，當DOM準備就緒時，等等。 – 2014-09-27 11:21:30

但是，如果將腳本放入head標記中，則腳本將在文檔加載之前執行，因此它不起作用（編號爲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>

在這種情況下，從除去changeText()線totti.js。

來源

2014-09-27 11:17:59 fstanis

你快到了，這是正確的做法。但是，在呈現「tim」元素之前，您的Javascript已加載並執行，因此無法找到它。

總結你的代碼中被解僱一旦所有的DOM元素加載事件：

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

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

注意函數本身不是事件回調裏面，所以它的註冊權當JavaScript的負荷。實際上只調用changeText()函數取決於DOM。

來源

2014-09-27 11:16:48

是啊！ [DOMContentLoaded]（https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded）絕對是兼容性的一種方式。儘管[Document.readyState]（https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState）給出了更多的靈活性。我懷疑隨着PWA的興起，這將變得更加重要。 ;） – Chiramisu 2018-02-16 23:47:58

問題：
在元素創建之前，您正在訪問一個帶有document.getElementById("tim")的dom元素。

有解決你的問題的兩種可能的方式：

1.移動script -tag到body - 標籤的末尾：

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

來源

2014-09-27 11:18:53 friedi

有三種方式：

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

所以它可以找到元素。

來源

2014-09-27 11:24:10 Manji

-2

如果您需要在所有元素加載後執行更改，爲什麼不使用簡單的JQuery函數。

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

來源

2014-09-27 12:14:25 MCMXCII

請不要認爲每個人都使用jQuery – 2014-09-28 21:46:48

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

回答

相關問題