Как получить элементы с несколькими классами

136

Скажем, у меня есть это:

<div class="class1 class2"></div>

Как выбрать этот divэлемент?

document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]

Это не работает.

Я знаю, что в jQuery это так $('.class1.class2'), но я хотел бы выбрать его с помощью ванильного JavaScript.

javascript class element

— Натан Прометей
источник

183

На самом деле это очень похоже на jQuery:

document.getElementsByClassName('class1 class2')

Документ MDN getElementsByClassName

— Джо
источник

как насчет получения элемента только с одним классом, который указан @Joe

— CodeGuru

1

насколько я помню, классы идут без "." document.getElementsByClassName ('class1 class2')

— Миша Бескин

2

В данной ссылке MDN точка не используется перед именами классов в параметре getElements. Я проверил это в Firefox, а также в Chrome, и он работал без точек, но не с точками.

— Gaurav Singh

43

И (оба класса)

var list = document.getElementsByClassName("class1 class2");
var list = document.querySelectorAll(".class1.class2");

ИЛИ (хотя бы одно занятие)

var list = document.querySelectorAll(".class1,.class2");

XOR (один класс, но не другой)

var list = document.querySelectorAll(".class1:not(.class2),.class2:not(.class1)");

NAND (не оба класса)

var list = document.querySelectorAll(":not(.class1),:not(.class2)");

НИ (не любой из двух классов)

var list = document.querySelectorAll(":not(.class1):not(.class2)");

— Bitterblue
источник

Это фантастика. Должно быть наверху.

— Hackstaar

37

querySelectorAll со стандартными селекторами классов также работает для этого.

document.querySelectorAll('.class1.class2');

— filoxo
источник

2

Это не работает, это должно быть document.querySelectorAll('.class1, .class2');

— bazzlebrush

9

@bazzlebrush ваш селектор будет захватывать элементы с помощью .class1ИЛИ .class2, в то время как приведенный выше будет захватывать только элементы с обоими классами и фактически работает. См. Вывод этого теста на консоль: jsfiddle.net/0ph1p9p2

— filoxo

Ладно, плохо, я неправильно понял, что хотел сделать ОП. Но ИМО более типичный вариант использования - это выбрать элементы, которые имеют либо класс, либо оба, и в этом случае мой пример - это то, что вы хотите.

— bazzlebrush

12

Как сказал @filoxo, вы можете использовать document.querySelectorAll.

Если вы знаете, что существует только один элемент с классом, который вы ищете, или вас интересует только первый, вы можете использовать:

document.querySelector('.class1.class2');

Кстати, в то время как .class1.class2указывает элемент с обоими классами .class1 .class2(обратите внимание на пробел), указывает иерархию - и элемент с классом, class2который находится внутри элемента en с классом class1:

<div class='class1'>
  <div>
    <div class='class2'>
      :
      :

А если вы хотите принудительно получить прямого потомка, используйте >sign ( .class1 > .class2):

<div class='class1'>
  <div class='class2'>
    :
    :

Полная информация о селекторах:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

— guyaloni
источник

1

HTML

<h2 class="example example2">A heading with class="example"</h2>

код javascritp

var element = document.querySelectorAll(".example.example2");
element.style.backgroundColor = "green";

Метод querySelectorAll () возвращает все элементы в документе, которые соответствуют указанному селектору (-ам) CSS, как статический объект NodeList.

Объект NodeList представляет собой набор узлов. Доступ к узлам можно получить по номерам индексов. Индекс начинается с 0.

также узнайте больше о https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Спасибо ==

— Md. Abu Sayed
источник

1

Хорошо, этот код делает именно то, что вам нужно:

HTML:

<div class="class1">nothing happens hear.</div>

<div class="class1 class2">This element will receive yout code.</div>

<div class="class1">nothing happens hear.</div>

JS:

function getElementMultipleClasses() {
    var x = document.getElementsByClassName("class1 class2");
    x[0].innerHTML = "This is the element you want";
}
getElementMultipleClasses();

Надеюсь, поможет! ;)

— Габриэль Маркес
источник

0

на самом деле ответ @bazzlebrush и комментарий @filoxo мне очень помогли.

Мне нужно было найти элементы, в которых класс мог бы быть "zA yO" OR "zA zE"

Используя jquery, я сначала выбираю родительский элемент желаемых элементов:

(div с классом, начинающимся с 'abc' и стилем! = 'display: none')

var tom = $('div[class^="abc"][style!="display: none;"]')[0];

затем желаемые дочерние элементы этого элемента:

var ax = tom.querySelectorAll('.zA.yO, .zA.zE');

работает отлично! обратите внимание, что вам не нужно делать document.querySelector, вы можете, как указано выше, передать предварительно выбранный объект.

— user2677034
источник