Tutorial JavaScript Part#9: Manupulasi DOM Pada Javascript

Tutorial DOM Manipulation pada JavaScript

Halo, para pembaca setia! Apakah Anda ingin membuat blog Blogger lebih interaktif dengan JavaScript? Pada artikel ini, kita akan membahas DOM Manipulation, teknik penting dalam JavaScript untuk mengubah tampilan dan perilaku halaman web. Kita akan mempelajari cara memilih elemen HTML, mengubah konten dan gaya, serta menambahkan event listener untuk membuat blog Anda lebih dinamis. Yuk, simak tutorialnya!

Apa Itu DOM?

DOM (Document Object Model) adalah representasi struktur HTML dalam bentuk objek yang dapat dimanipulasi menggunakan JavaScript. Dengan DOM, kita bisa mengakses, mengubah, atau menambahkan elemen HTML secara dinamis. hal yang paling sering di gunakan untuk manipulasi pada javascript biasanya di berikan atau di simpan dalam event salah satu nya event onclick

1.Event Listener: onclick dan addEventListener

Event listener memungkinkan kita menjalankan fungsi ketika terjadi interaksi pengguna, seperti klik, hover, atau input. dan bisa juga digunakan untuk memanggil sebuah prosedure atau function yang sudah kita buat untuk manipulasi DOM.

untuk mencoba event onclik, kita dapat mencoba menampilakn alert atau pesan saat button di klik.

script.js

<!DOCTYPE html>
      <html>
           <head>
                <title>Dasar JavaScript</title>
           </head>
           <body>
                <h4>Belajar JavaScript Dom manipulasi</h4>
                <div id="content">
                     <h3 id="blog-title">TUTORIAL Javascript</h3>
                     <button id="alert-btn">tampilakn pesan</button>
                </div>
                <script>
                     const alertButton = document.getElementById("alert-btn");

                     // Menggunakan onclick
                     alertButton.onclick = function () {
                          alert("Tombol diklik!");
                     };

                     // Atau menggunakan addEventListener
                     alertButton.addEventListener("click", function () {
                          alert("Tombol diklik!");
                     });
                </script>
           </body>
      </html>

Penjelasan Kode:

Kedua cara (onclick dan addEventListener) memiliki fungsi yang sama.
alert() menampilkan pesan pop-up.

Hasil Running Kode:
Saat tombol diklik, muncul pop-up dengan pesan "Tombol diklik!".

2.Mengubah Text pada Tag html

pada step pertama kita sudah berhasil membuat event onclick pada button dan menampilakn alert pesan. selanjutnya kita akan coba mengubah text pada element html nya.

buat lagi satu button, dan letakan di bawah button seblumnya dan beri id berbeda dengan button sebelumnya.

script.js

<button id="ubahTitel">Ubah Judul</button>

script.js

// letakan dibawah koding sebelumnya
               const myButton = document.querySelector("#ubahTitel");
               myButton.addEventListener("click", function () {
                    // Mengakses elemen judul blog
                    const blogTitle = document.getElementById("blog-title");
                    // Mengubah teks judul
                    blogTitle.textContent = "Selamat Datang di Blog Saya!";
               });

Penjelasan Kode:

document.getElementById("blog-title") mencari elemen dengan ID blog-title.
textContent digunakan untuk mengubah teks di dalam elemen tersebut.

Hasil Running Kode:
Judul blog yang awalnya "Blog Saya" akan berubah menjadi "Selamat Datang di Blog Saya!".

3.Memilih Elemen dengan getElementById dan querySelector

dalam proses manupulasi DOM pada javascript Ada beberapa cara untuk memilih elemen HTML:

document.getElementById("id") → Memilih berdasarkan ID.
document.querySelector(".class") → Memilih elemen pertama yang cocok dengan selector CSS.

Kita akan membuat tombol berubah warna saat diklik. buat atau tambah kan satu botton lagi dan beri id dengan change-color-btn

<button id="change-color-btn">Ubah warna</button>

script.js

 const ubahwarna = document.querySelector("#change-color-btn");

               ubahwarna.addEventListener("click", function () {
                    ubahwarna.style.backgroundColor = "blue";
                    ubahwarna.style.color = "white";
               });

Penjelasan Kode:

querySelector("#change-color-btn") memilih tombol dengan ID change-color-btn.
addEventListener("click", function() { ... }) menambahkan aksi saat tombol diklik.
style.backgroundColor dan style.color mengubah warna latar dan teks tombol.

Hasil Running Kode:
Tombol akan berubah menjadi biru dengan teks putih saat diklik.

4.Mengubah Konten dan Gaya dengan JavaScript

Selain teks, kita juga bisa mengubah style CSS elemen menggunakan JavaScript.
Kita akan membuat fungsi untuk menyembunyikan sebuah div. dalam coding kita sebelumnya terdapat tag div dengan id content.

kita akan coba menghilangkan tag div ini atau membuat tag dib ini hide saat button di klik. buat lagi satu buah button dan beri id hide-btn

script.js

const hideButton = document.getElementById("hide-btn");
const contentDiv = document.getElementById("content");

hideButton.addEventListener("click", function() {
  contentDiv.style.display = "none";
});

Penjelasan Kode:

style.display = "none" menyembunyikan elemen sepenuhnya.

Hasil Running Kode:
Saat tombol diklik, div dengan ID content akan hilang dari tampilan.

Kesimpulan

Dengan memahami DOM Manipulation, kita bisa membuat sebuah halam jadi lebih interactiv Mulai dari mengubah teks, gaya, hingga menambahkan event listener, semua bisa dilakukan dengan JavaScript, sampai disini tutorial manipulasi DOM pada tutirla javascript part 9 ini. tunggu tutorial berikut nya tentang javascript dalam blog ini.

jangan lupa bagikan jika tutorial ini bermanfaat dan berbagi ilmu pengetahuan dalam dunia programming.

jika Punya pertanyaan? atau saran mengenai tutorial dalam materi ini bisa Tinggalkan komentar di bawah, ya!

Semoga Bermanfaat..

Happy Coding ..!!!

AK Studio

Tutorial JavaScript Part#9: Manupulasi DOM Pada Javascript

Tutorial DOM Manipulation pada JavaScript

Apa Itu DOM?

1.Event Listener: onclick dan addEventListener

3.Memilih Elemen dengan getElementById dan querySelector

4.Mengubah Konten dan Gaya dengan JavaScript

Kesimpulan

Incoming Search Terms (Tag):

0 Response to "Tutorial JavaScript Part#9: Manupulasi DOM Pada Javascript"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel