如何使用另一个 querySelectorAll 的值简化 querySelectorAll 参数

Question

我有以下内容：

var searchSuggestionsItems = document.querySelectorAll("#search-user-results .live-search-results--list li");

并希望将此 select 或用于 select 所有具有 .overedSuggestion class 的 a 元素。我知道以下应该有效：

var selectedSuggestion = document.querySelectorAll("#search-user-results .live-search-results--list li a.overedSuggestion");

但我正在寻找一种简化的方法。我尝试了什么：

selectedSuggestion = document.querySelectorAll(searchSuggestionsItems+' a.overedSuggestion');

此returns以下错误：

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[object NodeList] a.overedSuggestion' is not a valid selector.

Answer 1

那是因为您要将 NodeList 集合与字符串连接起来。 NodeList 被转换为 [object NodeList] 字符串，它不是 valid/meaningful 选择器。

DOM 元素也有 .querySelectorAll 方法，所以你可以编码：

searchSuggestionsItems[0].querySelectorAll('a.overedSuggestion');

上面的代码片段 returns a.overedSuggestion 节点列表中第一个元素的后代。要获取列表中所有元素的后代，您需要遍历列表，这效率不高。使用更长的选择器效率更高。

如果 searchSuggestionsItems 是一个选择器，您的代码将有效，即：

var searchSuggestionsItems = "#search-user-results .live-search-results--list li";