1. \n

          Welcome<\/h1>\n

          This is a paragraph.<\/p>\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n

          Pokok DOM untuk perkara di atas akan kelihatan seperti ini:
          \n<\/p>\n\n

          Document\n └── html\n      └── body\n           ├── h1\n           └── p\n<\/pre>\n\n\n\n\n
          \n\n

          \n \n \n 2. Mengakses Elemen DOM<\/strong>\n<\/h3>\n\n

          Anda boleh mengakses elemen dalam DOM menggunakan beberapa kaedah: <\/p>\n\n

          \n \n \n Menggunakan getElementById<\/strong>\n<\/h4>\n\n\n\n
          let title = document.getElementById(\"title\");\nconsole.log(title); \/\/ Logs the element with ID \"title\"\n<\/pre>\n\n\n\n

          \n \n \n Menggunakan getElementsByClassName<\/strong>\n<\/h4>\n\n\n\n
          let items = document.getElementsByClassName(\"item\");\nconsole.log(items); \/\/ Logs all elements with class \"item\"\n<\/pre>\n\n\n\n

          \n \n \n Menggunakan querySelector dan querySelectorAll<\/strong>\n<\/h4>\n\n\n\n
          let firstItem = document.querySelector(\".item\"); \/\/ First element with class \"item\"\nlet allItems = document.querySelectorAll(\".item\"); \/\/ All elements with class \"item\"\n<\/pre>\n\n\n\n\n
          \n\n

          \n \n \n 3. Mengubah suai Elemen DOM<\/strong>\n<\/h3>\n\n

          \n \n \n Menukar Kandungan<\/strong>\n<\/h4>\n\n

          Anda boleh mengemas kini teks atau HTML di dalam elemen menggunakan: <\/p>\n\n

            \n
          • \ninnerTeks<\/strong>: Mengemas kini teks yang boleh dilihat.\n<\/li>\n
          • \ninnerHTML<\/strong>: Mengemas kini kandungan HTML.\n<\/li>\n<\/ul>\n\n
            let title = document.getElementById(\"title\");\ntitle.innerText = \"Updated Title\"; \/\/ Changes visible text\ntitle.innerHTML = \"Updated Title<\/strong>\"; \/\/ Adds HTML formatting\n<\/pre>\n\n\n\n

            \n \n \n Menukar Gaya<\/strong>\n<\/h4>\n\n

            Anda boleh mengubah suai secara langsung gaya CSS sesuatu elemen.
            \n<\/p>\n\n

            let title = document.getElementById(\"title\");\ntitle.style.color = \"blue\";\ntitle.style.fontSize = \"24px\";\n<\/pre>\n\n\n\n

            \n \n \n Menambah atau Mengalih Keluar Kelas<\/strong>\n<\/h4>\n\n\n\n
            let box = document.getElementById(\"box\");\nbox.classList.add(\"highlight\");  \/\/ Adds a class\nbox.classList.remove(\"highlight\"); \/\/ Removes a class\n<\/pre>\n\n\n\n\n
            \n\n

            \n \n \n 4. Mengendalikan Acara<\/strong>\n<\/h3>\n\n

            Acara membolehkan anda menjadikan halaman web anda interaktif. Berikut ialah beberapa jenis acara biasa dan cara mengendalikannya. <\/p>\n\n

            \n \n \n Pengendalian Acara Sebaris<\/strong>\n<\/h4>\n\n

            Dalam HTML anda:
            \n<\/p>\n\n