วิธีรับองค์ประกอบที่มีหลายชั้นเรียน

บอกว่าฉันมีสิ่งนี้:

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

ฉันจะเลือกdivองค์ประกอบนี้ได้อย่างไร

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

ที่ไม่ได้ผล

ฉันรู้ว่าใน jQuery เป็น$('.class1.class2')เช่นนั้น แต่ฉันต้องการเลือกด้วย vanilla JavaScript

จริงๆแล้วมันคล้ายกับ jQuery มาก:

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

AND (ทั้งสองคลาส)

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

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 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 คุณสามารถส่งผ่านวัตถุที่เลือกไว้ล่วงหน้าได้