Cara mendapatkan semua elemen dalam javascript

Question

Dalam tutorial singkat ini, kami menggunakan JavaScript untuk mendapatkan elemen berdasarkan nama kelas. Kami memecah konsep, menjelaskan kodenya, dan kemudian mendiskusikan batasan metode yang digunakan

Table of Contents Show

Daftar Isi - Javascript mendapatkan elemen berdasarkan kelas
Bagaimana cara kerja atribut kelas?
Menggunakan metode JavaScript getElementsByClassName()
Sintaksnya adalah sebagai berikut
Kode dan Penjelasan
Bagaimana cara mendapatkan semua elemen berdasarkan kelas dalam JavaScript?
Bagaimana cara mendapatkan semua elemen anak dalam JavaScript?
Bagaimana cara mendapatkan semua atribut?
Bagaimana cara mendapatkan semua ID dalam JavaScript?

Jika Anda berpengalaman dan berada di sini hanya untuk solusi, Anda dapat menggunakan tautan ini

Daftar Isi - Javascript mendapatkan elemen berdasarkan kelas

Bagaimana cara kerja atribut kelas?
Menggunakan metode JavaScript getElementsByClassName()
Keterbatasan dan Peringatan - JavaScript mendapatkan elemen berdasarkan kelas
Konsep Terkait Lainnya

Bagaimana cara kerja atribut kelas?

Atribut kelas adalah properti opsional dari elemen HTML. Atribut ini dapat digunakan pada elemen HTML apa pun. Setelah kelas dibuat, namanya dapat digunakan oleh CSS atau JavaScript untuk menerapkan gaya tertentu atau untuk melakukan tugas tertentu. Ini memastikan bahwa semua elemen milik kelas tertentu berperilaku dan tampil dengan cara yang sama

Kode di bawah ini adalah contoh atribut kelas

<h2 class="classname">Title</h2>

Menggunakan metode JavaScript getElementsByClassName()

GetElementsByClassName JavaScript digunakan untuk mendapatkan semua elemen yang termasuk dalam kelas tertentu. Ketika JavaScript mendapatkan elemen dengan metode nama kelas dipanggil pada objek dokumen, itu mencari dokumen lengkap, termasuk simpul akar, dan mengembalikan array yang berisi semua elemen

Sintaksnya adalah sebagai berikut

var elements = document.getElementsByClassName(name);

_

Di sini "nama" adalah nama kelas yang ingin Anda temukan dan "elemen" adalah variabel yang akan berisi larik elemen

Kode dan Penjelasan

Mari kita ambil contoh kode HTML

<header>
<nav>
        <ul id="freelancer">
            <li class="item">Name</li>
            <li class="item">Skills</li>
            <li class="item price">Cost</li>
            <li class="item">Projects</li>
        </ul>
</nav>
</header>

Sekarang karena kami bermaksud mencari elemen di bagian tertentu, pertama-tama kami mengidentifikasi bagian tersebut bersama dengan ID

Metode getElementsByClassName_ dari antarmuka

document.getElementsByClassName('test')

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

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 ________3______3 langsung. 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 'tes'

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 mendapatkan semua elemen berdasarkan kelas dalam JavaScript?

Sintaksnya adalah sebagai berikut. var elemen = dokumen. getElementsByClassName(name); Di sini “nama” adalah nama kelas yang ingin Anda temukan dan “elemen” adalah variabel yang berisi larik elemen.

Bagaimana cara mendapatkan semua elemen anak dalam JavaScript?

Elemen. anak-anak hanya menyertakan node elemen. Untuk mendapatkan semua simpul anak, termasuk simpul non-elemen seperti simpul teks dan komentar, gunakan Node. childNodes .

Bagaimana cara mendapatkan semua atribut?

Untuk mendapatkan semua atribut elemen DOM. Gunakan metode getAttributeNames() untuk mendapatkan larik nama atribut elemen . Gunakan metode pengurangan () untuk mengulangi array.