getElementById

Pelajaran 3 dari 13 dalam kursus Metode DOM JavaScript di Coddy.

Fungsi getElementById() mengambil elemen pertama dengan atribut id yang cocok, contohnya:

const element = document.getElementById("elementId");

Kode di atas mengambil elemen dengan id elementId dan menyimpannya ke variabel bernama element.

Perhatikan awalan document, ini adalah DOM file HTML.

Setelah mengambil elemen, kamu bisa memanipulasinya menggunakan JavaScript!

Property pertama yang akan kita pelajari adalah textContent, yang menyimpan konten teks elemen. Kamu bisa mengubah teksnya seperti ini:

const element = document.getElementById("elementId");
element.textContent = "some text";

Setelah menjalankan kode ini, teks #elementId akan menjadi some text

Tantangan

Mudah

Kamu diberi kode HTML yang berisi heading dengan ID.

Hanya dengan JavaScript, ubah teks elemen ini menjadi “Hello!”:

Coba sendiri

<!DOCTYPE html>
<html>
    <body>
        <h1 id="heading">Welcome!</h1>
        <script src="script.js"></script>
    </body>
</html>

Semua pelajaran di Metode DOM JavaScript

1Pengantar

2Metode DOM I

3Method DOM II

Latihan sendiri: Playground Web