クラスの集合にのみ属するクエリ要素

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>