여러 클래스가있는 요소를 가져 오는 방법

내가 이것을 가지고 있다고 말하십시오.

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

이 div요소를 어떻게 선택 합니까?

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

작동하지 않습니다.

jQuery에서는 $('.class1.class2')이지만 바닐라 JavaScript로 선택하고 싶습니다.

실제로 jQuery와 매우 유사합니다.

document.getElementsByClassName('class1 class2')

MDN 문서 getElementsByClassName

AND (두 클래스)

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

OR (적어도 하나의 클래스)

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

NOR (두 클래스 중 어느 것도 아님)

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

표준 클래스 선택 기가 있는 querySelectorAll 도이를 위해 작동합니다.

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

@filoxo가 말했듯이 document.querySelectorAll .

찾고있는 클래스에 하나의 요소 만 있다는 것을 알고 있거나 첫 번째 요소에만 관심이있는 경우 다음을 사용할 수 있습니다.

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

BTW .class1.class2는 두 클래스 가 모두 있는 요소 를 나타내며 .class1 .class2(공백에 유의) 계층 구조 및 클래스가 class2있는 en 요소 내부에 있는 클래스 요소를 나타냅니다 class1.

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

직계 자식을 강제로 검색하려면 >기호 ( .class1 > .class2)를 사용 하십시오 .

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

선택기에 대한 전체 정보 :
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

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에 대해 자세히 알아보십시오.

== 감사합니다 ==

좋습니다.이 코드는 필요한 작업을 정확히 수행합니다.

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

도움이 되었기를 바랍니다. ;)

실제로 @bazzlebrush의 답변과 @filoxo의 의견이 많은 도움이되었습니다.

나는 클래스가 "ZA 요"가 될 수있는 요소를 발견 할 필요가 OR "zA zE"

jquery를 사용하여 먼저 원하는 요소의 부모를 선택합니다.

( 'abc'및 스타일로 시작하는 클래스가있는 div! = 'display : none')

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

그런 다음 해당 요소의 원하는 자식 :

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

완벽하게 작동합니다! document.querySelector를 수행 할 필요가 없습니다. 위와 같이 미리 선택된 개체를 전달할 수 있습니다.