關於帶有多個選擇器的querySelector（）

Question

我有一種情況，我想要集中輸入標籤（如果存在），或者它的容器（如果沒有）。所以我想的做這件事的一種智能的方式：

​​

滑稽，不過，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(); 

Answer 1

官方document說，

返回第一（使用文檔標記中第一個元素的深度優先遍歷文檔節點|並按照子節點的數量順序遍歷順序節點）t帽子與指定的選擇器組相匹配。

這意味着，在您的第一種情況下，.container是父元素，因此它將首先匹配並返回。而在第二種情況下，該段落應該是文檔中的第一個元素，並與其他pre和div進行比較。所以它被返回。

Answer 2

document.querySelector僅返回匹配的第一個元素，從標記中的第一個元素開始。作爲MDN書面：

返回第一個元素的文檔內（使用文檔的節點的深度優先 預購遍歷|由第一元件在 文檔標記和通過的 量順序通過順序節點迭代的子節點）與指定的選擇器組相匹配。

如果你想所有元素相匹配的查詢，使用document.querySelectorAll（docs），即document.querySelectorAll('pre, div, p')。這將返回一個匹配元素的數組。

Answer 3

這正是的.querySelector()預期的行爲 - 它發現所有符合您查詢的文檔中的元素，然後返回第一個。

這不是「您列出的第一個」，它是「文檔中的第一個」。

這工作，基本上，就像一個CSS選擇器。選擇器p, div, pre和pre, div, p是相同的;它們都匹配三種不同類型的元素。所以原因elem1.tagName == 'P'只不過是你在<pre>或<div>標籤之前的頁面上有一個<p>。