关于带有多个选择器的 querySelector()

Question

我有一种情况，我想关注输入标签（如果存在）或者它的容器（如果不存在）。所以我想到了一个聪明的方法：

 document.querySelector('.container input, .container').focus();

不过，有趣的是， querySelector 总是返回 .container 元素。

我开始调查并发现，无论不同选择器的放置顺序如何， querySelector 总是返回相同的元素。

例如：

 var elem1 = document.querySelector('p, div, pre');
var elem2 = document.querySelector('pre, div, p');

elem1 === elem2; // true
elem1.tagName;   // "P".

我的问题是： 这种行为的“原因”是什么，什么“规则”（如果有的话）使 P 元素优先于 DIV 和 PRE 元素。

注意：在上面提到的情况下，我想出了一个不太优雅但功能强大的解决方案：

 (document.querySelector('.container input') ||
 document.querySelector('.container')       ).focus();

原文由 mauroc8 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

document.querySelector 仅返回匹配的第一个元素，从标记中的第一个元素开始。如 MDN 上所写：

返回文档中与指定选择器组匹配的第一个元素（使用文档节点的深度优先预序遍历|通过文档标记中的第一个元素并按子节点数量的顺序遍历顺序节点）。

如果您希望 所有 元素都匹配查询，请使用 document.querySelectorAll ( docs )，即 document.querySelectorAll('pre, div, p') 。这将返回匹配元素的数组。

原文由 Thijs Kramer 发布，翻译遵循 CC BY-SA 3.0 许可协议