对象引用未定义的,但不是在控制台
问题描述:
当我把这个在我的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
代码试试吧,被前整个HTML页面已经被解析到内存中,这样执行你的app.js
文件:
<!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被加载后,直到。
+0
谢谢你,伙计, 我的
+0
@BenoHiT是的,浏览器会按顺序读取代码,所以如果在HTML的大部分之前遇到JavaScript,则JavaScript无法找到它。 –
请寄[mcve]。我们需要您的HTML – j08691
因为页面上有5个锚点元素 – Erwin
将'.js'文件放在HTML文件的底部,就在'