Elemen JavaScript HTML DOM

Bab ini akan menjelaskan bagaimana cara mencari dan mengakses elemen HTML di halaman HTML.

Mencari elemen HTML

Biasanya, melalui JavaScript, Anda perlu mengoperasikan elemen HTML.

Untuk mencapai tujuannya, Anda harus menemukan elemen-elemen ini terlebih dahulu. Ada beberapa cara untuk menyelesaikan tugas ini:

  • Mencari elemen HTML melalui id
  • Mencari elemen HTML melalui nama tag
  • Mencari elemen HTML melalui nama kelas
  • Mencari elemen HTML melalui pemilih CSS
  • Mencari elemen HTML melalui koleksi objek HTML

Mencari elemen HTML melalui id

Paling mudah cara mencari elemen HTML di DOM adalah, menggunakan id elemen.

Contoh ini mencari elemen dengan id="intro":

Contoh

var myElement = document.getElementById("intro");

Coba Sendiri

Jika elemen ditemukan, metode ini akan mengembalikan elemen dalam bentuk objek (di myElement).

Jika elemen tidak ditemukan, myElement akan berisi null.

Mencari elemen HTML melalui nama tag

Contoh ini mencari semua <p> Elemen:

Contoh

var x = document.getElementsByTagName("p");

Coba Sendiri

Contoh ini mencari elemen dengan id="main", lalu mencari semua <p> Elemen:

Contoh

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

Coba Sendiri

Mencari elemen HTML melalui nama kelas

Jika Anda perlu menemukan semua elemen HTML yang memiliki nama kelas yang sama, gunakan getElementsByClassName().

Contoh ini mengembalikan daftar elemen yang memiliki class="intro":

Contoh

var x = document.getElementsByClassName("intro");

Coba Sendiri

Mencari elemen melalui nama kelas tidak relevan untuk Internet Explorer 8 dan versi yang lebih awal.

Mencari elemen HTML melalui pemilih CSS

Jika Anda perlu mencari semua elemen HTML yang cocok dengan pemilih CSS yang ditentukan (id, nama kelas, tipe, atribut, nilai atribut, dll), gunakan querySelectorAll() metode.

Contoh ini mengembalikan semua yang memiliki class="intro" <p> Daftar elemen:

Contoh

var x = document.querySelectorAll("p.intro");

Coba Sendiri

querySelectorAll() Tidak relevan untuk Internet Explorer 8 dan versi yang lebih awal.

Mencari objek HTML melalui pemilih objek HTML

Pada contoh ini, mencari elemen form dengan id="frm1" di dalam koleksi forms, dan menampilkan nilai semua elemen:

Contoh

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Coba Sendiri

Berikut ini adalah objek HTML (dan koleksi objek) yang dapat diakses: