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

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

javascript

Javascript 对象引用在代码中未定义，但在控制台中未定义,javascript,Javascript,当我把它放在我的app.js中时： var titres = document.querySelectorAll('header ul li a') console.log(titres) 它给我发回这个：[] 如果我将其放在浏览器的控制台中： var titres = document.querySelectorAll('header ul li a') 标题把这个发还给我：[a，a，a，a] 有人知道为什么吗？当您在控制台中键入这些语句时，页面已经被完全解析，因此会找到元素，并返回一个

当我把它放在我的

app.js

中时：

var titres = document.querySelectorAll('header ul li a')

console.log(titres)

它给我发回这个：

[]

如果我将其放在浏览器的控制台中：

var titres = document.querySelectorAll('header ul li 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>

window.addEventListener("DOMContentLoaded", function(){
    var titres = document.querySelectorAll('header ul li a')
    console.log(titres)
});

或者将

script

标记留在页面顶部，但在

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>

window.addEventListener("DOMContentLoaded", function(){
    var titres = document.querySelectorAll('header ul li a')
    console.log(titres)
});

这将延迟代码的执行，直到加载HTML之后。

请发布一条消息。我们需要你的HTMLB，因为页面上有5个锚元素，将

.js

文件放在你的HTML文件的底部，就在

之前。谢谢你，伙计，我的是一个到身体顶部的锚元素。那么，如果我把它也放在中也是一样的吗？@BenoHiT是的，浏览器按顺序读取代码，因此如果在大部分HTML之前遇到JavaScript，JavaScript就找不到它。