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

Ответ 1

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

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

Ответ 2

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

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

Ответ 3

Как сказал @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

Ответ 4

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

== Спасибо ==

Ответ 5

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

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();

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

Ответ 6

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

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

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

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

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

то нужные дети этого элемента:

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

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