如何查询 Select class 的所有 children，但没有 class 的孙子

Question

我有 css class 'control'，我想从我的容器中获取所有 'control' children 元素，但我不想得到孙子 'control'.

<div id='mydiv'>
    <div id='div1' class='control'>
        <div id='div2' class='control'></div>
        <div id='div3' class='control'></div>
    </div>
    <div class='other'>
        <div id='div4' class='control'></div>
        <div id='div5' class='control'>
            <div id='div6' class='control'></div>
            <div id='div7' class='control'></div>
        </div>
    </div>
</div>

下面的调用将使我获得 'mydiv' 中的所有控件。

document.querySelectorAll('#mydiv .control');

我想要一个只返回#div1、#div4 和#div5 的查询；这可能吗？

Answer 1

只有 querySelector* 目前无法使用。
以后浏览器会支持 :has() pseudo-selector.

然后你可以 select 只有元素里面有或没有像这样的元素：

#mydiv .control:not(:has(.control))

查看当前浏览器对此的支持：https://caniuse.com/css-has

目前您需要以下解决方案：

const elements = [...document.querySelectorAll('#mydiv .control')].filter(element => {
   return element.parentNode.closest('.control') == null
});

console.log(elements);

<div id='mydiv'>
    <div id='div1' class='control'>
        <div id='div2' class='control'></div>
        <div id='div3' class='control'></div>
    </div>
    <div class='other'>
        <div id='div4' class='control'></div>
        <div id='div5' class='control'>
            <div id='div6' class='control'></div>
            <div id='div7' class='control'></div>
        </div>
    </div>
</div>

解释：

首先将所有 .control 元素放入一个数组中（querySelectorAll returns a NodeList and NodeList does'nt have methods like filter. 所以我们用 spread syntax [...variable]

提取它

然后过滤所有没有名为.control.
父元素的元素 .closest() 可以 return 本身，所以我们需要确保首先调用 parentNode。

如何查询 Select class 的所有 children，但没有 class 的孙子

How to Query Select all children of a class, but no grandsons of that class

css

queryselector