- DOM adalah reprentasi struktur dokumen HTML atau XML dalam bentuk pohon yang dapat diakses oleh bahasa pemograman seperti javascript
                - Object DOM di javascript bernama document
                    jika kita mengetik dokumen pada console javascript maka yang tampil adalah kode HTML

                    document.write("hello world");

                    // mengakses object head
                    document.head;
                    
                    // mengakses object body
                    document.body;
                    
                    // melihat panjang judul pada object title
                    document.title.length;
            

    
                - getElementById() // memilih elemen berdasarkan atribut id
                - getElementsByClassName() // memilih elemen berdasarkan atribut class
                - getElementsByName() // memilih elemen berdasarkan atribut name
                - getElementsByTagName() // memilih elemen berdasarkan nama tag
                - querySelector() // memilih elemen berdasarkan query
                - querySelectorAll() // memilih elemen berdasarkan semua elemen query

                // mengakses elemen spesifik
                    var div1 = document.getElementById("id");
                    var div2 = document.getElementsByClassName("class")[0];
                    var button = document.getElementsByName("name")[0];
                    var link = document.getElementsByTagName("a");
                    var pFirst = document.querySelector("p");
                    var Pall = document.querySelectorAll("p");

                // mengisi teks ke dalam elemen
                    div1.innerText =
                    "ini adalah elemen yang memilki id='id' dan telah diubah teksnya menggunakan div1.innerText";

                // memberikan CSS ke elemen
                    div1.style.backgroundColor = "red";
                    div2.style.backgroundColor = "blue";
                    button.style.border = "10px solid green";

                    for (let i = 0; i < link.length; i++) {
                    link[i].style.textDecoration = "none";
                    }

                    pFirst.style.backgroundColor = "blue";
                    for (let i = 0; i < Pall.length; i++) {
                    Pall[i].style.color = "red";
                    }
            

    
                var paragraf = document.getElementsByClassName("paragraf");
                console.log(paragraf); //=> array

                // membuat animasi warna menggunakan ser interval dan timeout
                setInterval(function () {
                    // menjalankan sesuatu secara berulang
                    paragraf[0].style.color = "red";
                    paragraf[1].style.color = "yellow";
                    paragraf[2].style.color = "green";

                    setTimeout(function () {
                        // menjalankan sesuatu setelah penundaan selesai
                        paragraf[0].style.color = "black";
                        paragraf[1].style.color = "black";
                        paragraf[2].style.color = "black";
                    }, 500);
                }, 1000);
            

    
                createElement("p"); // membuat elemen namun belum dapat tampil
                append() // untuk menambahkan elemen

                var div3 = document.getElementsByClassName("div3")[0];            
                - contoh penggunaan
                    var judul = document.createElement("h4");
                
                    // mengisi konten elemen
                    judul.textContent = "ini adalah isi dari elemen h4 yand ditambah peke DOM api";
                
                    // menambahkan elemen ke dalam tag body
                    document.body.append(judul); // akan tampil di paling bawah
                    div3.appendChild(judul); // akan tampil di dalam elemen div
                
                // atau menggunakan inner html
                    div3.innerHTML += "<h5>ini adalah h5 yang ditambahkan menggunakan div3.innerHTML += ''</h5>";
            

    
                // menghapus elemen
                    var removeP = document.getElementById("remove");
                    removeP.remove();

                    console.log(removeP);