javascript - 关于带有多个选择器的 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 元素。

Note: In the situation mentioned above, I came out with a less-elegant but functional solution:

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

Answer 1

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

Returns the first element within the document (using depth-first pre-order traversal of the document's nodes|by first element in document markup and iterating through sequential nodes by order of amount of child nodes) that matches the specified group of selectors.

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