Birden çok sınıf içeren öğeler nasıl elde edilir

Bunun bende olduğunu söyle:

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

Bu divelemanı nasıl seçerim?

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

Bu çalışmıyor.

JQuery'de öyle olduğunu biliyorum $('.class1.class2'), ancak onu vanilya JavaScript ile seçmek istiyorum.

Aslında jQuery'ye çok benzer:

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

AND (her iki sınıf)

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

VEYA (en az bir sınıf)

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

XOR (bir sınıf ama diğeri değil)

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

NAND (her iki sınıf değil)

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

NOR (iki sınıftan hiçbiri değil)

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

Standart sınıf seçicili querySelectorAll da bunun için çalışır.

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

@Filoxo'nun dediği gibi kullanabilirsiniz document.querySelectorAll.

Aradığınız sınıfta yalnızca bir öğe olduğunu biliyorsanız veya yalnızca birincisiyle ilgileniyorsanız, şunları kullanabilirsiniz:

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

BTW, her iki sınıfa .class1.class2sahip bir öğeyi belirtirken (boşluklara dikkat edin), bir hiyerarşiyi ve sınıf ile en öğesinin içinde bulunan sınıflı öğeyi belirtir : .class1 .class2class2class1

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

Doğrudan bir çocuğu almaya zorlamak istiyorsanız, >sign ( .class1 > .class2) kullanın :

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

Seçicilerle ilgili tüm bilgiler için:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

html

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

javascritp kodu

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

QuerySelectorAll () yöntemi, belgedeki belirtilen CSS seçicileriyle eşleşen tüm öğeleri statik bir NodeList nesnesi olarak döndürür.

NodeList nesnesi bir düğüm koleksiyonunu temsil eder. Düğümlere dizin numaraları ile erişilebilir. Dizin 0'dan başlar.

ayrıca https://www.w3schools.com/jsref/met_document_queryselectorall.asp hakkında daha fazla bilgi edinin

== Teşekkür Ederiz ==

Tamam, bu kod tam olarak ihtiyacınız olan şeyi yapıyor:

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

Umarım yardımcı olur! ;)

aslında @bazzlebrush'ın yanıtı ve @filoxo'nun yorumu bana çok yardımcı oldu.

Sınıfın "zA yO" olabileceği öğeleri bulmam gerekiyor VEYA "zA zE"

Jquery kullanarak önce istenen öğelerin ebeveynini seçerim:

('abc' ve style! = 'display: none' ile başlayan sınıfa sahip bir div)

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

sonra o öğenin istenen çocukları:

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

Mükemmel çalışıyor! document.querySelector yapmak zorunda olmadığınızı unutmayın, yukarıdaki gibi önceden seçilmiş bir nesneyi geçirebilirsiniz.