javascript - 如何使用 CSS 选择器获取除特定子元素之外的所有匹配元素？

Question

假设 HTML 结构如下所示:

<div id="container">
     <div class="A">
         <div id="excludedElement">
             <p>
                 <span class="MyClass">1</span>
                 <span class="MyClass">2</span>
                 <span class="MyClass">3</span>
             </p>
         </div>
     </div>
     <div class="B">
         <p>
             <span class="MyClass">4</span>
             <span class="MyClass">5</span>
             <span class="MyClass">6</span>
         </p>
     </div>
</div>

我想要“container”div 中具有类“MyClass”的所有元素，“excludedElement”div 中的元素除外。在本例中，结果仅包含跨度 4、5 和 6。

我当前的解决方案是首先获取带有“MyClass”的所有元素，然后获取带有“MyClass”的exclusionElement 内的所有元素。对于第一个列表中的每个元素，我们检查它是否在第二个列表中，如果是则跳过它。这是 O(n^2) 运行时间，所以我想避免这种情况。伪代码供引用:

const allElements = container.querySelectorAll('.MyClass');
const excludedElements = container.querySelectorAll('#excludedElement .MyClass');
var result = [];

for (const element in allElements)
{
    if (!excludedElements.Contains(element))
    {
        result.Add(element);
    }
}

有没有办法在 querySelectorAll() 中制作一个可以检索该特定元素集的 CSS 选择器？

一种方法是暂时从树中删除排除元素，查询“MyClass”，然后替换排除元素，但我想避免修改 DOM。

Answer 1

如果结构是可预测的并且已知的:

container.querySelectorAll('div:not(#excludedElement) > p .MyClass');

如果结构未知，并且您可以添加类以避免 O(n^2):

container.querySelectorAll('#excludedElement .MyClass')
    .forEach(element => element.classList.add('excluded'));

const notExcludedMyClassElements = container.querySelectorAll('.MyClass:not(.excluded)');