当我将其放入我的 app.js 中时:
var titres = document.querySelectorAll('header ul li a')
console.log(titres)
它发回给我:[]
如果我把它放在浏览器的控制台中:
var titres = document.querySelectorAll('header ul li a')
titres 发回此信息:[a,a,a,a,a]
有人知道为什么吗？
最佳答案
当您在控制台中键入这些语句时，页面已被完全解析，因此会找到元素，并返回一个包含对这些元素的引用的“类似数组”的对象。
但是，最有可能的是，当您使用 app.js 中的代码尝试时，你的app.js文件在整个 HTML 页面被解析到内存之前被执行，如下所示:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- At this point, the rest of the HTML hasn't been parsed yet, so
if app.js tries to query for those elements, they won't be found! -->
<script src="app.js"></script>
</head>
<body>
. . .
尝试输入 <script src="app.js"></script> body 结束之前的代码元素(以便它在 HTML 解析后运行)如下所示:
. . .
<script src="app.js"></script>
</body>
</html>
或留下 script标签位于页面顶部，但位于 app.js 内文件中，将代码包装在事件处理程序中，如下所示:
window.addEventListener("DOMContentLoaded", function(){
var titres = document.querySelectorAll('header ul li a')
console.log(titres)
});
这会将代码的执行推迟到 HTML 加载之后。
关于javascript - 对象引用在代码中未定义，但在控制台中未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45289384/