Javascript 有没有办法让QuerySelector只搜索元素的子元素，而不是所有子元素？

例如，如果我有一个文档片段：

<div> <!-- I have a reference to this: "outerDiv". -->
  <p> <!-- This is the <p> I want to select. -->
    <div>
      <p> <!-- I don't want to select this <p>. --> </p>
    </div>
  </p>
</div>

（这是一个假设的文档。HTML解析器实际上不会构造一个如下所示的DOM。）

作为对最外层

元素的引用，我想以某种方式使用

outerDiv.querySelectorAll（'p'）

仅选择作为外层

直接子元素的

元素

我无法使用

outerDiv.childNodes

并搜索

元素，因为我实际上有一个比

“p”

长得多的选择器（例如，它可能看起来像

“p>a>b”

）。我也不能控制HTML，不能使用jQuery或其他JavaScript库

由于内部

也与

“div>p”

匹配，因此仅将

“div>前置到选择器并从
外部的parentNode
应用它也是不够的

有没有一种干净的方法可以做到这一点，而不必自己过多地解析CSS选择器？
您可以使用
body>div>p
或位于最外层div之外的任何内容吗？
假设您有一个对外部div的引用，您可以使用以下表达式：

outerDiv.querySelectorAll(":scope > p");

此表达式将选择所有p元素，这些p元素是outerDiv元素的直接子元素，因为如所述

从DOM API（如querySelector（）、querySelectorAll（）使用时，
matches（）或Element.closest（），：范围与调用的元素匹配
该方法将继续

唯一的缺点是：Internet Explorer不支持作用域


（在下面的代码片段中，我不使用段落示例，因为将
div
或
p
元素放在
p
元素中是错误的。请检查以下有关此的链接：&）


//对外部div的引用
让outerDiv=document.getElementById（“outerDiv”）；
let selected=outerDiv.querySelectorAll（“：scope>div”）；
console.log（选中）//它只返回直接子div

否，我的元素可能任意深，当有多个同级元素具有更高的相同标记名时（开始需要选择器中的第n个子元素

）。你能为

div>p

设置规则，然后将嵌套的

div>p>div>p

重新设置为以前的样子吗？。我不确定这是否是你的意思，但你的评论让我有了一个想法。我可以临时将一个类附加到外部

（

outerDiv.className=“unique-name-123”

），然后应用

”。unique-name-123>p“

@ide:这仍然会选择两个

p

标记，不是吗？查看我的答案。我知道的唯一解决方案是直接查看

子节点的子集。然而，你说“我实际上有一个比
p
长得多的选择器”。你能发布一个更真实的选择器，更好地反映你的情况吗？