Menemukan Elemen HTML Dengan DOM Javascript

Untuk menemukan elemen pada HTML, sebenarnya ada banyak cara yang dapat dilakukan oleh javascript, disini saya mempersingkatnya saja agar lebih gampang kamu pahami. Cara menemukan DOM Javascript antara lain sebagai berikut:

Property/Method

Penjelasan

document.getElementById(id)

Menemukan elemen HTML dengan id

document.getElementsByClassName(name)

Menemukan beberapa elemen HTML dengan nama class

document.getElementsByTagName(name)

Menemukan beberapa elemen HTML dengan nama tag

document.querySelectorAll(selector)

Menemukan beberapa elemen HTML dengan selector CSS

Mungkin kamu tidak memperhatikan detail kecil dari Property/Method diatas, salah satu detail kecil yang tidak kamu perhatikan adalah pada getElement, karena untuk getElementById() tidak menggunakan s pada kata element karena atribut id hanya dapat digunakan oleh 1 elemen. Sedangkan yang lainya menggunakan s dan data elemen yang dihasilkan berupa data array. Untuk memilih salah satu elemen yang dihasilkan dapat menggunakan index layaknya menggunakan array.

Contoh Menemukan Elemen HTML Dengan DOM Javascript, perhatikan lah code dibawah ini:

<!DOCTYPE html>
<html>
<head>
      <title>Belajar Javascript</title>
</head>
<body>
      <p id="pesan"></p>
</body>
<script>
       document.getElementById("pesan").innerHTML = "Hello World!";
</script>
</html>

Hasil dari code diatas sangatlah sederhana, nah pada tag <p> itu tidak memiliki isi teks sama sekali cuman ada atribut id=”pesan” saja, jadi jika kamu menjalankan code diatas maka akan tampil teks “HELLO WORLD”, teks “Hello World” itu diisi oleh javascript karena javascript sudah berhasil menemukan atribut id pesan.

Sederhananya jika didalam bahasa Indonesia kesannya akan seperti ini : Hallo javascript, tolong carikan saya emelen HTML dengan atribut id yang isinya adalah pesan, jika kamu berhasil menemukannya maka tampilkan “Hello World” pada elemen HTML tersebut.

PreviousDocumentNextMengubah Elemen HTML Dengan DOM Javascript

Last updated