JavaScript的querySelectorAll('*')返回格式

Question

假设我这样做：

var elems = document.querySelectorAll('div *');

其中div是任意的

标签，例如以下内容：

<div>
   <select>
      <option>Opt1</option>
      <option>Opt1</option>
      <option>Opt1</option>
      <optgroup>
          <option>Opt1</option>
          <option>Opt1</option>
          <option>Opt1</option>
      </optgroup>
   </select>
</div>

我的问题是，elems将会是什么？Javascript标准是否规定了处理这些的方法，还是留给实现者自行决定？

换句话说，Javascript如何遍历节点？它会以深度优先搜索（DFS）的方式遍历，从而保证节点被完全展开吗？

- ComputrScientist

---

所有具有父元素（直接或间接）为div的元素 - 这与CSS选择器相同。 - MDEV

嗯，试一试看它会产生什么结果？ - user663031

阅读 document.querySelectorAll() 文档。 - David Thomas

Answer 1

'elems' 将是一个非实时的元素对象 NodeList。遍历将使用深度优先搜索 (DFS)。

文档

- HelloWorld

---

我真的很理解你的答案，但是看了链接后，我发现它确实使用DFS遍历整个东西。 - ComputrScientist

是的，没错。鉴于问题的更新，我更新了我的答案。 - HelloWorld

在这种情况下，由于使用的选择器不同，它不会是“the divs”。 - MDEV

实际上，你是对的。我错过了“*”，所以我编辑了答案，谢谢。 - HelloWorld

不要说“深度优先搜索”，更准确的说法是“文档顺序”。 - user663031

Answer 2

这更多是实现者的选择，关于如何实现你的JavaScript变量和方法。如果你将变量等于div和通配符字符，你将返回所有被识别的东西，包括div内的Null值。通配符用作无差别捕获所有。试一下，在控制台中运行引用您的elem变量的函数时会得到什么结果。

- Alex

---

“null within the div” 是什么意思？ - user663031

在这种情况下，null表示为空，如果您的div中没有任何内容，则会被视为null，而不是如果您在div中有像列表这样的东西，并且您指定了列表来代替通配符字符。 - Alex

我觉得你有点困惑。如果 div 里面没有任何内容，那么就没有元素可以返回。我不知道怎么可能在你的 div 里有一个“数组”。 - user663031

Answer 3

它将列出 div 内的所有元素，而不仅是直接子元素 (select)。然而，不会有任何层次结构，并且列表将被平铺，使得任何深度的所有元素都可以立即使用。

响应将看起来像这样（一个“类似数组”的 NodeList 对象）:

NodeList [ select, option, option, option, optgroup, option, option, option ]

MDN 文档页面

- MDEV