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

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

예를 들어 다음과 같습니다.

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

이걸 선택하려면 어떻게 해야 합니다.div요소?

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

그것은 효과가 없다.

알아요, jQuery에서는$('.class1.class2')바닐라 JavaScript로 선택하고 싶습니다.

그리고. (두 클래스 모두)

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

또는 (1개 이상의 클래스)

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

XOR (한 클래스는 있지만 다른 클래스는 아님)

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

낸드 (두 클래스 모두 아님)

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

도 아니다 (두 클래스 모두 아님)

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

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

document.getElementsByClassName('class1 class2')

MDN 문서 getElements By ClassName

query Selector(쿼리 셀렉터)표준 클래스 셀렉터를 탑재한 것도 모두 이 경우에 유효합니다.

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

@filoxo가 말했듯이document.querySelectorAll.

찾고 있는 클래스가 1개뿐인 경우 또는 첫 번째 요소에만 관심이 있는 경우 다음을 사용할 수 있습니다.

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

BTW 동안.class1.class2두 클래스를 모두 포함하는 요소를 나타냅니다..class1 .class2(공백 포함)은 계층 및 클래스가 있는 요소를 나타냅니다.class2그것은 계급과 함께 요소 안에 있다.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:

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

도움이 됐으면 좋겠다!;)

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에 대한 자세한 내용도 참조해 주세요.

== 감사합니다 ==

사실 @bazzlebrush의 답변과 @filoxo의 코멘트가 저에게 많은 도움이 되었습니다.

클래스가 "zA yO" 또는 "zA zE"일 수 있는 요소를 찾아야 했습니다.

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

('display'로 시작하는 클래스 div와 style!= 'display:none'으로 시작하는 클래스 div

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

다음으로 해당 요소의 원하는 자식:

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

완벽하게 동작합니다! 참고: 문서 작업을 수행할 필요가 없습니다.query Selector는 위와 같이 미리 선택한 개체를 전달할 수 있습니다.

언급URL : https://stackoverflow.com/questions/7184562/how-to-get-elements-with-multiple-classes