{"id":893,"date":"2025-07-09T03:39:00","date_gmt":"2025-07-09T03:39:00","guid":{"rendered":"https:\/\/lspdigi.com\/blog\/?p=893"},"modified":"2025-07-09T03:39:01","modified_gmt":"2025-07-09T03:39:01","slug":"mengenal-struktur-dom-di-html","status":"publish","type":"post","link":"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/","title":{"rendered":"Mengenal Struktur DOM di HTML"},"content":{"rendered":"\n<p>Mengenal struktur DOM di HTML, DOM, atau Document Object Model, adalah representasi struktur dokumen HTML yang memungkinkan kita untuk memanipulasi konten, struktur, dan gaya halaman web menggunakan JavaScript. Bisa dibilang, DOM ini adalah jembatan antara HTML statis dan interaktivitas di website.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Baca Juga : <a href=\"https:\/\/lspdigi.com\/blog\/sertifikasi-web-developer\/\">Sertifikasi Web Developer<\/a><\/p>\n<\/blockquote>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#Kenapa_DOM_Penting_untuk_Dipahami\" >Kenapa DOM Penting untuk Dipahami?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#1_Struktur_Dasar_DOM\" >1. Struktur Dasar DOM<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#2_Node_Utama_dalam_DOM\" >2. Node Utama dalam DOM<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#Hubungan_Antar_Elemen_di_DOM\" >Hubungan Antar Elemen di DOM<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#Contoh_Struktur_DOM_Sederhana\" >Contoh Struktur DOM Sederhana<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#Cara_Mengakses_DOM_dengan_JavaScript\" >Cara Mengakses DOM dengan JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#Metode_Umum_untuk_Seleksi_DOM\" >Metode Umum untuk Seleksi DOM<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#Modifikasi_DOM_Secara_Dinamis\" >Modifikasi DOM Secara Dinamis<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#Contoh_Modifikasi_DOM\" >Contoh Modifikasi DOM<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#Kesimpulan\" >Kesimpulan<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kenapa_DOM_Penting_untuk_Dipahami\"><\/span>Kenapa DOM Penting untuk Dipahami?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Kalau kamu ingin menjadi web developer, memahami struktur DOM itu wajib hukumnya. Soalnya, semua interaksi dinamis seperti klik tombol, form, dan efek animasi\u2014terjadi lewat manipulasi DOM. Dengan kata lain, DOM adalah &#8220;wajah digital&#8221; dari halaman HTML yang bisa dibaca dan diubah oleh skrip.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Struktur_Dasar_DOM\"><\/span>1. Struktur Dasar DOM<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Setiap dokumen HTML diubah oleh browser menjadi struktur pohon (tree structure) yang disebut DOM Tree. Di dalam tree ini, setiap elemen HTML menjadi node yang saling terhubung seperti akar, cabang, dan daun pada pohon.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Node_Utama_dalam_DOM\"><\/span>2. Node Utama dalam DOM<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>DOM terdiri dari beberapa jenis node, tapi yang paling umum adalah:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Document Node: akar dari seluruh dokumen.<\/li>\n\n\n\n<li>Element Node: elemen seperti &lt;div&gt;, &lt;p&gt;, &lt;a&gt;.<\/li>\n\n\n\n<li>Text Node: isi teks di dalam elemen.<\/li>\n\n\n\n<li>Attribute Node: atribut seperti id, class, href.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hubungan_Antar_Elemen_di_DOM\"><\/span>Hubungan Antar Elemen di DOM<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Setiap elemen di DOM memiliki hubungan hierarki, seperti keluarga:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Parent (Induk): elemen yang membungkus elemen lain.<\/li>\n\n\n\n<li>Child (Anak): elemen yang dibungkus oleh elemen lain.<\/li>\n\n\n\n<li>Sibling (Saudara): elemen yang berada di level yang sama.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Contoh_Struktur_DOM_Sederhana\"><\/span>Contoh Struktur DOM Sederhana<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img alt=\"\" fetchpriority=\"high\" decoding=\"async\" width=\"465\" height=\"164\" src=\"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/Cuplikan-layar-2025-07-09-102649.png\" alt=\"\" class=\"wp-image-894\" srcset=\"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/Cuplikan-layar-2025-07-09-102649.png 465w, https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/Cuplikan-layar-2025-07-09-102649-300x106.png 300w\" sizes=\"(max-width: 465px) 100vw, 465px\" \/><\/figure>\n\n\n\n<p>Di sini, &lt;html&gt;&nbsp;adalah root, &lt;body&gt;&nbsp;adalah child dari &lt;html&gt;, dan &lt;h1&gt;&nbsp;serta &lt;p&gt;&nbsp;adalah sibling dalam &lt;body&gt;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cara_Mengakses_DOM_dengan_JavaScript\"><\/span>Cara Mengakses DOM dengan JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Setelah tahu strukturnya, kamu bisa mulai mengakses dan memanipulasi DOM dengan JavaScript. Browser menyediakan berbagai API untuk ini.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Metode_Umum_untuk_Seleksi_DOM\"><\/span>Metode Umum untuk Seleksi DOM<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>getElementById()<\/li>\n\n\n\n<li>getElementsByClassName()<\/li>\n\n\n\n<li>querySelector()<\/li>\n\n\n\n<li>querySelectorAll()<\/li>\n<\/ul>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<p>document.getElementById(&#8220;judul&#8221;).innerText = &#8220;Judul Baru&#8221;;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Modifikasi_DOM_Secara_Dinamis\"><\/span>Modifikasi DOM Secara Dinamis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Setelah elemen berhasil diakses, kamu bisa mengubah konten, menambahkan elemen, atau menghapus elemen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Contoh_Modifikasi_DOM\"><\/span>Contoh Modifikasi DOM<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>const p = document.createElement(&#8220;p&#8221;);<\/li>\n\n\n\n<li>p.textContent = &#8220;Paragraf baru!&#8221;;<\/li>\n\n\n\n<li>document.body.appendChild(p);<\/li>\n<\/ul>\n\n\n\n<p>Dengan kode di atas, kamu membuat node &lt;p&gt;&nbsp;baru dan menambahkannya ke dalam body&nbsp;halaman.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kesimpulan\"><\/span>Kesimpulan<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Mengenal struktur DOM di HTML adalah langkah awal yang penting untuk membuat website menjadi interaktif. Dengan memahami hierarki dan node-node dalam DOM, kamu bisa mulai memanipulasi tampilan dan perilaku halaman dengan JavaScript. DOM bukan sekadar teori ini adalah fondasi utama dalam pengembangan web modern. Yuk, eksplorasi lebih jauh dengan latihan langsung!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mengenal struktur DOM di HTML, DOM, atau Document Object Model, adalah representasi struktur dokumen HTML yang memungkinkan kita untuk memanipulasi konten, struktur, dan gaya halaman web menggunakan JavaScript. Bisa dibilang, DOM ini adalah jembatan antara HTML statis dan interaktivitas di website. Baca Juga : Sertifikasi Web Developer Kenapa DOM Penting untuk Dipahami? Kalau kamu ingin [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":901,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[38],"tags":[208,209],"class_list":["post-893","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-marketing","tag-dom","tag-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mengenal Struktur DOM di HTML - Sertifikasi Informasi Teknologi Pilihan<\/title>\n<meta name=\"description\" content=\"Mengenal struktur DOM di HTML adalah langkah awal yang penting untuk membuat website menjadi interaktif.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mengenal Struktur DOM di HTML - Sertifikasi Informasi Teknologi Pilihan\" \/>\n<meta property=\"og:description\" content=\"Mengenal struktur DOM di HTML adalah langkah awal yang penting untuk membuat website menjadi interaktif.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Sertifikasi Informasi Teknologi Pilihan\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-09T03:39:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-09T03:39:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-12-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/\",\"url\":\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/\",\"name\":\"Mengenal Struktur DOM di HTML - Sertifikasi Informasi Teknologi Pilihan\",\"isPartOf\":{\"@id\":\"https:\/\/lspdigi.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-12-1.png\",\"datePublished\":\"2025-07-09T03:39:00+00:00\",\"dateModified\":\"2025-07-09T03:39:01+00:00\",\"author\":{\"@id\":\"https:\/\/lspdigi.com\/blog\/#\/schema\/person\/c607fd673d76234c85d88a2f08363911\"},\"description\":\"Mengenal struktur DOM di HTML adalah langkah awal yang penting untuk membuat website menjadi interaktif.\",\"breadcrumb\":{\"@id\":\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#primaryimage\",\"url\":\"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-12-1.png\",\"contentUrl\":\"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-12-1.png\",\"width\":600,\"height\":400,\"caption\":\"Mengenal Struktur DOM di HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/lspdigi.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mengenal Struktur DOM di HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/lspdigi.com\/blog\/#website\",\"url\":\"https:\/\/lspdigi.com\/blog\/\",\"name\":\"Sertifikasi Informasi Teknologi Pilihan\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/lspdigi.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/lspdigi.com\/blog\/#\/schema\/person\/c607fd673d76234c85d88a2f08363911\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lspdigi.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/lspdigi.com\"],\"url\":\"https:\/\/lspdigi.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mengenal Struktur DOM di HTML - Sertifikasi Informasi Teknologi Pilihan","description":"Mengenal struktur DOM di HTML adalah langkah awal yang penting untuk membuat website menjadi interaktif.","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:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/","og_locale":"en_US","og_type":"article","og_title":"Mengenal Struktur DOM di HTML - Sertifikasi Informasi Teknologi Pilihan","og_description":"Mengenal struktur DOM di HTML adalah langkah awal yang penting untuk membuat website menjadi interaktif.","og_url":"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/","og_site_name":"Sertifikasi Informasi Teknologi Pilihan","article_published_time":"2025-07-09T03:39:00+00:00","article_modified_time":"2025-07-09T03:39:01+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-12-1.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/","url":"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/","name":"Mengenal Struktur DOM di HTML - Sertifikasi Informasi Teknologi Pilihan","isPartOf":{"@id":"https:\/\/lspdigi.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#primaryimage"},"image":{"@id":"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#primaryimage"},"thumbnailUrl":"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-12-1.png","datePublished":"2025-07-09T03:39:00+00:00","dateModified":"2025-07-09T03:39:01+00:00","author":{"@id":"https:\/\/lspdigi.com\/blog\/#\/schema\/person\/c607fd673d76234c85d88a2f08363911"},"description":"Mengenal struktur DOM di HTML adalah langkah awal yang penting untuk membuat website menjadi interaktif.","breadcrumb":{"@id":"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#primaryimage","url":"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-12-1.png","contentUrl":"https:\/\/lspdigi.com\/blog\/wp-content\/uploads\/2025\/07\/LSPDIGI-12-1.png","width":600,"height":400,"caption":"Mengenal Struktur DOM di HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/lspdigi.com\/blog\/mengenal-struktur-dom-di-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lspdigi.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mengenal Struktur DOM di HTML"}]},{"@type":"WebSite","@id":"https:\/\/lspdigi.com\/blog\/#website","url":"https:\/\/lspdigi.com\/blog\/","name":"Sertifikasi Informasi Teknologi Pilihan","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/lspdigi.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/lspdigi.com\/blog\/#\/schema\/person\/c607fd673d76234c85d88a2f08363911","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lspdigi.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/lspdigi.com"],"url":"https:\/\/lspdigi.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/posts\/893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/comments?post=893"}],"version-history":[{"count":1,"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/posts\/893\/revisions"}],"predecessor-version":[{"id":902,"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/posts\/893\/revisions\/902"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/media\/901"}],"wp:attachment":[{"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/media?parent=893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/categories?post=893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lspdigi.com\/blog\/wp-json\/wp\/v2\/tags?post=893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}