JavaScript:querySelector-也匹配顶部元素

querySelector是否可以以某种方式匹配顶部元素？例如：

要素：

<div class="container">
    <div>Something</div>
</div>

---

这与任何内容都不匹配，因为“container”是顶部元素。是否有一种优雅的查询元素的方法，不仅可以测试其子元素，还可以测试顶层元素？我说的是纯JavaScript。

您可以测试选择器是否引用顶级，并使用条件表达式：

const container = element.matches(".container") ? element : element.querySelector(".container");

对于QuerySelector，您可以执行以下操作：

const containers = [...(element.matches(".container") ? [element] : []), ...element.querySelectorAll(".container")];

---

这将返回一个数组，而不是

节点列表

，但在大多数情况下，这种差异并不重要。 如果我们求助于element.parentNode，我们不能保证只针对元素

//装模作样
const元素=document.querySelector（'.container'）；
const container=element.querySelector（'.container'）；
const container2=element.querySelector（'.container'）| |（element.classList.contains（'container'））？元素：空；
控制台日志（容器）；
控制台日志（container2）

某物
const container=element.querySelector（'.container'）我不知道有什么，但您可以使用以下内容检查包含的内容：
元素。匹配（“.container”）
。这很好，但不适用于
querySelectorAll
。不幸的是，我想知道是否有更通用的解决方案，这对这两个方面都适用：
querySelector
和
querySelectorAll
我可能需要为此创建自己的工具，但这很可惜。您可以使用
element.parent.querySelectorAll（…）
Barmar的问题是它更喜欢在孩子之前使用容器。这有什么问题？@ukaszZaroda编辑问题，以澄清您还需要一个与
querySelectorAll（）
一起使用的解决方案，因为最好的解决方案是不同的。
const containers = [...(element.matches(".container") ? [element] : []), ...element.querySelectorAll(".container")];