Question

当我把它放在我的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]

有人知道为什么好吗？

Answer 1

当您在控制台中键入这些语句时，页面已经完全解析，因此找到了元素并返回了类似数组的＆＃34;包含对这些元素的引用的对象。

但是，最有可能的是，当您使用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之前推迟执行代码。

对象引用在代码中未定义，但在控制台中未定义

1 个答案: