Блог

Главная - Вопросы по программированию - Как использовать CSS-селектор в JavaScript для поиска элемента, который включает определенный класс?

Как использовать CSS-селектор в JavaScript для поиска элемента, который включает определенный класс?

#javascript #html #css-selectors

#javascript #HTML #css-селекторы

Вопрос:

Правильный способ присвоить элементу несколько классов — просто поместить пробелы между ними. Правильно?

Тогда почему селектор [class=CLASSNAME] не работает, если это не единственный класс?

[class^=CLASSNAME] работает, если класс является первым.

Но как выбрать все элементы, которые обладают данным классом, независимо от количества или порядка их классов?

Я хочу выбрать все элементы с помощью class foo-bar . Но приведенный ниже код выбирает только первый.

 const selector = '[class=foo-bar]';
const divs = document.querySelectorAll(selector);
console.log([...divs].map(div => div.textContent));  
 <div class="foo-bar">foo</div>
<div class="foo-bar baz">bar</div>
<div class="baz foo-bar">baz</div>

Комментарии:

1. Это селектор атрибутов, а не селектор классов, developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Ответ №1:

Когда вы используете селектор атрибута, он сопоставляется со всем значением атрибута как обычная строка. Он не обрабатывает class атрибут специально, поэтому он не считается списком классов, которые можно сопоставлять по отдельности.

Как и в CSS, используйте .classname для сопоставления любого класса в списке.

 const selector = '.foo-bar';
const divs = document.querySelectorAll(selector);
console.log([...divs].map(div => div.textContent.trim()));  
 <div class="foo-bar">foo</div>
<div class="foo-bar baz">bar</div>
<div class="baz foo-bar">baz</div>