Cara memilih semua elemen dengan kelas yang sama di javascript

Question

Metode getElementsByClassName_ dari antarmuka

document.getElementsByClassName('test')

0 mengembalikan objek mirip-array dari semua elemen anak yang memiliki semua nama kelas yang diberikan

Table of Contents Show

Bagaimana cara memilih banyak elemen dengan JavaScript kelas yang sama?
Bagaimana Anda memilih semua elemen dengan nama kelas yang sama?
Bagaimana cara mendapatkan semua elemen dengan kelas yang sama di JavaScript?
Bagaimana cara memilih semua elemen dalam JavaScript?

Saat dipanggil pada objek

document.getElementsByClassName('test')

_1, dokumen lengkap dicari, termasuk simpul akar. Anda juga dapat memanggil

document.getElementsByClassName('test')

_2 pada elemen apa pun;

Peringatan. Ini adalah

document.getElementsByClassName('test')

3 hidup. Perubahan dalam DOM akan tercermin dalam larik saat perubahan terjadi. Jika elemen yang dipilih oleh larik ini tidak lagi memenuhi syarat untuk pemilih, elemen tersebut akan dihapus secara otomatis. Sadarilah ini untuk tujuan iterasi

getElementsByClassName(names)

_

document.getElementsByClassName('test')

_4

Sebuah string yang mewakili nama kelas untuk dicocokkan;

document.getElementsByClassName('test')

_3 langsung dari elemen yang ditemukan

Dapatkan semua elemen yang memiliki kelas 'test'

document.getElementsByClassName('test')

Dapatkan semua elemen yang memiliki kelas 'red' dan 'test'

document.getElementsByClassName('red test')

_

Dapatkan semua elemen yang memiliki kelas 'tes', di dalam elemen yang memiliki ID 'utama'

document.getElementById('main').getElementsByClassName('test')

_

Dapatkan elemen pertama dengan kelas 'tes', atau

document.getElementsByClassName('test')

6 jika tidak ada elemen yang cocok

document.getElementsByClassName('test')[0]

Kita juga bisa menggunakan metode Array. prototipe pada

document.getElementsByClassName('test')

3 apa pun dengan meneruskan

document.getElementsByClassName('test')

3 sebagai metode ini nilai ini. Di sini kita akan menemukan semua elemen div yang memiliki class 'test'

const testElements = document.getElementsByClassName('test');
const testDivs = Array.prototype.filter.call(
  testElements,
  (testElement) => testElement.nodeName === 'DIV',
);

Ini adalah metode operasi yang paling umum digunakan

<html lang="en">
  <body>
    <div id="parent-id">
      <p>hello world 1</p>
      <p class="test">hello world 2</p>
      <p>hello world 3</p>
      <p>hello world 4</p>
    </div>

    <script>
      const parentDOM = document.getElementById("parent-id");

      const test = parentDOM.getElementsByClassName("test"); // a list of matching elements, *not* the element itself
      console.log(test); // HTMLCollection[1]

      const testTarget = parentDOM.getElementsByClassName("test")[0]; // the first element, as we wanted
      console.log(testTarget); // <p class="test">hello world 2</p>
    </script>
  </body>
</html>

document.getElementsByClassName('test')

_9 bekerja sangat mirip dengan

document.getElementsByClassName('red test')

0 dan

document.getElementsByClassName('red test')

1. Hanya elemen dengan SEMUA nama kelas yang ditentukan yang akan dipilih

Bagaimana cara memilih banyak elemen dengan JavaScript kelas yang sama?

Untuk memilih beberapa elemen, Anda dapat menggunakan metode querySelectorAll() . Sama seperti metode querySelector(), Anda biasanya menggunakannya pada objek dokumen.

Bagaimana Anda memilih semua elemen dengan nama kelas yang sama?

Memilih Elemen Berdasarkan Nama Kelas . Koleksi yang dikembalikan adalah NodeList. The getElementsByClassName() method returns a collection of elements whose class name is the CSS class that you pass into the method. The return collection is a NodeList .

Bagaimana cara mendapatkan semua elemen dengan kelas yang sama di JavaScript?

Menggunakan metode JavaScript getElementByClassName() . GetElementsByClassName JavaScript digunakan untuk mendapatkan semua elemen yang termasuk dalam kelas tertentu.