Tutorial Javascript 12 : Tentang DOM Untuk Memanipulasi HTML

Tutorial Javascript 12 : Tentang DOM Untuk Memanipulasi HTML

Dalam era digital yang semakin berkembang pesat, pemahaman tentang bahasa pemrograman menjadi semakin penting. Salah satu bahasa pemrograman yang paling populer adalah JavaScript. Dikenal karena kemampuannya dalam memanipulasi halaman web secara dinamis, JavaScript menjadi landasan bagi banyak aplikasi web modern. Dalam tutorial ini, kita akan membahas salah satu konsep kunci dalam pengembangan web menggunakan JavaScript, yaitu Document Object Model (DOM). DOM memungkinkan pengembang untuk mengakses, memanipulasi, dan mengubah struktur dan konten HTML sebuah halaman web secara dinamis. Dengan memahami DOM, Anda akan dapat membuat interaksi yang dinamis dan responsif dalam aplikasi web Anda. Mari kita jelajahi konsep-konsep dasar DOM dan bagaimana Anda dapat menggunakannya untuk meningkatkan kemampuan pengembangan web Anda.

Apa Itu DOM ?

Saat Anda menjelajahi dunia pengembangan web, istilah "DOM API" mungkin sering kali muncul, tetapi apa sebenarnya yang dimaksud dengan itu? DOM API merupakan bagian integral dari proses pengembangan web modern. DOM, atau Document Object Model, adalah representasi struktur dokumen HTML dalam bentuk objek, yang memungkinkan manipulasi dan interaksi dengan konten halaman web secara dinamis. Dalam konteks pengembangan web, API mengacu pada kumpulan fungsi dan atribut yang disediakan oleh DOM untuk digunakan dalam program JavaScript.

Saat Anda memanfaatkan JavaScript untuk berinteraksi dengan halaman web, Anda sebenarnya berinteraksi dengan DOM. DOM API memberikan akses ke berbagai elemen HTML dan memungkinkan Anda untuk melakukan berbagai tindakan, seperti menambahkan, menghapus, atau mengubah elemen-elemen tersebut secara dinamis. Ini sangat berguna dalam membuat aplikasi web yang responsif dan dinamis.

Pentingnya memahami DOM API tidak hanya terbatas pada dokumen HTML. DOM juga berlaku untuk dokumen XML dan SVG. Ini berarti Anda dapat menggunakan konsep yang sama untuk memanipulasi struktur dan konten dokumen dalam format yang berbeda.

Selain itu, meskipun JavaScript seringkali diidentikan dengan DOM, namun konsep DOM juga ada di bahasa pemrograman lain. Artinya, pemahaman tentang DOM API tidak hanya berguna dalam konteks JavaScript, tetapi juga dalam bahasa pemrograman lain yang mendukung manipulasi DOM.

Dengan pemahaman yang kokoh tentang DOM API, Anda akan dapat mengembangkan aplikasi web yang lebih dinamis, interaktif, dan responsif. Ini adalah landasan penting dalam perjalanan Anda sebagai pengembang web yang sukses.

 

Baca Juga

• Tutor Javascript Objek Dan Cara Pembuatan
• Tutor Javascript Fungsi Dan Program

 

Cara Memakai DOM

Menggunakan DOM dalam JavaScript memungkinkan Anda untuk secara dinamis memanipulasi konten dan struktur halaman web. Objek DOM utama yang digunakan adalah `document`, yang merepresentasikan dokumen HTML. Melalui objek `document`, Anda dapat mengakses berbagai fungsi dan atribut untuk memanipulasi elemen HTML.

 

Sebagai contoh, fungsi `document.write()` digunakan untuk menambahkan teks atau elemen HTML ke dalam dokumen. Misalnya, dengan mengetikkan kode berikut di console JavaScript:

 

```javascript
document.write("Hello World");
document.write("<h2>Saya Sedang Belajar JavaScript</h2>");
```

 

Anda akan melihat hasilnya langsung muncul pada dokumen HTML. Fungsi `document.write()` memungkinkan Anda untuk secara langsung menambahkan konten ke halaman web tanpa perlu menyunting kode HTML secara manual.

Pemahaman tentang cara menggunakan objek `document` dan fungsi-fungsi seperti `document.write()` adalah langkah awal yang penting dalam memahami konsep DOM dan memanfaatkannya dalam pengembangan web. Dengan menguasai konsep ini, Anda dapat membuat aplikasi web yang lebih dinamis dan interaktif.

 

Akses Elemen Tertentu Pakai DOM

Mengakses elemen-elemen tertentu dalam dokumen HTML menggunakan DOM adalah langkah penting dalam pengembangan web. Objek `document` yang disediakan oleh DOM adalah representasi struktur dokumen HTML dalam bentuk objek, yang memungkinkan kita untuk berinteraksi dengan konten halaman web secara dinamis.

Dalam model pohon objek DOM, setiap elemen HTML direpresentasikan sebagai objek, dan hubungan antara elemen-elemen tersebut menciptakan struktur pohon yang memudahkan kita untuk mengakses dan memanipulasi elemen-elemen tertentu.

Contohnya, dengan mengetikkan kode berikut pada console JavaScript:

 

```javascript
// Mengakses objek head
var head = document.head;


// Mengakses objek body
var body = document.body;


// Melihat panjang judul pada objek title
var titleLength = document.title.length;
```

 

Kita dapat dengan mudah mengakses elemen `<head>` dan `<body>`, serta mendapatkan informasi tentang judul dokumen. Ini adalah contoh sederhana dari bagaimana DOM memungkinkan kita untuk berinteraksi dengan elemen-elemen dalam dokumen HTML.

Selain itu, terdapat berbagai metode yang disediakan oleh DOM untuk mengakses elemen-elemen dengan cara yang lebih spesifik. Misalnya, kita dapat menggunakan metode `getElementById()`, `getElementByName()`, `getElementByClassName()`, atau `getElementByTagName()` untuk memilih elemen berdasarkan id, nama, atau kelasnya.

 

```javascript
// Memilih elemen dengan id 'tutorial'
var tutorial = document.getElementById('tutorial');
```

 

Dengan menggunakan metode-metode ini, kita dapat memanipulasi elemen-elemen dalam dokumen HTML sesuai dengan kebutuhan aplikasi web kita. Hal ini memungkinkan kita untuk menciptakan pengalaman pengguna yang lebih dinamis dan interaktif.

Contoh yang lebih lengkap ini menunjukkan penerapan DOM dalam sebuah halaman web. Dalam contoh tersebut, kami memilih elemen berdasarkan ID, mengubah teksnya, dan memberikan gaya CSS.

 

```html
<!DOCTYPE html>
<html>
<head>
    <title>Memilih Elemen Berdasarkan ID</title>
</head>
<body>


    <!-- Elemen div yang akan kita pilih dari JS -->
    <div id="tutorial"></div>





    <script type="text/javascript">
        // Mengakses elemen tutorial
        var tutorial = document.getElementById("tutorial");


        // Mengisi teks ke dalam elemen
        tutorial.innerText = "Tutorial Javascript";


        // Memberikan gaya CSS ke elemen
        tutorial.style.backgroundColor = "gold";
        tutorial.style.padding = "10px";


    </script>


</body>
</html>
```

 

Dalam contoh di atas, kita menggunakan `document.getElementById()` untuk memilih elemen dengan ID "tutorial". Setelah memilihnya, kita membuatkan objek untuk elemen tersebut, yang memungkinkan kita untuk melakukan berbagai manipulasi, seperti mengubah teks dan gaya CSS.

Namun, seringkali kita dihadapkan pada situasi di mana kita perlu memilih lebih dari satu elemen. Misalnya, kita ingin memilih semua elemen dengan nama tag tertentu atau elemen-elemen dengan atribut class yang sama. Dalam kasus-kasus seperti itu, elemen-elemen yang dipilih akan menjadi sebuah array, yang berisi objek DOM dari elemen-elemen tersebut.

Penting untuk memahami bahwa ketika kita memilih lebih dari satu elemen, kita harus berurusan dengan array. Ini berarti kita dapat melakukan iterasi melalui array tersebut untuk melakukan operasi atau manipulasi pada setiap elemen yang dipilih secara individual.

Penerapan DOM seperti ini memungkinkan pengembang web untuk menciptakan halaman-halaman web yang dinamis dan responsif. Dengan menggunakan JavaScript untuk memanipulasi elemen-elemen HTML, pengguna dapat merasakan pengalaman yang lebih interaktif saat berinteraksi dengan aplikasi web.

Published on June 13, 2024
Last updated on June 03, 2026