当我把它放在我的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]
有人知道为什么请？
当您在控制台中键入这些语句时,页面已经完全解析,因此找到了元素,并返回一个"类似数组"的对象,其中包含对这些元素的引用.
但是,最有可能的是,当您使用代码进行尝试时,在将整个HTML页面解析到内存之前app.js,您的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之后执行代码.
| 归档时间： |
|
| 查看次数： |
99 次 |
| 最近记录： |