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

Question

我有以下内容:

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

并希望使用此选择器选择所有具有 .overedSuggestion 类的 a 元素。我知道以下应该有效:

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

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

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

这会返回以下错误:

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

Answer 1

那是因为您要将 NodeList 集合与字符串连接起来。 NodeList 被转换为 [object NodeList] 字符串，这不是有效/有意义的选择器。

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

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

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

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

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