Javascript - làm thế nào để có được các yếu tố với nhiều lớp

Question

Nói rằng tôi có điều này:

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

Làm thế nào để chọn một thành phần div này?

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

Điều đó không hiệu quả. Tôi biết rằng, trong jQuery, nó là $('.class1.class2'), nhưng tôi muốn chọn nó với JavaScript vani.

Answer 1

Nó thực sự rất giống với jQuery:

document.getElementsByClassName('class1 class2') 

MDN Doc getElementsByClassName

Answer 2

querySelectorAll với selectors lớp tiêu chuẩn cũng làm cho việc này.

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

Answer 3

câu trả lời của @bazzlebrush thực sự và nhận xét của @filoxo đã giúp tôi rất nhiều.

tôi cần phải tìm ra các yếu tố mà lớp có thể là "zA yo" HOẶC "zA Ze"

Sử dụng jquery đầu tiên tôi chọn công ty mẹ của các yếu tố mong muốn:

(một div với lớp bắt đầu bằng 'abc' và style =! 'display: none')

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

sau đó những đứa trẻ mong muốn của nguyên tố đó:

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

hoạt động hoàn hảo! lưu ý bạn không phải làm document.querySelector bạn có thể như trên vượt qua trong một đối tượng được chọn trước.

Answer 4

Như @filoxo đã nói, bạn có thể sử dụng document.querySelectorAll.

Nếu bạn biết rằng chỉ có một phần tử với các lớp học mà bạn đang tìm kiếm, hoặc bạn chỉ quan tâm đến một trong những đầu tiên, bạn có thể sử dụng:

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

BTW, trong khi .class1.class2 chỉ ra một yếu tố với cả lớp, .class1 .class2 (chú ý khoảng trắng) chỉ ra một hệ thống phân cấp - và phần tử với lớp class2 mà là bên en phần tử với lớp class1:

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

Và nếu bạn muốn để buộc lấy một đứa trẻ trực tiếp, sử dụng > dấu (.class1 > .class2):

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

Đối với toàn bộ thông tin về selectors:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp