• <del id="u6e22"><code id="u6e22"></code></del>
    <nav id="u6e22"><dd id="u6e22"></dd></nav>
    \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

        <fieldset id="suwsq"><tr id="suwsq"></tr></fieldset>