使用 querySelector 排除 id 包含特定字符串的元素

Question

我想获得 id 不包含字符串的结果（假设它是“测试”）

<ul class="numberlist">
  <li id="test1" style="display:none">
    <div></div>
  </li>
  <li>
    <a>one</a>
  </li>
  <li>
    <a>two</a>
  </li>
  <li>
    <a>three</a>
  </li>
  <li id="test2" style="display:none">
    <div></div>
  </li>
  <li>
    <a>four</a>
  </li> 
  <li id="test" style="display:none">
    </div></div>
  </li>
</ul>

正如我所说，我想排除哪个 id 包含 string test。我怎样才能实现它？

我可以<li>通过写来获得's的列表

document.querySelectorAll('ul.numberList')

但我想通过他们的 id 排除其中一些。

Answer 1

您可以将属性包含选择器与:not()伪类选择器一起使用

document.querySelectorAll('ul.numberlist li:not([id*="test"])')

document.querySelectorAll('ul.numberlist li:not([id*="test"])')

console.log(document.querySelectorAll('ul.numberlist li:not([id*="test"])').length)

仅供参考： document.querySelectorAll('ul.numberList')，没有获取所有li元素，而是获取所有ulclass numberList。要获取所有li内容，请使用选择器 as ul.numberList li。另外你的 html 类名numberlist不是numberList.