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

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

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

但是，最有可能的是，当您使用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 个解决方案

解决方案1
8 已采纳 2017-07-24 20:23:27

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

问题描述

1 个解决方案

解决方案1 8 已采纳 2017-07-24 20:23:27

解决方案1
8 已采纳 2017-07-24 20:23:27