JS 導入 HTML 文件

Question

我正在測試用於前端目的的 JS 腳本中的切換類。

我擔心 HTML 文件中的<script src="scripts.js"></script>導入方法。

當它在我的腳本的<head>部分時，它不起作用。 所以，我導入了<body>和Voi lá！ ，它就像魔術一樣工作。

這意味着，我的JS腳本必須是可用<body>的DOM目的是什么？

向社區致以最誠摯的問候！

Answer 1

恩，那就對了。 如果您要導入的腳本需要訪問 DOM 元素，則需要在 DOM 元素准備好后才導入。

但是，如果需要，您可以在HEAD導入腳本，但您要導入的腳本需要具有以下內容來偵聽DOMContentLoaded事件：

Javascript：

document.addEventListener("DOMContentLoaded", function(event) {
    // your code to run - the DOM is ready!
});

jQuery：

$(document).ready(function() {
    // your code to run - the DOM is ready!
});

或者您可以像您發現的那樣簡單地在BODY底部導入腳本，DOM 將在請求腳本時准備就緒。

DOM 准備就緒並不一定意味着任何圖像都已完全加載。 如果你想等到所有的圖像、腳本和 DOM 都准備好了，你需要監聽窗口的onLoad事件被觸發，這可以通過執行以下操作來實現：

Javascript：

window.onload = function(e) {
    // do something when everything is ready
}

jQuery：

$(window).on('load', function(e) {
    // do something when everything is ready
});

Answer 2

這取決於腳本的作用。 如果腳本立即尋找 DOM 元素，它可能無法在頭部工作。

當頁面加載時，瀏覽器從上到下讀取。 如果腳本位於頭部，則加載並執行腳本文件。 但是 html 還沒有加載。 因此，如果腳本正在尋找 html，則該腳本似乎不起作用。