Javascript querySelectorAll('*') 返回格式答案

【问题标题】：Javascript querySelectorAll('*') return format [duplicate]Javascript querySelectorAll('*') 返回格式
【发布时间】：2015-09-03 04:47:58
【问题描述】：

假设我执行以下操作：

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

其中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（深度优先搜索）方式遍历它，从而保证完美扁平的节点？

【问题讨论】：

所有父元素（直接或远距离）是 div - 它与 CSS 选择器相同
嗯，试试看效果如何？
并阅读document.querySelectorAll() 文档。

标签： javascript html

【解决方案1】：

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

响应看起来像这样（NodeList 对象，它是“类数组”）：

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

MDN docs page

【讨论】：

【解决方案2】：

'elems' 将是元素对象的非活动 NodeList。遍历将是 DFS（深度优先搜索）

docs

【讨论】：

我真的明白你的回答，但是查看链接，我刚刚读到它确实遍历了 DFS 中的整个内容。
是的，没错。鉴于更新的问题，我更新了我的答案。
在这种情况下，由于使用了选择器，它不会是“div”...
其实，你是对的。我错过了“*”所以我编辑了答案谢谢
与其说“深度优先搜索”，不如说“文档顺序”更正确。

【解决方案3】：

在您希望如何实现您的 javascript 变量和方法方面，它更多是实现者的选择。如果您指定一个等于 div 和通配符的变量，您将返回所有可识别的内容，包括 div 中的 Null。通配符是一种不分青红皂白的包罗万象。当您尝试运行引用您的 elem 变量的函数时，尝试一下并查看控制台中的结果。

【讨论】：

“div 内为空”是什么意思？
在这种情况下，null 为空，如果您的 div 中没有任何内容，那么这将被视为 null，而不是如果您的 div 中有诸如列表之类的内容并且您指定了列表代替通配符。
我想你很困惑。如果 div 中没有任何内容，则没有要返回的元素。我不知道怎么会有一个“你的 div 中的数组”。