querySelect 由 css 类的部分

Question

js是否可以选择不包含类特定部分的特定元素，例如：// This line seems to be an invalid query parameter, so I am curious if it's actually feasible to achieve that?const queryResult = document.querySelectorAll(`ul:not('.*__list')`);const queryResult = document.querySelectorAll(`ul`);console.log(queryResult)<div>  <ul>    <li>item</li>    <li>item</li>    <li>item</li>    <li>item</li>    <button>button</button>  </ul>  <ul class="abstractPrefix__list">    <li>      <button class="abstractPrefix__button">button</button>    </li>  </ul></div>

Answer 1

如果您确定class属性总是以 结尾__list，那么您可以使用属性选择器[class$='__list']。

const queryResult = document.querySelectorAll(`ul:not([class$='__list'])`);

console.log(queryResult)

<div>

  <ul>

    <li>item</li>

    <li>item</li>

    <li>item</li>

    <li>item</li>

    <button>button</button>

  </ul>

  <ul class="abstractPrefix__list">

    <li>

      <button class="abstractPrefix__button">button</button>

    </li>

  </ul>

</div>

但是，如果您的类列表如下所示，此选择器将失败class="abstractPrefix__list my_random_class"： ，因为它将不再匹配上述 CSS 属性选择器。在这种情况下，您将需要一个基于 JS 的解决方案：

const queryResult = Array.from(document.querySelectorAll('ul')).filter(el => {

  const classes = Array.from(el.classList);

  for (let cl of classes) {

    if (cl.match(/__list$/gi)) {

      return false;

    }

    

    continue;

  }

  

  return true;

});

console.log(queryResult)

<div>

  <ul>

    <li>item</li>

    <li>item</li>

    <li>item</li>

    <li>item</li>

    <button>button</button>

  </ul>

  <ul class="abstractPrefix__list my_random_class">

    <li>

      <button class="abstractPrefix__button">button</button>

    </li>

  </ul>

</div>

Answer 2

文档：

https://drafts.csswg.org/selectors/#overview

在此页面内，阅读以下内容：

E[foo*="bar"] 一个 E 元素，其 foo 属性值包含子字符串 bar

E:not(s1, s2, …) 不匹配复合选择器 s1 或复合选择器 s2 的 E 元素

所以你必须使用类似这样的东西：

document.querySelectorAll('ul:not([class*="__list"])')