Cách lấy các phần tử có nhiều lớp

Nói rằng tôi có cái này:

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

Làm cách nào để chọn divphần tử này ?

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

Điều đó không hoạt động.

Tôi biết điều đó trong jQuery là như vậy $('.class1.class2'), nhưng tôi muốn chọn nó bằng JavaScript đơn giản.

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

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

VÀ (cả hai lớp)

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

HOẶC (ít nhất một lớp)

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

XOR (một lớp nhưng không phải lớp khác)

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

NAND (không phải cả hai lớp)

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

NOR (không phải bất kỳ lớp nào trong hai lớp)

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

querySelectorA Tất cả các bộ chọn lớp tiêu chuẩn cũng hoạt động cho việc này.

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

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 lớp bạn đang tìm kiếm hoặc bạn chỉ quan tâm đến lớp đầu tiên, bạn có thể sử dụng:

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

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

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

Và nếu bạn muốn buộc truy xuất một phần tử con trực tiếp, hãy sử dụng >dấu hiệu ( .class1 > .class2):

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

Để biết toàn bộ thông tin về bộ chọn:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

html

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

mã javascritp

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

Phương thức querySelectorAll () trả về tất cả các phần tử trong tài liệu khớp với (các) bộ chọn CSS được chỉ định, dưới dạng đối tượng NodeList tĩnh.

Đối tượng NodeList đại diện cho một tập hợp các nút. Các nút có thể được truy cập bằng số chỉ mục. Chỉ số bắt đầu từ 0.

cũng tìm hiểu thêm về https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Cảm ơn bạn ==

Được rồi, mã này thực hiện chính xác những gì bạn cần:

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

Hy vọng nó giúp! ;)

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

Tôi cần tìm các phần tử mà lớp có thể là "zA yO" HOẶC "zA zE"

Sử dụng jquery, trước tiên, tôi chọn phần tử gốc của các phần tử mong muốn:

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

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

thì các phần tử con mong muốn của phần tử đó:

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

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