Close Menu

Manipulasi DOM dalam JavaScript

Table of Contents

Manipulasi DOM (Document Object Model) adalah salah satu fitur paling kuat dari JavaScript, yang memungkinkan pengembang untuk mengubah struktur, gaya, dan konten halaman web secara dinamis. DOM merepresentasikan dokumen HTML atau XML sebagai objek terstruktur yang dapat dimanipulasi oleh skrip.

Memilih Elemen #

Untuk memanipulasi elemen DOM, pertama-tama Anda perlu memilih elemen tersebut. Ada beberapa metode untuk memilih elemen dalam JavaScript:

getElementById: Memilih elemen berdasarkan ID-nya.

let element = document.getElementById("myId");

getElementsByClassName: Memilih elemen-elemen berdasarkan nama class-nya.

let elements = document.getElementsByClassName("myClass");

getElementsByTagName: Memilih elemen-elemen berdasarkan nama tag-nya.

let elements = document.getElementsByTagName("p");

querySelector: Memilih elemen pertama yang cocok dengan selektor CSS yang diberikan.

let element = document.querySelector(".myClass");

querySelectorAll: Memilih semua elemen yang cocok dengan selektor CSS yang diberikan.

let elements = document.querySelectorAll(".myClass");

Mengubah Konten #


Setelah elemen dipilih, Anda dapat mengubah kontennya menggunakan properti seperti innerText, innerHTML, dan textContent.

innerText: Mengatur atau mendapatkan teks dalam elemen (mengabaikan elemen HTML di dalamnya).

let element = document.getElementById("myId");
element.innerText = "Teks baru";

innerHTML: Mengatur atau mendapatkan HTML di dalam elemen.

let element = document.getElementById("myId");
element.innerHTML = "<b>Teks baru</b>";

textContent: Mengatur atau mendapatkan teks dalam elemen (termasuk elemen yang tersembunyi).

let element = document.getElementById("myId");
element.textContent = "Teks baru";

Mengubah Atribut #

Anda dapat mengubah atribut elemen menggunakan metode setAttribute dan getAttribute.

setAttribute: Mengatur nilai atribut elemen.

let element = document.getElementById("myId");
element.setAttribute("class", "newClass");

getAttribute: Mendapatkan nilai atribut elemen.

let element = document.getElementById("myId");
let className = element.getAttribute("class");

Mengubah Gaya (CSS) #

Anda dapat mengubah gaya elemen menggunakan properti style.

let element = document.getElementById("myId");
element.style.color = "red";
element.style.backgroundColor = "yellow";

Menambahkan dan Menghapus Elemen #

Anda dapat menambahkan dan menghapus elemen dari DOM menggunakan metode seperti appendChild, removeChild, dan createElement.

createElement: Membuat elemen HTML baru.

let newElement = document.createElement("div");
newElement.innerText = "Elemen baru";

appendChild: Menambahkan elemen baru sebagai anak dari elemen yang ada.

let parentElement = document.getElementById("parentId");
parentElement.appendChild(newElement);

removeChild: Menghapus elemen anak dari elemen yang ada.

let parentElement = document.getElementById("parentId");
let childElement = document.getElementById("childId");
parentElement.removeChild(childElement);

Event Handling #

Anda dapat menambahkan event listener ke elemen untuk menangani berbagai jenis peristiwa, seperti klik, mouseover, dan lainnya.

addEventListener: Menambahkan event listener ke elemen.

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("Tombol diklik!");
});

Contoh Manipulasi DOM #

Berikut adalah contoh yang menggabungkan berbagai teknik manipulasi DOM dalam satu program:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Manipulasi DOM</title>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
    <script>
        function manipulateDOM() {
            // Memilih elemen
            let heading = document.getElementById("heading");
            let paragraphs = document.getElementsByClassName("paragraph");
            let container = document.querySelector(".container");

            // Mengubah konten
            heading.innerText = "Judul Baru";

            // Mengubah atribut
            heading.setAttribute("class", "highlight");

            // Mengubah gaya
            for (let paragraph of paragraphs) {
                paragraph.style.color = "blue";
                paragraph.style.fontSize = "18px";
            }

            // Menambahkan elemen baru
            let newParagraph = document.createElement("p");
            newParagraph.innerText = "Ini adalah paragraf baru.";
            container.appendChild(newParagraph);

            // Menghapus elemen
            let oldParagraph = document.getElementById("oldParagraph");
            container.removeChild(oldParagraph);

            // Menangani peristiwa
            let button = document.getElementById("myButton");
            button.addEventListener("click", function() {
                alert("Tombol diklik!");
            });
        }
    </script>
</head>
<body onload="manipulateDOM()">
    <h1 id="heading">Judul Asli</h1>
    <div class="container">
        <p class="paragraph">Paragraf 1</p>
        <p class="paragraph" id="oldParagraph">Paragraf 2 (akan dihapus)</p>
    </div>
    <button id="myButton">Klik Saya</button>
</body>
</html>

Pada contoh di atas:

  • Elemen dipilih menggunakan berbagai metode pemilihan elemen.
  • Konten elemen diubah menggunakan innerText.
  • Atribut elemen diubah menggunakan setAttribute.
  • Gaya elemen diubah menggunakan properti style.
  • Elemen baru ditambahkan menggunakan createElement dan appendChild.
  • Elemen dihapus menggunakan removeChild.
  • Event listener ditambahkan ke elemen menggunakan addEventListener.

Dengan memahami dan menggunakan manipulasi DOM ini, Anda dapat membuat halaman web yang lebih dinamis dan interaktif. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.

What are your Feelings