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\nlet 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