Как работает element.classList.contains() в JavaScript?

Question

мне нужно использовать element.classList.contains('some-class'), чтобы проверить, если элемент содержит, по меньшей мере, один из трех классов, так что я писал:

if (element.classList.contains('class1', 'class2', 'class3')) { 
    // do stuff here 
} 

Результат был - если элемент имеет «Class1», он возвращает истину, независимо от того, он имеет «класс2» или/и «класс3», и // do stuff here выполняет. Однако, если у него есть «класс2» и/или «класс3», он возвращает false, а // do stuff here не выполняется.

(я установил его с

if (element.classList.contains('class1') || element.classList.contains('class2') || element.classList.contains('class3')) { 
    // do stuff here 
} 

... сейчас Но я все еще хочу, чтобы узнать больше по этой теме.)

Так что - как именно это работает?

Answer 1

Сообщается, что имя класса, которое вы передаете в качестве первого аргумента, является одним из классов, членом которого является элемент.

Как и все функции JavaScript, вы можете передать столько дополнительных аргументов, сколько хотите. Функция contains просто ничего не делает с ними.

Answer 2

Эта функция принимает только один параметр. Метод contains используется для проверки того, содержит ли в classList уникальный элемент. Кодовый блок, который вы разместили внизу, является хорошим обходным решением. Но, к сожалению, то, что вы пытаетесь сделать наверху, недоступно API-интерфейсу classList.

Answer 3

попробовать document.querySelectorAll

HTML:

<div class="class1"></div> 
<!--<div class="class2"></div> --> 
<!-- <div class="class3"></div> --> 

<div id="result"></div> 

Javascript

var el = document.querySelectorAll('.class1, .class2, .class3'); 
var result = document.getElementById('result'); 

result.innerHTML = el.length; 

демо: https://codepen.io/fatihhayri/pen/weqzWE