html - 查询元素，仅属于一组类

Question

document.querySelectorAll(".a, .b") 返回属于 a 和 b 类的所有 HTML 元素的 NodeList。

同样 document.getElementsByClassName("a b") 返回包含相同元素的 HTMLCollection。

如何将这些结果缩小到那些完全属于那些类的元素:省略例如属于 a、b 和 c 类的元素。

Answer 1

您可以像这样使用 :not 选择器:

var abOnly = document.querySelectorAll(".a:not(.c), .b:not(.c)");

console.log(Array.from(abOnly).map(el => el.innerText));
           

<ul>
  <li class="a b">ab</li>
  <li class="a b c">abc</li>
  <li class="a b">ab</li>
</ul>

您也可以采用半查询半 js 方法:

var hasAB = Array.from(
  document.querySelectorAll(".a, .b")
);

var noC = hasAB.filter(el => !el.classList.contains("c"));

console.log(noC.map(el => el.innerText));

<ul>
  <li class="a b">ab</li>
  <li class="a b c">abc</li>
  <li class="a b">ab</li>
</ul>

评论后编辑:“更通用的方法”

有关如何结合使用 querySelectorAll 和 classList 进行高级查询的一些示例:

var twoClassesAB = Array
  .from(document.querySelectorAll(".a.b"))
  .filter(el => el.classList.length === 2)
  .map(innerText)
  .join(" ");

var aOrBWithoutC = Array
  .from(document.querySelectorAll(".a, .b"))
  .filter(el => !el.classList.contains("c"))
  .map(innerText)
  .join(" ");
                                  



console.log("Only a and b, nothing else:", twoClassesAB)

console.log("At least one of a and b, explicitly not c:", aOrBWithoutC)

// Utils
function innerText(el) { return el.innerText; };

<ul>
  <li class="a b">ab</li>
  <li class="a b c">abc</li>
  <li class="a b">ab</li>
  <li class="a b d">abd</li>
</ul>