Akademi Manajemen Informatika

DOM (Document Object Model) pada Javascript & 7 Propertinya

Sebagai pengembang web Niscaya nya Anda sudah Enggak asing Kembali dengan istilah DOM atau Document Object Model. DOM merupakan konsep dimana Mempunyai penggunaan dalam membantu pengembangan suatu web. Terlebih Kembali Apabila pada pembuatan tampilan Bergerak serta interaktif. 

Misalnya, Apabila kita Ingin menambahkan elemen HTML baru ke dalam halaman website Ketika pengguna melakukan suatu tindakan, DOM dapat memberikan Anda akses Kepada dapat menggunakan JavaScript Kepada Membikin baru dan menambahkannya ke dalam struktur DOM pada halaman website.

Kepada lebih lanjut mengetahui tentang fungsi dari DOM di javascript ini, mari simak artikel di Dasar ini!

Apa Itu DOM 

Dom
DOM Document Object Model (Foto: Pexels)

DOM atau Document Object Model adalah konsep Esensial di pengembangan website serta sangat Krusial dalam pemrograman JavaScript.

DOM adalah representasi dari Arsip dimana dibuka dalam browser, yang memungkinkan JavaScript memanipulasi konten dan struktur halaman web tersebut.

DOM adalah model objek dimana merepresentasikan setiap elemen Arsip atau XML sebagai objek dimana dapat diakses oleh JavaScript.

Setiap elemen diwakili oleh node dalam struktur hierarkis, serta setiap node Mempunyai properti dan metode yang dapat dimanipulasi melalui JavaScript.

DOM juga memungkinkan penggunaan event listener serta handler demi menangani interaksi pengguna, seperti mengklik tombol atau memasukkan data dalam form.

Dengan menggunakan event listener serta handler, kita dapat Membikin halaman website dimana lebih interaktif serta responsif terhadap tindakan pengguna.

Secara keseluruhan, DOM adalah konsep Krusial dalam pengembangan website dan sangat erat kaitannya dengan JavaScript.

Kepada memahami DOM serta bagaimana JavaScript dapat memanipulasinya, kita dapat Membikin tampilan laman yang lebih Bergerak, interaktif, serta responsif terhadap interaksi pengguna.

Fungsi DOM

DOM adalah salah satu bagian Esensial dari JavaScript yang sangat Krusial dalam pembuatan tampilan halaman web dimana interaktif serta Bergerak.

Fungsi DOM di JavaScript memungkinkan para developer Kepada mengakses dan memanipulasi setiap elemen HTML dalam halaman website.

Beberapa fungsi DOM yang paling Lumrah digunakan dalam JavaScript adalah sebagai berikut:

1. Menambahkan atau menghapus elemen HTML 

Dengan adanya fungsi ini, developer Dapat menambahkan atau menghapus elemen HTML dalam halaman website secara Bergerak, tergantung pada interaksi pengguna atau keadaan lainnya.

Misalnya, ketika pengguna menekan tombol tertentu, kita dapat memanfaatkan penggunaan fungsi ini Kepada menambahkan elemen HTML baru ke halaman web.

2. Mengubah isi Elemen HTML

Fungsi DOM juga memungkinkan developer Kepada mengubah isi dari elemen HTML. Misalnya, kita dapat mengubah teks yang terdapat pada elemen HTML, mengganti gambar atau video, dan lain-lain.

3. DOM dapat menangani Event 

Fungsi DOM memungkinkan developer demi menangani event dalam halaman web, seperti mengklik tombol, mengisi form, atau menggulir halaman. Ketika menangani event, DOM dapat Membikin halaman web lebih interaktif serta responsif terhadap tindakan pengguna.

4. Menambah atau Menghapus CSS

Fungsi DOM juga memungkinkan developer demi menambahkan atau menghapus class CSS dalam elemen HTML. Ketika menambahkan atau menghapus class CSS, kita dapat mengubah tampilan halaman web secara Bergerak.

Secara keseluruhan, fungsi DOM di JavaScript sangatlah Krusial dalam pembuatan tampilan halaman web interaktif dan Bergerak.

Penggunaan fungsi DOM, developer dapat mengakses dan memanipulasi setiap elemen HTML pada halaman web, mengubah tampilan halaman web secara Bergerak, menangani event, dan sebagainya.

Baca Juga: Laravel: Framework Para Developer yang Terbaik di Kelasnya!

DOM, Langkah Mengambil Elemen HTML 

Mengambil elemen HTML merupakan bagian Krusial di pengembangan web serta biasanya dilakukan dengan menggunakan JavaScript. Terdapat beberapa Langkah mengambil ini menggunakan JavaScript, di antaranya adalah:

READ  Definisi, Fitur, Langkah Menggunakan, dan Manfaatnya

1. Menggunakan getElementById()

Langkah ini digunakan Kepada mengambil elemen HTML dengan memanfaatkan atribut id dalam elemen tersebut. Kita dapat menggunakan fungsi getElementById() dengan menyertakan nilai id dimana Ingin diambil. Fungsi ini akan mengembalikan objek dimana sesuai dengan nilai id yang diberikan.

2. Menggunakan getElementsByClassName()

Langkah ini digunakan Kepada mengambilnya ketika memanfaatkan atribut class tersebut. Kita dapat menggunakan fungsi getElementsByClassName() dengan menyertakan nilai class yang Ingin diambil. Fungsi ini akan mengembalikan objek koleksi elemen HTML dimana sesuai dengan nilai class yang diberikan.

3. Menggunakan getElementsByTagName()

Langkah ini digunakan Kepada mengambil elemen HTML dengan memanfaatkan tag elemen tersebut. Kita dapat menggunakan fungsi getElementsByTagName() ketika menyertakan nilai tag elemen dimana Ingin diambil. Fungsi ini akan mengembalikan objek koleksi sesuai dengan tag elemen yang diberikan.

4. Menggunakan querySelector()

Langkah ini digunakan Kepada mengambil elemen HTML menggunakan pemanfaatan selector CSS. Kita dapat menggunakan fungsi querySelector() bersamaan menyertakan selector CSS yang sesuai ke yang Ingin diambil. Fungsi ini akan mengembalikan objek pertama yang sesuai dengan selector CSS yang diberikan.

Ketika melakukan pengembangan web, pengambilan elemen HTML sangatlah Krusial serta sering digunakan Kepada melakukan manipulasi pada elemen tersebut.

Ketika menerapkan salah satu Langkah di atas, developer dapat mengambil elemen HTML yang dibutuhkan dan melakukan berbagai manipulasi seperti mengubah isi, menambahkan atau menghapusnya, mengatur tampilan, dan sebagainya.

Baca Juga: Mengulas Penggunaan HTML dan Langkah Kerjanya pada Web Development

Properti pada DOM

DOM (Document Object Model) dalam JavaScript Mempunyai berbagai properti yang memungkinkan pengembang Kepada mengakses dan memanipulasi elemen HTML dan struktur Arsip web. Berikut adalah beberapa properti DOM yang Lumrah digunakan dalam JavaScript:

1. Document

  • document.documentElement: Mengacu pada elemen root dari Arsip, biasanya elemen .
  • document.body: Mengacu pada elemen dari Arsip.
  • document.head: Mengacu pada elemen dari Arsip.
  • document.title: Mengacu pada teks judul dari Arsip (isi dari elemen </code>).</li> </ul> <h3 class="wp-block-heading"><strong>2. Elements</strong></h3> <ul class="wp-block-list"> <li><strong><code>element.id</code></strong>: Mengembalikan atau menetapkan nilai atribut <code>id</code> dari elemen.</li> <li><strong><code>element.className</code></strong>: Mengembalikan atau menetapkan nilai atribut <code>class</code> dari elemen.</li> <li><strong><code>element.tagName</code></strong>: Mengembalikan nama tag dari elemen, seperti <code>DIV</code>, <code>SPAN</code>, dll.</li> <li><strong><code>element.innerHTML</code></strong>: Mengembalikan atau menetapkan HTML konten dari elemen.</li> <li><strong><code>element.textContent</code></strong>: Mengembalikan atau menetapkan teks konten dari elemen, tanpa markup HTML.</li> <li><strong><code>element.style</code></strong>: Mengakses atau menetapkan gaya CSS inline Kepada elemen.</li> <li><strong><code>element.attributes</code></strong>: Mengembalikan koleksi atribut dari elemen.</li> </ul> <h3 class="wp-block-heading"><strong>3. Node</strong></h3> <ul class="wp-block-list"> <li><strong><code>node.parentNode</code></strong>: Mengembalikan node induk dari elemen atau node Ketika ini.</li> <li><strong><code>node.childNodes</code></strong>: Mengembalikan koleksi dari Sekalian node anak, termasuk node teks, dari node Ketika ini.</li> <li><strong><code>node.firstChild</code></strong>: Mengembalikan node anak pertama dari node Ketika ini.</li> <li><strong><code>node.lastChild</code></strong>: Mengembalikan node anak terakhir dari node Ketika ini.</li> <li><strong><code>node.previousSibling</code></strong>: Mengembalikan node Kerabat sebelumnya dari node Ketika ini.</li> <li><strong><code>node.nextSibling</code></strong>: Mengembalikan node Kerabat berikutnya dari node Ketika ini.</li> </ul> <h3 class="wp-block-heading"><strong>4. Attribute</strong></h3> <ul class="wp-block-list"> <li><strong><code>element.getAttribute(attributeName)</code></strong>: Mengembalikan nilai dari atribut yang ditentukan.</li> <li><strong><code>element.setAttribute(attributeName, value)</code></strong>: Menetapkan nilai baru Kepada atribut yang ditentukan.</li> <li><strong><code>element.removeAttribute(attributeName)</code></strong>: Menghapus atribut yang ditentukan dari elemen.</li> </ul> <h3 class="wp-block-heading"><strong>5. Events</strong></h3> <ul class="wp-block-list"> <li><strong><code>element.onclick</code></strong>: Menetapkan fungsi yang akan dijalankan ketika elemen diklik.</li> <li><strong><code>element.onmouseover</code></strong>: Menetapkan fungsi yang akan dijalankan ketika kursor mouse berada di atas elemen.</li> <li><strong><code>element.onmouseout</code></strong>: Menetapkan fungsi yang akan dijalankan ketika kursor mouse meninggalkan elemen.</li> <li><strong><code>element.onkeyup</code></strong>: Menetapkan fungsi yang akan dijalankan ketika tombol dilepaskan pada elemen input.</li> </ul> <div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://sandidharma.ac.id/mengenal-sales-force-beserta-peran-tugas-dan-2-contohnya/" target="_blank" rel="dofollow" class="u2f3d780829d96ff1f3939bc5e375374e" data-wpel-link="internal"><!-- INLINE RELATED POSTS 2/3 //--><style> .u2f3d780829d96ff1f3939bc5e375374e { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u2f3d780829d96ff1f3939bc5e375374e:active, .u2f3d780829d96ff1f3939bc5e375374e:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u2f3d780829d96ff1f3939bc5e375374e { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u2f3d780829d96ff1f3939bc5e375374e .ctaText { font-weight:bold; color:#464646; text-decoration:none; font-size: 16px; } .u2f3d780829d96ff1f3939bc5e375374e .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u2f3d780829d96ff1f3939bc5e375374e:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">READ</span>  <span class="postTitle">Mengenal Sales Force beserta Peran, Tugas, dan 2 Contohnya</span></div></a></div><h3 class="wp-block-heading"><strong>6. Form Elements</strong></h3> <h3 class="wp-block-heading"><strong>7. Window</strong></h3> <ul class="wp-block-list"> <li><strong><code>window.innerWidth</code></strong>: Mengembalikan lebar viewport jendela.</li> <li><strong><code>window.innerHeight</code></strong>: Mengembalikan tinggi viewport jendela.</li> <li><strong><code>window.location</code></strong>: Mengembalikan objek Letak yang berisi informasi tentang URL Ketika ini.</li> <li><strong><code>window.history</code></strong>: Mengembalikan objek yang memungkinkan manipulasi sejarah penelusuran pengguna.</li> </ul> <p>Properti-properti ini memungkinkan pengembang Kepada melakukan berbagai operasi pada halaman web, mulai dari manipulasi elemen hingga pengendalian respons terhadap interaksi pengguna.</p> <h2 class="wp-block-heading"><strong>Langkah Mengubah Elemen HTML </strong></h2> <p>Mengubah merupakan bagian yang Krusial dalam pengembangan web dan biasanya dilakukan dengan menggunakan JavaScript. Terdapat beberapa Langkah Kepada mengubah menggunakan JavaScript, di antaranya adalah:</p> <h3 class="wp-block-heading">1. <strong>Mengubah isi elemen HTM</strong>L</h3> <p>Langkah ini digunakan Kepada mengubah isi dari elemen, misalnya mengubah teks pada elemen paragraf atau mengganti gambar pada elemen <em>img</em>. Kita dapat menggunakan fungsi innerHTML dalam objek elemen HTML Ingin diubah. Fungsi ini memungkinkan kita demi mengubah isi elemen dengan kode baru.</p> <h3 class="wp-block-heading"><strong>2. Mengubah nilai atribut elemen HTML</strong></h3> <p>Dalam DOM, Langkah ini digunakan demi mengubah nilai dari atribut, misalnya mengubah nilai atribut<em> src </em>pada elemen<em> img</em>. Kita dapat menggunakan properti atau metode yang sesuai dalam objek elemen HTML yang Ingin diubah. Properti tersebut bergantung pada atribut yang Ingin diubah.</p> <h3 class="wp-block-heading"><strong>3. Menambahkan atau menghapus elemen HTML</strong></h3> <p>Pada DOM Langkah ini digunakan demi menambahkan atau menghapus dalam halaman web secara Bergerak. Ini tentu tergantung pada interaksi pengguna atau keadaan lainnya. Kita dapat menggunakan metode <em>createElement()</em> demi Membikin elemen baru serta metode <em>appendChild()</em> atau <em>insertBefore()</em> Kepada menambahkan elemen tersebut ke dalam Arsip.</p> <h3 class="wp-block-heading"><strong>4. Mengatur tampilan elemen HTML</strong></h3> <p>Langkah ini digunakan Kepada mengatur tampilan elemen HTML, misalnya mengubah ukuran, Corak, atau posisi elemen. Kita dapat menggunakan properti style pada objek yang Ingin diubah. Properti ini memungkinkan kita Kepada mengatur properti CSS dari elemen HTML secara langsung melalui JavaScript.</p> <p>Dalam pengembangan, pengubahan sangatlah Krusial dan sering digunakan Kepada melakukan manipulasi pada elemen tersebut. Dengan menggunakan salah satu Langkah di atas, developer dapat mengubah nya sesuai dengan kebutuhan, memperbaharui isi atau tampilan halaman secara Bergerak, dan meningkatkan interaktivitas dari halaman web.</p> <p><strong>Baca Juga</strong>: React JS adalah: 10 Fitur, Kelebihan, Tutorial, Bedanya Dengan React Native</p> <h2 class="wp-block-heading"><strong>Langkah Kerja DOM pada Javascript</strong></h2> <p>DOM (Document Object Model) adalah antarmuka pemrograman yang memungkinkan JavaScript Kepada berinteraksi dengan HTML dan XML dalam Arsip web.</p> <p>Ketika sebuah halaman web dimuat oleh browser, struktur HTML-nya diubah menjadi model objek yang dapat dimanipulasi oleh JavaScript.</p> <p>Memungkinkan pengembang Kepada mengubah tampilan, struktur, dan konten halaman secara Bergerak. Berikut adalah penjelasan tentang Langkah kerja DOM pada JavaScript:</p> <h3 class="wp-block-heading"><strong>1. Membikin Model Objek dari Arsip HTML</strong></h3> <p>Ketika sebuah halaman web dimuat, browser membaca kode HTML dan mengubahnya menjadi struktur DOM. Struktur DOM adalah representasi berbasis objek dari Arsip tersebut, di mana setiap elemen HTML, atribut, dan teks dianggap sebagai objek yang dapat diakses dan dimanipulasi. Struktur ini berbentuk seperti pohon (tree), di mana:</p> <ul class="wp-block-list"> <li><strong>Root</strong>: Elemen root biasanya adalah <code/>.</li> <li><strong>Nodes</strong>: Setiap elemen HTML, atribut, dan teks adalah node di dalam pohon ini.</li> <li><strong>Branches</strong>: Elemen-elemen HTML dapat Mempunyai elemen anak (child elements), membentuk cabang dalam pohon DOM.</li> </ul> <h3 class="wp-block-heading"><strong>2. Akses Elemen dengan JavaScript</strong></h3> <p>JavaScript dapat mengakses elemen-elemen dalam struktur DOM menggunakan berbagai metode yang disediakan oleh objek <code>document</code>. Misalnya:</p> <ul class="wp-block-list"> <li><strong><code>document.getElementById(id)</code></strong>: Mengakses elemen berdasarkan nilai <code>id</code> yang Spesial.</li> <li><strong><code>document.getElementsByClassName(className)</code></strong>: Mengakses Sekalian elemen dengan kelas tertentu.</li> <li><strong><code>document.querySelector(selector)</code></strong>: Mengakses elemen pertama yang cocok dengan selektor CSS yang diberikan.</li> <li><strong><code>document.querySelectorAll(selector)</code></strong>: Mengakses Sekalian elemen yang cocok dengan selektor CSS yang diberikan.</li> </ul> <div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://sandidharma.ac.id/pengertian-fungsi-jenis-dan-5-contohnya/" target="_blank" rel="dofollow" class="uc23d00d5055a852c96722e3d49145b24" data-wpel-link="internal"><!-- INLINE RELATED POSTS 3/3 //--><style> .uc23d00d5055a852c96722e3d49145b24 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .uc23d00d5055a852c96722e3d49145b24:active, .uc23d00d5055a852c96722e3d49145b24:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .uc23d00d5055a852c96722e3d49145b24 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .uc23d00d5055a852c96722e3d49145b24 .ctaText { font-weight:bold; color:#464646; text-decoration:none; font-size: 16px; } .uc23d00d5055a852c96722e3d49145b24 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .uc23d00d5055a852c96722e3d49145b24:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">READ</span>  <span class="postTitle">Pengertian, Fungsi, Jenis, dan 5 Contohnya</span></div></a></div><h3 class="wp-block-heading"><strong>3. Manipulasi Konten dan Atribut</strong></h3> <p>Setelah elemen diakses, JavaScript dapat mengubah konten atau atributnya. Misalnya:</p> <ul class="wp-block-list"> <li><strong><code>element.innerHTML</code></strong>: Digunakan Kepada mengubah atau mendapatkan HTML yang terkandung dalam suatu elemen.</li> <li><strong><code>element.textContent</code></strong>: Digunakan Kepada mengubah atau mendapatkan teks dalam suatu elemen.</li> <li><strong><code>element.setAttribute(attribute, value)</code></strong>: Menetapkan atau mengubah nilai atribut pada elemen.</li> </ul> <h3 class="wp-block-heading"><strong>4. Manipulasi Struktur Arsip</strong></h3> <p>DOM memungkinkan JavaScript Kepada menambahkan, menghapus, atau memodifikasi elemen-elemen di dalam Arsip:</p> <ul class="wp-block-list"> <li><strong><code>element.appendChild(newElement)</code></strong>: Menambahkan elemen baru sebagai anak terakhir dari elemen yang Terdapat.</li> <li><strong><code>element.removeChild(childElement)</code></strong>: Menghapus elemen anak dari elemen induknya.</li> <li><strong><code>element.replaceChild(newElement, oldElement)</code></strong>: Menggantikan elemen anak yang Terdapat dengan elemen baru.</li> </ul> <h3 class="wp-block-heading"><strong>5. Penanganan Peristiwa (Events)</strong></h3> <p>JavaScript dapat merespons interaksi pengguna dengan menambahkan event listeners pada elemen DOM. Misalnya:</p> <ul class="wp-block-list"> <li><strong><code>element.addEventListener('click', function)</code></strong>: Menambahkan fungsi yang akan dijalankan ketika elemen diklik.</li> <li><strong><code>element.onmouseover = function</code></strong>: Menetapkan fungsi yang akan dijalankan ketika kursor mouse berada di atas elemen.</li> </ul> <h3 class="wp-block-heading"><strong>6. Pembaruan Bergerak</strong></h3> <p>Salah satu kekuatan Esensial DOM adalah kemampuannya Kepada memperbarui halaman web secara Bergerak tanpa harus memuat ulang seluruh halaman.</p> <p>Ini memungkinkan pengalaman pengguna yang lebih interaktif dan responsif. Misalnya sederhana adalah mengubah teks atau gaya CSS elemen berdasarkan aksi pengguna seperti klik atau hover.</p> <h3 class="wp-block-heading"><strong>7. Rendering Ulang (Reflow & Repaint)</strong></h3> <p>Ketika DOM dimodifikasi, browser mungkin perlu merender ulang halaman (reflow dan repaint). Reflow terjadi ketika perubahan pada DOM mempengaruhi tata letak halaman, sementara repaint terjadi ketika perubahan hanya mempengaruhi gaya visual, seperti Corak.</p> <p>Proses ini memungkinkan halaman Kepada mencerminkan perubahan yang dilakukan melalui JavaScript secara real-time.</p> <h2 class="wp-block-heading"><strong>Misalnya Langkah Menambah dan Menghapus Elemen HTML </strong></h2> <p>Menambah dan menghapus pada halaman website merupakan bagian Krusial dalam pengembangan website dan biasanya dilakukan dengan menggunakan JavaScript. Terdapat beberapa Langkah Kepada menambah serta menghapus elemen HTML menggunakan JavaScript, di antaranya adalah:</p> <h3 class="wp-block-heading"><strong>1. Menambahkan elemen HTML</strong></h3> <p>Langkah ini digunakan Kepada menambahkan elemen HTML baru pada halaman website. Kita dapat menggunakan metode<em> createElement()</em> demi Membikin baru dan metode <em>appendChild()</em> atau<em> insertBefore()</em> demi menambahkan tersebut ke dalam Arsip.</p> <figure class="wp-block-image"><img data-lazyloaded="1" width="1366" height="768" decoding="async" src="https://lh4.googleusercontent.com/5zQWS--ZeqmLTn-nckvfnoIscLfjjof7bUoWLShooQebR518u5neFF6EKkw9XB3WeCcaGWH6mcaIx_zWp6iP7x8_MDd9jDK04cOUZZ6AFkp1PvtjGztiBcILZC4CdowK2qdB6GpAE8xHAe0ftfoMRwI" alt="Cara menambah dan menghapus elemen html " title="Dom (Document Object Model) Pada Javascript &Amp; 7 Propertinya"/></figure> <p>Pada Misalnya di atas, kita Membikin<em> div</em> baru dan menambahkannya dengan id “<em>paren</em>t”.</p> <h3 class="wp-block-heading"><strong>2. Menghapus elemen HTML</strong></h3> <p>Langkah ini digunakan demi menghapus elemen HTML dari halaman web. Kita dapat menggunakan metode <em>removeChild()</em> pada objek elemen HTML yang Ingin dihapus.</p> <figure class="wp-block-image"><img data-lazyloaded="1" width="1366" height="768" decoding="async" src="https://lh6.googleusercontent.com/sw0KtjHlomdaeKR8B7N_G6Iha7-8mIdXyKyIzcxWeFsOmjF-XCUAMwmSTWcwLX4mMn37t24D_p6eLDxUcKg_lQzooHOnHI2wEo0bYEmt6OeRRi7mHr-1zz1K_UneTQx4Xw9eJSwlE1ryAfBi2YLQVKc" alt="Cara menambah dan menghapus elemen html " title="Dom (Document Object Model) Pada Javascript &Amp; 7 Propertinya"/></figure> <p>Pada Misalnya di atas, kita mengambil elemen dengan id “<em>element-to-remove</em>” dan menghapusnya dari Arsip.</p> <p>Ketika engembangan web, menambah dan menghapus elemen HTML sangatlah Krusial dan sering digunakan Kepada Membikin halaman web yang lebih Bergerak dan interaktif. </p> <p>Dengan menggunakan Langkah di atas, developer Dapat menambah atau menghapus elemen HTML sesuai dengan kebutuhan, memperbaharui isi atau tampilan halaman web secara Bergerak, dan meningkatkan interaktivitas dari halaman web.</p> <p><strong>Baca juga: </strong>Framework JavaScript: Pengertian, Kelebihan, dan Framework Terbaik</p> <p>Demikian artikel mengenai DOM dalam Javascript. Sandi Dharma menyediakan layanan pengembangan aplikasi berbasis produk dan solusi sesuai dengan berbagai kustomisasi menyesuikan dengen segmen bisnis Anda. Kepada selengkapnya, silakan cek <strong>halaman produk dan solusi kami di sini</strong>.</p> </div> </div> </main> <footer itemtype="https://schema.org/WPFooter" itemscope="itemscope" id="colophon" role="contentinfo"> <div class='footer-width-fixer'> <div data-elementor-type="wp-post" data-elementor-id="32" class="elementor elementor-32"> <section class="elementor-section elementor-top-section elementor-element elementor-element-724569a0 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="724569a0" data-element_type="section" id="xs_footer_13"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-1891f8db" data-id="1891f8db" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-4036c238 elementor-widget__width-initial elementor-widget elementor-widget-image" data-id="4036c238" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <a href="https://wpmet.com/plugin/elementskit/" data-wpel-link="external" rel="nofollow external noopener noreferrer"> <img width="512" height="512" src="https://sandidharma.ac.id/wp-content/uploads/2024/08/cropped-stempel.png" class="attachment-full size-full wp-image-19" alt="akademi manajemen informatika komputer sandi dharma" srcset="https://sandidharma.ac.id/wp-content/uploads/2024/08/cropped-stempel.png 512w, https://sandidharma.ac.id/wp-content/uploads/2024/08/cropped-stempel-300x300.png 300w, https://sandidharma.ac.id/wp-content/uploads/2024/08/cropped-stempel-150x150.png 150w, https://sandidharma.ac.id/wp-content/uploads/2024/08/cropped-stempel-270x270.png 270w, https://sandidharma.ac.id/wp-content/uploads/2024/08/cropped-stempel-192x192.png 192w, https://sandidharma.ac.id/wp-content/uploads/2024/08/cropped-stempel-180x180.png 180w, https://sandidharma.ac.id/wp-content/uploads/2024/08/cropped-stempel-32x32.png 32w" sizes="(max-width: 512px) 100vw, 512px" /> </a> </div> </div> <div class="elementor-element elementor-element-4ddc4b6f elementor-widget elementor-widget-text-editor" data-id="4ddc4b6f" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Akademi Manajemen Informatika Komputer Sandi Dharma siap menjadi wadah untuk menciptakan mahasiwa yang berskill dan dan berbudi pekerti.</p> </div> </div> <div class="elementor-element elementor-element-6d14a435 elementor-widget elementor-widget-elementskit-social-media" data-id="6d14a435" data-element_type="widget" data-widget_type="elementskit-social-media.default"> <div class="elementor-widget-container"> <div class="ekit-wid-con" > <ul class="ekit_social_media"> <li class="elementor-repeater-item-da8f4de"> <a href="#" aria-label="Facebook" class="facebook"> <i aria-hidden="true" class="icon icon-facebook"></i> </a> </li> <li class="elementor-repeater-item-8f886e8"> <a href="#" aria-label="LinkedIn" class="linkedin"> <i aria-hidden="true" class="icon icon-linkedin"></i> </a> </li> <li class="elementor-repeater-item-c8596be"> <a href="#" aria-label="Instagram" class="1"> <i aria-hidden="true" class="icon icon-instagram-1"></i> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-4688accd" data-id="4688accd" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-489e21b0 elementor-widget elementor-widget-heading" data-id="489e21b0" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Useful Links</h2> </div> </div> <section class="elementor-section elementor-inner-section elementor-element elementor-element-31c5f80b elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="31c5f80b" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-24696e72" data-id="24696e72" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-390d9405 elementor-widget__width-initial elementor-widget elementor-widget-elementskit-page-list" data-id="390d9405" data-element_type="widget" data-widget_type="elementskit-page-list.default"> <div class="elementor-widget-container"> <div class="ekit-wid-con" > <div class="elementor-icon-list-items "> <div class="elementor-icon-list-item "> <a class="elementor-repeater-item-01d06f0 ekit_badge_left" href="https://sandidharma.ac.id/" data-wpel-link="internal"> <div class="ekit_page_list_content"> <span class="elementor-icon-list-text"> <span class="ekit_page_list_title_title">Beranda</span> </span> </div> </a> </div> <div class="elementor-icon-list-item "> <a class="elementor-repeater-item-324f54e ekit_badge_left" href="https://sandidharma.ac.id/dosen/" data-wpel-link="internal"> <div class="ekit_page_list_content"> <span class="elementor-icon-list-text"> <span class="ekit_page_list_title_title">Dosen</span> </span> </div> </a> </div> <div class="elementor-icon-list-item "> <a class="elementor-repeater-item-5245ae1 ekit_badge_left" href="https://sandidharma.ac.id/alumni/" data-wpel-link="internal"> <div class="ekit_page_list_content"> <span class="elementor-icon-list-text"> <span class="ekit_page_list_title_title">Alumni</span> </span> </div> </a> </div> </div> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-34d95855" data-id="34d95855" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-8ed08ec elementor-widget__width-initial elementor-widget elementor-widget-elementskit-page-list" data-id="8ed08ec" data-element_type="widget" data-widget_type="elementskit-page-list.default"> <div class="elementor-widget-container"> <div class="ekit-wid-con" > <div class="elementor-icon-list-items "> <div class="elementor-icon-list-item "> <a class="elementor-repeater-item-2d9e160 ekit_badge_left" href="https://sandidharma.ac.id/category/berita/" target="_blank" rel="nofollow" data-wpel-link="internal"> <div class="ekit_page_list_content"> <span class="elementor-icon-list-text"> <span class="ekit_page_list_title_title">Berita</span> </span> </div> </a> </div> <div class="elementor-icon-list-item "> <a class="elementor-repeater-item-0138317 ekit_badge_left" href="https://sandidharma.ac.id/daftar-online/" data-wpel-link="internal"> <div class="ekit_page_list_content"> <span class="elementor-icon-list-text"> <span class="ekit_page_list_title_title">Daftar Online</span> </span> </div> </a> </div> <div class="elementor-icon-list-item "> <a class="elementor-repeater-item-2f3b8ac ekit_badge_left" href="https://sandidharma.ac.id/karir/" data-wpel-link="internal"> <div class="ekit_page_list_content"> <span class="elementor-icon-list-text"> <span class="ekit_page_list_title_title">Karir</span> </span> </div> </a> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-320c335a" data-id="320c335a" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-77e70b31 elementor-widget elementor-widget-heading" data-id="77e70b31" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Subscribe Now</h2> </div> </div> <div class="elementor-element elementor-element-60d8e173 elementor-widget elementor-widget-text-editor" data-id="60d8e173" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Don’t miss our future updates! Get Subscribed Today!</p> </div> </div> <div class="elementor-element elementor-element-2196617 elementor-widget elementor-widget-elementskit-button" data-id="2196617" data-element_type="widget" data-widget_type="elementskit-button.default"> <div class="elementor-widget-container"> <div class="ekit-wid-con" > <div class="ekit-btn-wraper"> <a href="#" class="elementskit-btn whitespace--normal" id=""> Subscribe </a> </div> </div> </div> </div> </div> </div> </div> </section> <section class="elementor-section elementor-top-section elementor-element elementor-element-31e24b20 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="31e24b20" data-element_type="section" data-settings="{"background_background":"classic"}"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-76a42ead" data-id="76a42ead" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-320797b3 elementor-widget elementor-widget-elementskit-heading" data-id="320797b3" data-element_type="widget" data-widget_type="elementskit-heading.default"> <div class="elementor-widget-container"> <div class="ekit-wid-con" ><div class="ekit-heading elementskit-section-title-wraper text_left ekit_heading_tablet- ekit_heading_mobile-text_center"><p class="ekit-heading--title elementskit-section-title ">©2024. AMIK Sandi Dharma. All Rights Reserved.</p></div></div> </div> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-1255714e" data-id="1255714e" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-2c3bf2b7 elementor-align-right elementor-mobile-align-center elementor-widget elementor-widget-elementskit-page-list" data-id="2c3bf2b7" data-element_type="widget" data-widget_type="elementskit-page-list.default"> <div class="elementor-widget-container"> <div class="ekit-wid-con" > <div class="elementor-icon-list-items elementor-inline-items"> <div class="elementor-icon-list-item "> <a class="elementor-repeater-item-050c974 ekit_badge_left" href="https://sandidharma.ac.id/" data-wpel-link="internal"> <div class="ekit_page_list_content"> <span class="elementor-icon-list-text"> <span class="ekit_page_list_title_title">Beranda</span> </span> </div> </a> </div> <div class="elementor-icon-list-item "> <a class="elementor-repeater-item-29e6080 ekit_badge_left" href="https://sandidharma.ac.id/hubungi/" data-wpel-link="internal"> <div class="ekit_page_list_content"> <span class="elementor-icon-list-text"> <span class="ekit_page_list_title_title">Hubungi</span> </span> </div> </a> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> </footer> </div><!-- #page --> <script type='text/javascript'> const lazyloadRunObserver = () => { const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` ); const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { entries.forEach( ( entry ) => { if ( entry.isIntersecting ) { let lazyloadBackground = entry.target; if( lazyloadBackground ) { lazyloadBackground.classList.add( 'e-lazyloaded' ); } lazyloadBackgroundObserver.unobserve( entry.target ); } }); }, { rootMargin: '200px 0px 200px 0px' } ); lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { lazyloadBackgroundObserver.observe( lazyloadBackground ); } ); }; const events = [ 'DOMContentLoaded', 'elementor/lazyload/observe', ]; events.forEach( ( event ) => { document.addEventListener( event, lazyloadRunObserver ); } ); </script> <link rel='stylesheet' id='widget-icon-list-css' href='http://sandidharma.ac.id/wp-content/plugins/elementor/assets/css/widget-icon-list.min.css?ver=3.25.10' media='all' /> <link rel='stylesheet' id='widget-image-css' href='http://sandidharma.ac.id/wp-content/plugins/elementor/assets/css/widget-image.min.css?ver=3.25.10' media='all' /> <link rel='stylesheet' id='font-awesome-5-all-css' href='http://sandidharma.ac.id/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css?ver=6.0.11' media='all' /> <link rel='stylesheet' id='font-awesome-4-shim-css' href='http://sandidharma.ac.id/wp-content/plugins/elementor/assets/lib/font-awesome/css/v4-shims.min.css?ver=6.0.11' media='all' /> <link rel='stylesheet' id='widget-text-editor-css' href='http://sandidharma.ac.id/wp-content/plugins/elementor/assets/css/widget-text-editor.min.css?ver=3.25.10' media='all' /> <link rel='stylesheet' id='widget-heading-css' href='http://sandidharma.ac.id/wp-content/plugins/elementor/assets/css/widget-heading.min.css?ver=3.25.10' media='all' /> <script src="http://sandidharma.ac.id/wp-content/plugins/easyjobs/public/assets/vendor/owl.carousel.min.js?ver=2.5.5" id="easyjobsowl-js"></script> <script src="http://sandidharma.ac.id/wp-content/plugins/easyjobs/public/assets/dist/js/easyjobs-public.min.js?ver=2.5.5" id="easyjobs-js"></script> <script src="http://sandidharma.ac.id/wp-includes/js/dist/dom-ready.min.js?ver=f77871ff7694fffea381" id="wp-dom-ready-js"></script> <script id="starter-templates-zip-preview-js-extra"> var starter_templates_zip_preview = {"AstColorPaletteVarPrefix":"--ast-global-","AstEleColorPaletteVarPrefix":"--ast-global-"}; </script> <script src="http://sandidharma.ac.id/wp-content/plugins/astra-sites/inc/lib/onboarding/assets/dist/template-preview/main.js?ver=06758d4d807d9d22c6ea" id="starter-templates-zip-preview-js"></script> <script src="http://sandidharma.ac.id/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script> <script id="qi-addons-for-elementor-script-js-extra"> var qodefQiAddonsGlobal = {"vars":{"adminBarHeight":0,"iconArrowLeft":"<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 34.2 32.3\" xml:space=\"preserve\" style=\"stroke-width: 2;\"><line x1=\"0.5\" y1=\"16\" x2=\"33.5\" y2=\"16\"\/><line x1=\"0.3\" y1=\"16.5\" x2=\"16.2\" y2=\"0.7\"\/><line x1=\"0\" y1=\"15.4\" x2=\"16.2\" y2=\"31.6\"\/><\/svg>","iconArrowRight":"<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 34.2 32.3\" xml:space=\"preserve\" style=\"stroke-width: 2;\"><line x1=\"0\" y1=\"16\" x2=\"33\" y2=\"16\"\/><line x1=\"17.3\" y1=\"0.7\" x2=\"33.2\" y2=\"16.5\"\/><line x1=\"17.3\" y1=\"31.6\" x2=\"33.5\" y2=\"15.4\"\/><\/svg>","iconClose":"<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 9.1 9.1\" xml:space=\"preserve\"><g><path d=\"M8.5,0L9,0.6L5.1,4.5L9,8.5L8.5,9L4.5,5.1L0.6,9L0,8.5L4,4.5L0,0.6L0.6,0L4.5,4L8.5,0z\"\/><\/g><\/svg>"}}; </script> <script src="http://sandidharma.ac.id/wp-content/plugins/qi-addons-for-elementor/assets/js/main.min.js?ver=1.8.1" id="qi-addons-for-elementor-script-js"></script> <script src="http://sandidharma.ac.id/wp-content/plugins/metform/public/assets/lib/cute-alert/cute-alert.js?ver=3.9.1" id="cute-alert-js"></script> <script src="http://sandidharma.ac.id/wp-content/themes/hello-elementor/assets/js/hello-frontend.min.js?ver=3.1.1" id="hello-theme-frontend-js"></script> <script src="http://sandidharma.ac.id/wp-content/plugins/elementskit-lite/libs/framework/assets/js/frontend-script.js?ver=3.3.3" id="elementskit-framework-js-frontend-js"></script> <script id="elementskit-framework-js-frontend-js-after"> var elementskit = { resturl: 'https://sandidharma.ac.id/wp-json/elementskit/v1/', } </script> <script src="http://sandidharma.ac.id/wp-content/plugins/elementskit-lite/widgets/init/assets/js/widget-scripts.js?ver=3.3.3" id="ekit-widget-scripts-js"></script> <script id="eael-general-js-extra"> var localize = {"ajaxurl":"https:\/\/sandidharma.ac.id\/wp-admin\/admin-ajax.php","nonce":"ea4742ea45","i18n":{"added":"Added ","compare":"Compare","loading":"Loading..."},"eael_translate_text":{"required_text":"is a required field","invalid_text":"Invalid","billing_text":"Billing","shipping_text":"Shipping","fg_mfp_counter_text":"of"},"page_permalink":"https:\/\/sandidharma.ac.id\/dom-document-object-model-pada-javascript-7-propertinya\/","cart_redirectition":"","cart_page_url":"","el_breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Layar lebar","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}}; </script> <script src="http://sandidharma.ac.id/wp-content/plugins/essential-addons-for-elementor-lite/assets/front-end/js/view/general.min.js?ver=6.0.11" id="eael-general-js"></script> <script src="https://stats.wp.com/e-202452.js" id="jetpack-stats-js" data-wp-strategy="defer"></script> <script id="jetpack-stats-js-after"> _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"235996010\",\"post\":\"1672\",\"tz\":\"7\",\"srv\":\"sandidharma.ac.id\",\"j\":\"1:14.1\"}") ]); _stq.push([ "clickTrackerInit", "235996010", "1672" ]); </script> <script src="http://sandidharma.ac.id/wp-content/plugins/elementor/assets/lib/font-awesome/js/v4-shims.min.js?ver=6.0.11" id="font-awesome-4-shim-js"></script> <script src="http://sandidharma.ac.id/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.25.10" id="elementor-webpack-runtime-js"></script> <script src="http://sandidharma.ac.id/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.25.10" id="elementor-frontend-modules-js"></script> <script id="elementor-frontend-js-before"> var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Bagikan di Facebook","shareOnTwitter":"Bagikan di Twitter","pinIt":"Buat Pin","download":"Unduh","downloadImage":"Unduh gambar","fullscreen":"Layar Penuh","zoom":"Perbesar","share":"Bagikan","playVideo":"Putar Video","previous":"Sebelumnya","next":"Selanjutnya","close":"Tutup","a11yCarouselWrapperAriaLabel":"Carousel | Horizontal scrolling: Arrow Left & Right","a11yCarouselPrevSlideMessage":"Slide sebelumnya","a11yCarouselNextSlideMessage":"Slide selanjutnya","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Layar lebar","value":2400,"default_value":2400,"direction":"min","is_enabled":false}},"hasCustomBreakpoints":false},"version":"3.25.10","is_static":false,"experimentalFeatures":{"e_font_icon_svg":true,"additional_custom_breakpoints":true,"container":true,"e_swiper_latest":true,"e_nested_atomic_repeaters":true,"e_optimized_control_loading":true,"e_onboarding":true,"e_css_smooth_scroll":true,"hello-theme-header-footer":true,"home_screen":true,"nested-elements":true,"editor_v2":true,"e_element_cache":true,"link-in-bio":true,"floating-buttons":true},"urls":{"assets":"http:\/\/sandidharma.ac.id\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/sandidharma.ac.id\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/sandidharma.ac.id\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"166b3306c8"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description","hello_header_logo_type":"title","hello_header_menu_layout":"horizontal","hello_footer_logo_type":"logo"},"post":{"id":1672,"title":"DOM%20%28Document%20Object%20Model%29%20pada%20Javascript%20%26%207%20Propertinya%20-%20Akademi%20Manajemen%20Informatika","excerpt":"","featuredImage":"https:\/\/sandidharma.ac.id\/wp-content\/uploads\/2024\/11\/1730888855_admin-ajax.png"}}; </script> <script src="http://sandidharma.ac.id/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.25.10" id="elementor-frontend-js"></script> <script src="http://sandidharma.ac.id/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script> <script src="http://sandidharma.ac.id/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script id="wp-i18n-js-after"> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script src="http://sandidharma.ac.id/wp-content/plugins/qi-addons-for-elementor/inc/plugins/elementor/assets/js/elementor.js?ver=6.7.1" id="qi-addons-for-elementor-elementor-js"></script> <script src="http://sandidharma.ac.id/wp-content/plugins/elementskit-lite/widgets/init/assets/js/animate-circle.min.js?ver=3.3.3" id="animate-circle-js"></script> <script id="elementskit-elementor-js-extra"> var ekit_config = {"ajaxurl":"https:\/\/sandidharma.ac.id\/wp-admin\/admin-ajax.php","nonce":"2a75dada8e"}; </script> <script src="http://sandidharma.ac.id/wp-content/plugins/elementskit-lite/widgets/init/assets/js/elementor.js?ver=3.3.3" id="elementskit-elementor-js"></script> </body> </html> <!-- Page supported by LiteSpeed Cache 6.5.3 on 2024-12-27 10:50:53 --><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>