Pertanyaan Cara mendapatkan elemen dengan banyak kelas


Katakan saya punya ini:

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

Bagaimana saya memilih ini div elemen?

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

Itu tidak berhasil.

Saya tahu itu, di jQuery, itu $('.class1.class2'), tapi saya ingin memilihnya dengan vanilla JavaScript.


75
2017-08-25 02:44


asal


Jawaban:


Ini sebenarnya sangat mirip dengan jQuery:

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName


126
2017-08-25 02:47



querySelectorAll dengan pemilih kelas standar juga bekerja untuk ini.

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

14
2018-05-26 01:48



Seperti kata @filoxo, Anda bisa menggunakannya document.querySelectorAll.

Jika Anda tahu bahwa hanya ada satu elemen dengan kelas yang Anda cari, atau Anda hanya tertarik pada yang pertama, Anda dapat menggunakan:

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

BTW, sementara .class1.class2 menunjukkan elemen dengan kedua kelas, .class1 .class2 (perhatikan spasi) menunjukkan hierarki - dan elemen dengan kelas class2 yang di dalam en elemen dengan kelas class1:

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

Dan jika Anda ingin memaksa mengambil anak langsung, gunakan > tanda (.class1 > .class2):

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

Untuk seluruh informasi tentang pemilih:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp


3
2017-10-20 09:00



Sebenarnya jawaban @bazzlebrush dan komentar @filoxo sangat membantu saya.

Saya perlu menemukan elemen di mana kelas bisa menjadi "zA yO" ATAU "zA zE"

Menggunakan jquery Saya pertama-tama memilih induk dari elemen yang diinginkan:

(div dengan kelas dimulai dengan 'abc' dan gaya! = 'display: none')

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

maka anak-anak yang diinginkan dari elemen itu:

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

bekerja dengan sempurna! perhatikan Anda tidak perlu melakukan document.querySelector Anda dapat seperti di atas melewatkan objek yang telah dipilih.


0
2018-04-30 21:14



html

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

kode javascritp

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

Metode querySelectorAll () mengembalikan semua elemen dalam dokumen yang cocok dengan pemilih CSS tertentu (s), sebagai objek NodeList statis.

Objek NodeList mewakili kumpulan node. Node dapat diakses oleh nomor indeks. Indeks dimulai pada 0.

juga pelajari lebih lanjut https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Terima Kasih ==


0
2017-07-18 05:50