Question

我正在测试JS脚本中的切换类，以达到最终目的。

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

当它在我脚本的<head>部分中时，它不起作用。因此，我导入了<body>和 Voilá！，它就像魔术一样工作。

这是否意味着我的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，则该脚本似乎无法正常工作。