Javascript 数组元素 Return 未定义

Question

这是一个非常简单的html文档，带有js脚本。

...
<script type = "text/javascript"> src = "xxx.js"></script>
...

<body>
  <ul id ="pics">
    <li><a href="A.jpg">A</a></li>
    <li><a href="A.jpg">A</a></li>
    <li><a href="A.jpg">A</a></li>
  </ul>
</body>

js文件是：

var picspics = document.querySelectorAll("#pics ul > li > a");
alert(picspics[0]);

但它return未定义，反正如果只是提醒图片，它会return "object nodelist"，听起来不错。

一开始以为是dom加载问题，所以加了

window.onload(){}

在我的代码之外，也失败了。

当我尝试使用 for 循环迭代所有 li > a 元素并添加一个 onclick 事件时，所有事情都开始了，这在 chrome 控制台中显示 a 元素的数组未定义，所以我试着用警报功能调试它。

之后，我尝试取消附加 js 文件，只是在 chrome 中加载了 html，然后在控制台中键入 js 代码，它也如预期的那样失败了，我建议与 window.onload 函数相同。

无论如何，我的错在哪里？ picspics变量return一个数组不应该包含3个元素吗？那第一个元素怎么会是undefined呢？

谢谢。

Answer 1

选择器错误，应该是：

document.querySelectorAll("#pics > li > a");

Answer 2

您提供的查询是 var picspics = document.querySelectorAll("#pics ul > li > a");，但 pics 是 ul。将其更改为：

var picspics = document.querySelectorAll("ul#pics > li > a");

Javascript 数组元素 Return 未定义

Javascript Array Elements Return undefined

javascript

arrays

undefined