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

Question

我有以下内容：

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

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

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";