更新时间:2023-08-23 08:20:46
将脚本放入外部文件中,然后从<head>
加载该外部脚本时,它将在DOM准备就绪之前加载.这意味着,如果您的脚本像使用document.querySelectorAll()
一样尝试引用页面中的元素,那么这些元素将不存在.
When you put the script in an external file and then load that external script from the <head>
, it loads BEFORE the DOM is ready. That means that if your script tries to reference elements in the page like you are with document.querySelectorAll()
, those elements will not exist yet.
最简单的解决方法是简单地移动脚本标签:
The simpleset way to fix that is to simply move the script tag:
<script type="text/javascript" src="menu.js"></script>
在</body>
之前.然后,在脚本运行如下之前,将解析页面中的所有元素并在DOM中进行解析:
to right before </body>
. Then, all the elements of the page will be parsed and in the DOM before your script runs like this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="container">
<button name="one">Button 1</button>
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<div class="container">
<button name="two">Button 2</button>
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<div class="container">
<button name="three">Button 3</button>
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<script type="text/javascript" src="menu.js"></script>
</body>
</html>
或者,您可以使用一个脚本,该脚本将在DOM准备就绪时通知您,然后可以调用您的代码.
Alternately, you can use a script that will notify you when the DOM is ready and you can then call your code.
See this reference and highly voted answer for a plain Javascript and cross browser way of waiting until the DOM is ready if you'd rather keep your code in the <head>
section or make it so you code can be located anywhere.