Elemen DOM HTML JavaScript
Halaman ini mengajarkan Anda cara menemukan dan mengakses elemen HTML di halaman HTML.
Menemukan Elemen HTML
Seringkali, dengan JavaScript, Anda ingin memanipulasi elemen HTML.
Untuk melakukannya, Anda harus menemukan elemennya terlebih dahulu. Ada beberapa cara untuk melakukannya:
- Menemukan elemen HTML dengan id
- Menemukan elemen HTML dengan nama tag
- Menemukan elemen HTML dengan nama kelas
- Menemukan elemen HTML dengan pemilih CSS
- Menemukan elemen HTML dengan koleksi objek HTML
Menemukan Elemen HTML dengan Id
Cara termudah untuk menemukan elemen HTML di DOM, adalah dengan menggunakan id elemen.
Contoh ini menemukan elemen dengan id="intro"
:
Contoh
const element = document.getElementById("intro");
Jika elemen ditemukan, metode akan mengembalikan elemen sebagai objek (dalam elemen).
Jika elemen tidak ditemukan, elemen akan berisi null
.
Menemukan Elemen HTML dengan Nama Tag
Contoh ini menemukan semua <p>
elemen:
Contoh
const element = document.getElementsByTagName("p");
Contoh ini menemukan elemen dengan id="main"
, dan kemudian menemukan semua <p>
elemen di dalam "main"
:
Contoh
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
Menemukan Elemen HTML berdasarkan Nama Kelas
Jika Anda ingin menemukan semua elemen HTML dengan nama kelas yang sama, gunakan
getElementsByClassName()
.
Contoh ini mengembalikan daftar semua elemen dengan class="intro"
.
Contoh
const x = document.getElementsByClassName("intro");
Menemukan Elemen HTML dengan Pemilih CSS
Jika Anda ingin menemukan semua elemen HTML yang cocok dengan pemilih CSS tertentu (id, nama kelas, tipe, atribut, nilai atribut, dll), gunakan querySelectorAll()
metode.
Contoh ini mengembalikan daftar semua <p>
elemen dengan class="intro"
.
Contoh
const x = document.querySelectorAll("p.intro");
Menemukan Elemen HTML dengan Koleksi Objek HTML
Contoh ini menemukan elemen formulir dengan id="frm1"
, dalam kumpulan formulir, dan menampilkan semua nilai elemen:
Contoh
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Objek HTML berikut (dan koleksi objek) juga dapat diakses: