{"id":17901,"date":"2023-07-18T08:33:19","date_gmt":"2023-07-18T08:33:19","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=17901"},"modified":"2023-07-18T08:33:19","modified_gmt":"2023-07-18T08:33:19","slug":"pengertian-fungsi-hingga-mengenal-elemen-dom","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom","title":{"rendered":"Pengertian, Fungsi, hingga Mengenal Elemen DOM"},"content":{"rendered":"

Jika anda sedang belajar JavaScript, maka anda tahu bahwa JavaScript bisa menyulap halaman website jadi lebih dinamis dan menarik. Namun tahukah anda, hal itu bisa terjadi lewat bantuan DOM. Tunggu dulu, apa itu DOM?<\/p>\n

Singkatnya, DOM JavaScript adalah menerjemahkan dokumen HTML menjadi sebuah halaman website interaktif. Di artikel ini, anda akan belajar apa itu DOM JavaScript, fungsinya, sampai cara memanipulasi HTML lewat JavaScript DOM.<\/p>\n

Pengertian DOM JavaScript<\/span><\/strong><\/h2>\n

DOM JavaScript<\/strong> adalah interface yang memungkinkan developer memanipulasi halaman web dari segi struktur, tampilan, dan kontennya. DOM adalah singkatan dari Document Object Model. Awalnya, website tersusun dari HTML dan CSS style yang statis. Hingga akhirnya muncul JavaScript. JavaScript adalah bahasa pemrograman untuk menyulap website jadi lebih dinamis.<\/p>\n

Browser membuat representasi dokumen yang biasa disebut dengan DOM (Document Object Model). Dokumen tersebut memungkinkan Javascript dapat mengakses serta memanipulasi elemen dan juga style situs web. Model ini diatur dalam struktur ojek serta mendefinisikan :<\/p>\n

    \n
  • Properties dan event elemen HTML<\/li>\n
  • Elemen HTML sebagai objek<\/li>\n
  • Method guna mengakses elemen HTML<\/li>\n<\/ul>\n

    Berikut kami sajikan script HTML dari halaman web sederhana :<\/p>\n

    \"\"<\/p>\n

    Objek dokumen merupakan model dokumen HTML yang berisi kumpulan fungsi serta atribut berupa objek berdasarkan elemen HTML yang dapat diilustrasikan dengan bentuk pohon seperti di bawah ini :<\/p>\n

    \"\"<\/p>\n

    Struktur seperti pohon ini akan memudahkan anda dalam memakai elemen tertentu. Elemen-elemen di atas disebut node. Tidak hanya elemen, namun atribut elemen dan teks juga memiliki node tersendiri, yaitu attribute-node untuk atribut elemen dan text- node untuk teks.<\/p>\n

    Fungsi DOM<\/span><\/strong><\/h2>\n

    DOM adalah salah satu bagian fundamental dari JavaScript yang sangat penting dalam pembuatan tampilan halaman web dimana interaktif serta dinamis. Fungsi DOM di JavaScript memungkinkan para developer untuk mengakses dan memanipulasi setiap elemen HTML dalam halaman website.<\/p>\n

    Beberapa fungsi DOM yang paling umum digunakan dalam JavaScript adalah sebagai berikut :<\/p>\n

    1. Menambahkan atau menghapus elemen HTML\u00a0<\/strong><\/h3>\n

    Dengan adanya fungsi ini, developer bisa menambahkan atau menghapus elemen HTML dalam halaman website secara dinamis, tergantung pada interaksi pengguna atau keadaan lainnya. Misalnya, ketika pengguna menekan tombol tertentu, kita dapat memanfaatkan penggunaan fungsi ini untuk menambahkan elemen HTML baru ke halaman web.<\/p>\n

    2. Mengubah isi alemen HTML<\/strong><\/h3>\n

    Fungsi DOM juga memungkinkan developer untuk mengubah isi dari elemen HTML. Misalnya, kita dapat mengubah teks yang terdapat pada elemen HTML, mengganti gambar atau video, dan lain-lain.<\/p>\n

    3. DOM dapat menangani Event\u00a0<\/strong><\/h3>\n

    Fungsi DOM memungkinkan developer demi menangani event dalam halaman web, seperti mengklik tombol, mengisi form, atau menggulir halaman. Ketika menangani event, DOM dapat membuat halaman web lebih interaktif serta responsif terhadap tindakan pengguna.<\/p>\n

    4.\u00a0Menambah atau menghapus CS<\/strong>S<\/h3>\n

    Fungsi DOM juga memungkinkan developer demi menambahkan atau menghapus\u00a0class\u00a0CSS dalam elemen HTML. Ketika menambahkan atau menghapus class CSS, kita dapat mengubah tampilan halaman web secara dinamis.<\/p>\n

    Secara keseluruhan, fungsi DOM di JavaScript sangatlah penting dalam pembuatan tampilan halaman web interaktif dan dinamis. Penggunaan fungsi DOM, developer dapat mengakses dan memanipulasi setiap elemen HTML pada halaman web, mengubah tampilan halaman web secara dinamis, menangani event, dan sebagainya.<\/p>\n

    Cara Mengambil Elemen HTML<\/span><\/strong><\/h2>\n

    Mengambil elemen HTML merupakan bagian penting di pengembangan web serta biasanya dilakukan dengan menggunakan JavaScript. Ada beberapa cara mengambil ini menggunakan JavaScript, di antaranya adalah :<\/p>\n

    1. Mengambil elemen dengan ID<\/span><\/strong><\/h3>\n

    Cara ini digunakan untuk mengambil elemen HTML dengan memanfaatkan atribut\u00a0id\u00a0dalam elemen tersebut. Kita dapat menggunakan fungsi\u00a0getElementById()\u00a0dengan menyertakan nilai\u00a0id\u00a0dimana ingin diambil. Fungsi ini akan mengembalikan objek dimana sesuai dengan nilai\u00a0id\u00a0yang diberikan.<\/p>\n

    Cara ini dilakukan melalui method\u00a0getElementByID().\u00a0<\/strong>Berikut contoh scriptnya :<\/p>\n

    \n
    \n
    \n\n\n\n
    \n
    \n
    var<\/code> title = document.getElementById(footer-title\u2019);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

    Dari situ, JavaScript DOM dapat mengambil elemen dengan ID\u00a0footer-title<\/strong>\u00a0lalu menyimpannya ke dalam sebuah variabel.<\/p>\n

    2. Mengambil elemen dengan class<\/span><\/strong><\/h3>\n

    Cara ini digunakan untuk mengambil elemen HTML dengan memanfaatkan tag elemen tersebut. Kita dapat menggunakan fungsi\u00a0getElementsByTagName()\u00a0ketika menyertakan nilai tag elemen dimana ingin diambil. Fungsi ini akan mengembalikan objek koleksi sesuai dengan tag elemen yang diberikan.<\/p>\n

    Anda bisa mendapatkan elemen dengan method\u00a0getElementsByClassName().\u00a0<\/strong>Ini dia contoh scriptnya :<\/p>\n

    \n
    \n
    \n\n\n\n
    \n
    \n
    var<\/code> items = document.getElementsByClassName(\u2018list-items\u2019);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

    Bedanya, di sini, DOM JavaScript bisa mengambil tidak hanya satu, tapi semua elemen di bawah Class\u00a0list-items.<\/strong><\/p>\n

    3. Mengambil elemen dengan nama tag<\/span><\/strong><\/h3>\n

    Anda juga bisa mendapat lebih dari satu elemen dengan method\u00a0getElementsByTagName().\u00a0<\/strong>Contohnya seperti ini :<\/p>\n

    \n
    \n
    \n\n\n\n
    \n
    \n
    var<\/code> listItems = document.getElementsByTagName(\u2018li\u2019);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

    Nantinya, JavaScript DOM akan mengambil semua elemen dengan Tag\u00a0li<\/strong>, untuk kemudian disimpan sebagai variabel.<\/p>\n

    4. Mengambil elemen dengan querySelector<\/span><\/strong><\/h3>\n

    Tidak hanya HTML, DOM JavaScript juga bisa anda manfaatkan untuk mengambil elemen CSS. Caranya, dengan method querySelector.\u00a0<\/strong>Berikut beberapa contoh scriptnya :<\/p>\n

      \n
    • Mengambil elemen CSS dengan ID<\/li>\n<\/ul>\n
      \n
      \n
      \n\n\n\n
      \n
      \n
      var<\/code> header = document.querySelector(\u2018<\/code>#footer)<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n
        \n
      • Mengambil elemen CSS dengan Class<\/li>\n<\/ul>\n
        \n
        \n
        \n\n\n\n
        \n
        \n
        var<\/code> items = document.querySelector(\u2018.list-items\u2019)<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n
          \n
        • Mengambil elemen CSS dengan Tag<\/li>\n<\/ul>\n
          \n
          \n
          \n\n\n\n
          \n
          \n
          var<\/code> headings = document.querySelector(\u2018h2\u2019);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n
            \n
          • Mengambil elemen CSS secara lebih spesifik<\/li>\n<\/ul>\n
            \n
            \n
            \n\n\n\n
            \n
            \n
            document.querySelector(\u201ch2.footer\u201d);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

            5. Mengambil elemen dengan querySelectorAll<\/span><\/strong><\/h3>\n

            querySelectorAll adalah alternatif method lain untuk mengambil elemen CSS. Method ini tidak ada bedanya dengan method sebelumnya. Ini dia contohnya :<\/p>\n

            \n
            \n
            \n\n\n\n
            \n
            \n
            var<\/code> heading = document.querySelectorAll(\u2018h1.heading\u2019);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

            Cara Mengubah Elemen HTML<\/span><\/strong><\/h2>\n

            Mengubah merupakan bagian yang penting dalam pengembangan web dan biasanya dilakukan dengan menggunakan JavaScript. JavaScript DOM memungkinkan anda mengubah struktur, isi konten, dan tampilan elemen HTML dengan beberapa metode berikut :<\/p>\n

            1. Mengubah konten HTML<\/span><\/strong><\/h3>\n

            Anda bisa mengubah konten HTML menggunakan properti\u00a0innerHTML.\u00a0<\/strong>Nah, properti ini dapat dikombinasikan dengan method\u00a0getElementbyID()\u00a0<\/strong>seperti berikut :<\/p>\n

            \n
            \n
            \n\n\n\n
            \n
            \n
            document.getElementById(\u201c<\/code>#header\u201d).innerHTML = \u201cHello World!\u201d;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

            Atau, bisa juga digabungkan dengan method\u00a0getElementsByTagName()\u00a0<\/strong>seperti ini :<\/p>\n

            \n
            \n
            \n\n\n\n
            \n
            \n
            document.getElementsByTagName(<\/code>\"div\"<\/code>).innerHTML = <\/code>\"<h2>Hello World!<\/h2>\"<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

            2. Mengubah value dari atribut<\/span><\/strong><\/h3>\n

            Tidak hanya sekadar mengubah konten, DOM JavaScript juga bisa anda pakai untuk mengganti value dari sebuah atribut. Contohnya seperti script di bawah :<\/p>\n

            \n
            \n
            \n\n\n\n
            \n
            \n
            document.getElementsByTag(\u201cimg\u201d).src = \u201cimage.jpg\u201d;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

            Dengan begitu, JavaScript DOM akan mengubah value dari atribut\u00a0img\u00a0<\/strong>menjadi image.jpg.<\/p>\n

            3. Mengubah style\/tampilan<\/span><\/strong><\/h3>\n

            JavaScript DOM ternyata juga berguna mengubah style elemen HTML maupun CSS. Namun untuk melakukannya, anda perlu mengubah properti style terlebih dahulu seperti ini :<\/p>\n

            \n
            \n
            \n\n\n\n
            \n
            \n
            document.getElementById(id).style.property = <\/code>new<\/code> style<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

            Baru setelahnya, anda bisa mengambil elemen tertentu untuk kemudian diubah style-nya. Contohnya di sini, kami mengubah style dari borderBottom :<\/strong><\/p>\n

            \n
            \n
            \n\n\n\n
            \n
            \n
            document.getElementsByTag(\u201ch2\u201d).style.borderBottom = \u201csolid 5px<\/code> #FFF\u201d;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

            Cara Menambah dan Menghapus Elemen HTML<\/span><\/strong><\/h2>\n

            Selain untuk keperluan mengambil dan mengubah elemen HTML, DOM JavaScript juga bisa anda pakai untuk menambah dan menghapus elemen. Begini caranya :<\/p>\n

            1. Cara menambah elemen<\/span><\/strong><\/h3>\n

            Untuk menambahkan elemen baru, anda cukup menggunakan method createElement()\u00a0<\/strong>seperti ini :<\/p>\n

            \n
            \n
            \n\n\n\n
            \n
            \n
            var<\/code> div = document.createElement(\u2018div\u2019);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

            Dari situ, JavaScript DOM akan membuat sebuah elemen bernama\u00a0div.\u00a0<\/strong>Setelahnya, anda bisa mengisi elemen tersebut dengan konten baru. Berikut contohnya :<\/p>\n\n\n\n
            \n
            1<\/div>\n
            2<\/div>\n
            3<\/div>\n<\/td>\n
            		\n
            \n
            var<\/code> newContent = document.createTextNode(<\/code>\"Hello World!\"<\/code>);<\/code><\/div>\n
            div.appendChild(newContent);<\/code><\/div>\n
            document.body.insertBefore(div, currentDiv);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

            2. Cara menghapus elemen<\/span><\/strong><\/h3>\n

            Sedangkan untuk menghapus elemen, anda bisa memakai method removeChild().\u00a0<\/strong>Berikut contohnya :<\/p>\n

            var<\/code> elem = document.querySelector('<\/code>#footer);<\/code><\/div>\n
            elem.parentNode.removeChild(elem);<\/code><\/div>\n

            3. Cara mengganti elemen<\/span><\/strong><\/h3>\n

            DOM JavaScript juga memungkinkan anda mengganti elemen yang sudah ada. Pertama-tama, anda perlu membuat elemen baru seperti ini :<\/p>\n

            var<\/code> div = document.querySelector(<\/code>'#div'<\/code>);<\/code><\/div>\n
            var<\/code> newDiv = document.createElement(\u2018div\u2019);<\/code><\/div>\n

            Kemudian, waktunya mengganti elemen di atas. Caranya dengan menulis script di bawah :<\/p>\n\n\n\n
            \n
            \n
            newDiv.innerHTML = <\/code>\"Hello World2\"<\/code>;<\/code><\/div>\n
            div.parentNode.replaceChild(newDiv, div);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

            4. Menulis elemen langsung ke HTML output stream<\/span><\/strong><\/h3>\n

            Salah satu keunikan DOM JavaScript adalah kemampuannya untuk menggabungkan HTML dan JavaScript ke dalam satu baris kode. Hal ini bisa dilakukan dengan method write()\u00a0<\/strong>seperti di bawah :<\/p>\n

            \n
            \n
            \n\n\n\n
            \n
            \n
            document.write(\u201c<h2>Hello World!<\/h2><p>This is an example text!<\/p>\u201d);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

            Selain dapat berisi teks seperti di atas, method\u00a0write()\u00a0<\/strong>ini juga bisa dipakai untuk menginput object, contohnya Date<\/strong> seperti ini :<\/p>\n

            \n
            \n
            \n\n\n\n
            \n
            \n
            document.write(Date());<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

            Event Handlers<\/span><\/strong><\/h2>\n

            \"\"<\/p>\n

            Selain untuk memanipulasi elemen HTML, DOM JavaScript juga bisa anda manfaatkan untuk menangani Event (Event Handling). Singkatnya, Event adalah reaksi halaman website ketika pengguna melakukan sesuatu, misalnya mengklik sebuah tombol.<\/p>\n

            Beberapa Event yang biasa ditemukan di website antara lain :<\/p>\n

              \n
            • Klik kiri atau kanan mouse<\/li>\n
            • Gerakan mouse<\/li>\n
            • Transisi loading halaman<\/li>\n
            • Perubahan atau transisi input form<\/li>\n<\/ul>\n

              1. Mensetup event<\/span><\/strong><\/h3>\n

              Anda bisa mensetup Event menggunakan properti\u00a0innerHTML<\/strong> seperti script berikut :<\/p>\n

              \n
              \n
              \n\n\n\n
              \n
              \n
              <button onclick=\u201d<\/code>this<\/code>.innerHTML = Thank you!\u2019\u201d>Please click!!<\/button><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

              Apabila pengguna mengklik button\u00a0Please click!<\/strong>, maka button tersebut akan memunculkan pesan\u00a0Thank you!<\/strong><\/p>\n

              2. Mengatur event listener<\/span><\/strong><\/h3>\n

              JavaScript DOM juga memungkinkan anda mengatur Event Listener. Dengan begitu, halaman web akan merespons Event yang dilakukan pengguna. Ini dia contoh scriptnya :<\/p>\n

              \n
              \n
              \n\n\n\n
              \n
              \n
              document.getElementById(\u201cbtn\u201d).addEventListener(<\/code>'mouseover'<\/code>, runEvent);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

              Ketika pengguna menjauhkan mouse dari tombol\u00a0btn,\u00a0<\/strong>maka halaman web secara otomatis akan merespons Event tersebut. Seperti apa bentuknya? Nah, hal ini bisa diatur lebih jauh sesuai kebutuhan si developer.<\/p>\n

              Node Relationship<\/span><\/strong><\/h2>\n

              \"\"<\/p>\n

              Di bagian apa itu DOM, anda tahu bahwa sebuah halaman web terdiri dari banyak elemen. Elemen tersebut ternyata saling berhubungan satu sama lain. Itulah yang disebut dengan Node Relationship.<\/p>\n

              Node Relationship ini menghubungkan tiap-tiap elemen layaknya pohon keluarga, seperti :<\/p>\n

                \n
              • parentNode\u00a0<\/strong>\u2013 Elemen Induk.<\/li>\n
              • childNodes\u00a0<\/strong>\u2013 Elemen anakan.<\/li>\n
              • firstChild\u00a0<\/strong>\u2013 Elemen anakan pertama.<\/li>\n
              • lastChild\u00a0<\/strong>\u2013 Elemen anakan terakhir.<\/li>\n
              • nextSibling\u00a0<\/strong>\u2013 Elemen saudara.<\/li>\n<\/ul>\n

                Sebagai contoh, anda bisa mendapatkan elemen induk dari heading\u00a0<\/strong>dengan script di bawah :<\/p>\n

                \n
                \n
                \n\n\n\n
                \n
                \n
                var<\/code> parent = document.getElementById(\u201cheading\u201d).parentNode<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n\n\n
                \n \n
                \n \n
                \n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n <\/div>\n \n
                \n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n
                \n \n\n
                <\/div>\n <\/div>\n <\/div>\n<\/div>\n \n\n
                \n Jadilah yang pertama untuk memberi nilai<\/span>\n <\/div>\n <\/div>\n","protected":false},"excerpt":{"rendered":"

                Jika anda sedang belajar JavaScript, maka anda tahu bahwa JavaScript bisa menyulap halaman website jadi lebih dinamis dan menarik. Namun tahukah anda, hal itu bisa terjadi lewat bantuan DOM. Tunggu dulu, apa itu DOM? Singkatnya, DOM JavaScript adalah menerjemahkan dokumen HTML menjadi sebuah halaman website interaktif. Di artikel ini, anda akan belajar apa itu DOM […]<\/p>\n","protected":false},"author":7,"featured_media":17907,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[3],"tags":[7251,7250],"class_list":["post-17901","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-dom-javascript","tag-dom-javascript-adalah"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM-1140x445.png",1140,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM-463x348.png",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM-300x188.png",300,188,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM.png",2400,1500,false]},"yoast_head":"\nPengertian, Fungsi, hingga Mengenal Elemen DOM - Hosteko Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pengertian, Fungsi, hingga Mengenal Elemen DOM - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Jika anda sedang belajar JavaScript, maka anda tahu bahwa JavaScript bisa menyulap halaman website jadi lebih dinamis dan menarik. Namun tahukah anda, hal itu bisa terjadi lewat bantuan DOM. Tunggu dulu, apa itu DOM? Singkatnya, DOM JavaScript adalah menerjemahkan dokumen HTML menjadi sebuah halaman website interaktif. Di artikel ini, anda akan belajar apa itu DOM […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-18T08:33:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2400\" \/>\n\t<meta property=\"og:image:height\" content=\"1500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Risa Y\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Risa Y\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom\"},\"author\":{\"name\":\"Risa Y\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\"},\"headline\":\"Pengertian, Fungsi, hingga Mengenal Elemen DOM\",\"datePublished\":\"2023-07-18T08:33:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom\"},\"wordCount\":1269,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM.png\",\"keywords\":[\"dom javascript\",\"dom javascript adalah\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom\",\"url\":\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom\",\"name\":\"Pengertian, Fungsi, hingga Mengenal Elemen DOM - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM.png\",\"datePublished\":\"2023-07-18T08:33:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM.png\",\"width\":2400,\"height\":1500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pengertian, Fungsi, hingga Mengenal Elemen DOM\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita & Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\",\"name\":\"Risa Y\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"caption\":\"Risa Y\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pengertian, Fungsi, hingga Mengenal Elemen DOM - Hosteko Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom","og_locale":"en_US","og_type":"article","og_title":"Pengertian, Fungsi, hingga Mengenal Elemen DOM - Hosteko Blog","og_description":"Jika anda sedang belajar JavaScript, maka anda tahu bahwa JavaScript bisa menyulap halaman website jadi lebih dinamis dan menarik. Namun tahukah anda, hal itu bisa terjadi lewat bantuan DOM. Tunggu dulu, apa itu DOM? Singkatnya, DOM JavaScript adalah menerjemahkan dokumen HTML menjadi sebuah halaman website interaktif. Di artikel ini, anda akan belajar apa itu DOM […]","og_url":"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom","og_site_name":"Hosteko Blog","article_published_time":"2023-07-18T08:33:19+00:00","og_image":[{"width":2400,"height":1500,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM.png","type":"image\/png"}],"author":"Risa Y","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Risa Y","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom"},"author":{"name":"Risa Y","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b"},"headline":"Pengertian, Fungsi, hingga Mengenal Elemen DOM","datePublished":"2023-07-18T08:33:19+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom"},"wordCount":1269,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM.png","keywords":["dom javascript","dom javascript adalah"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom","url":"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom","name":"Pengertian, Fungsi, hingga Mengenal Elemen DOM - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM.png","datePublished":"2023-07-18T08:33:19+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM.png","width":2400,"height":1500},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/pengertian-fungsi-hingga-mengenal-elemen-dom#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Pengertian, Fungsi, hingga Mengenal Elemen DOM"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita & Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b","name":"Risa Y","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","caption":"Risa Y"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/07\/Pengertian-Fungsi-hingga-Mengenal-Elemen-DOM.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/17901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=17901"}],"version-history":[{"count":2,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/17901\/revisions"}],"predecessor-version":[{"id":17908,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/17901\/revisions\/17908"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/17907"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=17901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=17901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=17901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}