Точный поиск элемента по классу
 

День добрый. Собственно суть. Есть, допустим, много дивов вот с такими именами классов:

<div class="event-container closed-task cancelled-task    ">
<div class="event-container closed-task cancelled-task CANCELLED    ">

Использую:

getElementsByClassName('event-container closed-task cancelled-task')

Мне возвращается nodelist с дивами имеющими оба описанных выше именами классов. Собственно вопрос - как в getElementsByClassName сделать поиск по точному совпадению имени класса?

'event-container.closed-task.cancelled-task'

Это не сработает... :no:

<div class="event-container closed-task cancelled-task CANCELLED"></div>
<script type='text/javascript'>
var o=document.getElementsByClassName('event-container.closed-task.cancelled-task');
alert(o.length);
</script>

Почему именно getElementsByClassName?

Можно например так...

<div class="event-container closed-task cancelled-task"></div>
<div class="event-container closed-task cancelled-task CANCELLED"></div>
<script type='text/javascript'>
var o=document.querySelectorAll('.event-container.closed-task.cancelled-task:not(.CANCELLED)');
alert(o.length);
</script>

Сработает:

document.querySelector('.event-container.closed-task.cancelled-task')

И это не сработает... :no:
1. Автору нужно работать с getElementsByClassName
2. Твой вариант просто выберет первое совпадение. Если использовать querySelectorAll с твоим селектором - так же выберется 2 элемента

<div class="event-container closed-task cancelled-task"></div>
<div class="event-container closed-task cancelled-task CANCELLED"></div>
<script type='text/javascript'>
var o=document.querySelectorAll('.event-container.closed-task.cancelled-task');
alert(o.length);
</script>

Ну это уже не мои проблемы, заказан поиск по составному классу, пусть применяет метод подобающий, а то что querySelectorAll выберет несколько, то так и должно. Если нужно выбрать N-ый из этого набора, значит пусть указывает дополнительный селектор, какие проблемы?

Потопил... :haha:

Автору нужны элементы только (!) с таким набором. Элементы с такими классами + еще какие-то ему не нужны.
Т.о. твой селектор ему не поможет. :no:

Я не знаю какие у него наборы, но если указанного составного класса и исключая .... кто мешает добавить :not(....)?

Он их показал в своем сообщении...
Его вопрос в том и состоял
Суть в том, что твои "ответы" ему не помогут. :no:
Вот собственно и все.

Я вообще-то о составных классах только и сказал. Если ответ и надо без последнего, то

document.querySelectorAll('.event-container.closed-task.cancelled-task:not(.CANCELLED)');

А нет, так нет.

лучше так.

var divs = [].filter.call(document.querySelectorAll('.event-container.closed-task.cancelled-task'), el => el.classList.length == 3);

Это то с учетом того, что el => el.... не под всеми браузерами будет работать?

в каких то древних может не работать.

var divs = [].filter.call(document.querySelectorAll('.event-container.closed-task.cancelled-task'), function(el) {
  return el.classList.length === 3;
});

Даже так. Не все и современные имеют поддержку стрелочных функций, это IE, Safari, Opera тоже как бы. В моб. устройствах тоже самое.

:thanks: