HTML DOM: Output dan Cara Membuat Codenya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 22, 2020

DOM HTML memungkinkan JavaScript untuk mengubah konten elemen HTML.

Section Artikel

1 Mengubah Output Stream HTML
2 Mengubah Konten HTML
3 Mengubah Nilai Atribut

Mengubah Output Stream HTML

JavaScript dapat membuat konten HTML dinamis.

Dalam JavaScript, document.write() dapat digunakan untuk menulis langsung ke output stream pada HTML.

Contoh:

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

Jangan pernah menggunakan document.write() setelah dokumen dimuat. Hal ini akan menyebabkan menimpa dokumen.

Mengubah Konten HTML

Cara termudah untuk mengubah konten elemen HTML adalah dengan menggunakan properti innerHTML.

Untuk mengubah konten elemen HTML, gunakan sintaks ini:

document.getElementById(id).innerHTML = new HTML

Contoh ini mengubah konten elemen <p>.

<!DOCTYPE html>
<html>
<body>

<h2> JavaScript dapat Mengubah HTML </h2>
<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

<p> Paragraf di atas diubah oleh sebuah skrip. </p>
</body>
</html>

Penjelasan Contoh:

Dokumen HTML di atas berisi elemen dengan id = “p1”
Kami menggunakan DOM HTML untuk mendapatkan elemen dengan id = “p1”
Sebuah JavaScript mengubah konten (innerHTML) dari elemen itu menjadi “New Text!”

Contoh dibawah ini cara mengubah konten elemen.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Heading lama</h1>

<script>
var element = document.getElementById("id01");
element.innerHTML = "Heading Baru";
</script>

<p> JavaScript mengubah "Heading Lama" menjadi "Heading Baru". </p>
</body>
</html>

Penjelasan Contoh:

Dokumen HTML di atas berisi elemen dengan id = “id01”
Kami menggunakan DOM HTML untuk mendapatkan elemen dengan id = “id01”
JavaScript mengubah konten (innerHTML) elemen itu menjadi “Heading Baru”

Mengubah Nilai Atribut

Untuk mengubah nilai atribut HTML, gunakan sintaks ini:

document.getElementById(id).attribute = new value

Contoh ini mengubah nilai atribut src dari elemen.

Contoh:

<!DOCTYPE html>
<html>
<body>

<img id="image" src="https://dosenit.com/wp-content/uploads/2020/10/pic_bulboff.gif" width="160" height="120">

<script>
document.getElementById("image").src = "https://dosenit.com/wp-content/uploads/2020/10/pic_bulbon.gif";
</script>

<p> Gambar aslinya adalah pic_bulboff.gif, tetapi skrip mengubahnya menjadi pic_bulbon.gif </p>
</body>
</html>

Penjelasan Contoh:

Dokumen HTML di atas berisi elemen dengan id = “myImage”
Kami menggunakan DOM HTML untuk mendapatkan elemen dengan id = “myImage”
JavaScript mengubah atribut src dari elemen itu dari “pic_bulboff.gif” menjadi “pic_bulbon.gif”

javascript