Dalam tutorial ini, kita akan belajar cara menggunakan JavaScript getElementById() untuk memilih elemen dengan id yang telah ditentukan.
Pengantar metode JavaScript getElementById()
Metode document.getElementById() mengembalikan objek Elemen yang mewakili elemen HTML dengan id yang cocok dengan string yang ditentukan.
Jika dokumen tidak memiliki elemen dengan id yang ditentukan, document.getElementById() mengembalikan null.
Karena id suatu elemen unik dalam dokumen HTML, document.getElementById() adalah cara cepat untuk mengakses suatu elemen.
Berbeda dengan metode querySelector(), getElementById() hanya tersedia pada objek dokumen, bukan elemen lainnya.
Berikut ini menunjukkan sintaks metode getElementById() :
elemen const = document.getElementById(id);Dalam sintaks ini, id adalah string yang mewakili id dari elemen yang akan dipilih. Id peka terhadap huruf besar-kecil. Misalnya, ‘root’ dan ‘Root’ sangat berbeda.
Id bersifat unik dalam dokumen HTML. Namun, jika dokumen HTML memiliki banyak elemen dengan id yang sama, metode document.getElementById() akan mengembalikan elemen pertama yang ditemuinya.
Contoh metode JavaScript getElementById()
Misalkan Anda memiliki dokumen HTML berikut :
<html>
<head>
<title>Metode JavaScript getElementById()</title>
</head>
<body>
<p id="pesan">Sebuah paragraf</p>
</body>
</html>Dokumen berisi elemen <p> yang memiliki atribut id dengan nilai pesan :
const p = document.getElementById('pesan');
console.log(p);Gabungkan seluruh kode :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="pesan">Sebuah paragraf</p>
<script>
const p = document.getElementById('pesan');
console.log(p);
</script>
</body>
</html>Hasil :
Setelah memilih elemen, Anda dapat menambahkan gaya ke elemen, memanipulasi atributnya, dan beralih ke elemen induk dan anak.
Kesimpulan
- document.getElementById() mengembalikan elemen DOM yang ditentukan oleh id atau null jika tidak ditemukan elemen yang cocok.
- Jika beberapa elemen memiliki id yang sama, meskipun tidak valid, getElementById() mengembalikan elemen pertama yang ditemuinya.
0 Komentar