Representasi dokumen HTML di dalam browser web diperlakukan sebagai pohon DOM HTML. Ini adalah serangkaian objek dan mendefinisikan struktur halaman web.

Apa itu DOM dalam JavaScript??

Ringkasan

Selamat datang di posting blog lain yang menarik dalam serangkaian pemrograman JavaScript. Dalam artikel ini, kita akan menyentuh konsep pengembangan web yang sangat mendasar namun penting. Ya, kami akan membahas model objek dokumen di JavaScript. Di masa lalu, kami telah menerbitkan tutorial JavaScript yang wajib untuk memulai pengembangan menggunakan bahasa JavaScript. Karena itu, kami sarankan Anda membaca posting blog ini secara menyeluruh sehingga Anda tidak melewatkan apa pun yang terkait dengan konsep penting ini. Mari kita mulai panduan ini dan temukan apa itu DOM dalam JavaScript , DOM Properties, dan bagaimana Anda dapat berinteraksi dengannya secara terprogram. Kami akan membahas topik -topik berikut dalam panduan JavaScript ini:

Apa itu model objek dokumen (DOM)?

Dom berarti? Model Objek Dokumen (DOM) adalah representasi halaman web di dalam browser web. Sederhananya, representasi hierarkis dari unsur -unsur dokumen HTML di browser dikenal sebagai model objek dokumen. Itu dibentuk dalam bentuk pohon yang sebenarnya dihasilkan oleh browser web. Ini terdiri dari berbagai node yang terhubung satu sama lain membentuk bentuk pohon. Selain itu, elemen DOM memiliki atribut dan acara yang melekat padanya. Faktanya, DOM adalah antarmuka pemrograman yang merumuskan struktur logis halaman web dan menentukan cara untuk mengakses elemen halaman. Pada dasarnya, JavaScript tidak mengenali tag HTML seperti judul, H1 dan dll. Oleh karena itu, setelah dokumen HTML dimuat ke dalam browser web, DOM dibuat yang kemudian memungkinkan JavaScript untuk memahami elemen dokumen.

Level DOM

Bagian ini akan menunjukkan berbagai tingkat DOM. Pertama, ada objek jendela di browser yang selalu di atas, dan kemudian ada node dokumen. Mari kita lihat gambar di bawah ini:

Level DOM

Nah, Anda dapat melihat elemen DOM pada gambar di atas. Jendela dan dokumen adalah objek browser tingkat atas dan kemudian kami memiliki elemen HTML sebagai root. Pindah, kita memiliki node kepala dan tubuh, judul simpul milik simpul kepala dan simpul tubuh berisi semua node yang diterjemahkan dan terlihat di browser web. Selain itu, elemen tubuh berisi atribut yang dapat kita lihat di gambar seperti tag jangkar yang berisi atribut “href”. Demikian pula, node DOM lainnya berisi berbagai atribut seperti IMG, Meta, dan banyak lagi.

Apa itu properti DOM dan bagaimana mengaksesnya?

Sejauh ini, kami telah memberikan jawaban atas apa itu DOM dalam level JavaScript, dan DOM, dan kami juga telah melalui node DOM. Di bagian ini, kita akan melalui properti DOM dan akan melihat bagaimana kita bisa berinteraksi dengan mereka. Setiap elemen DOM memiliki nilai yang terkait dengan itu seperti tag “p” memiliki properti teks, tag IMG memiliki gambar dan sebagainya. Metode JavaScript digunakan untuk mengakses nilai node. Selanjutnya, Anda dapat menambahkan/menghapus pendengar acara ke elemen DOM. Anda dapat menemukan properti dom berikut : INNERHTML : Properti ini digunakan untuk mengatur atau mengambil konten html dari sebuah node dom.

let htmlContent = document.getElementById("customID").innerHTML;

Innertext : Gunakan properti DOM ini untuk mengakses atau mengatur konten tekstual dari elemen HTML.

let textualContent = document.getElementById("customID").innerText;

ParentElement : Anda dapat menggunakan properti ini untuk mengakses simpul induk elemen.

let parentNode = document.getElementById("customID").parentElement.nodeName;

Gaya : Perbarui atribut gaya elemen.

let styleAttr = document.getElementById("customID").style.color = "red";

Judul : Gunakan properti ini untuk memperbarui elemen judul DOM.

document.getElementById("customID").title= "this is a web page";

Berikut ini adalah beberapa metode yang dapat kita gunakan untuk berinteraksi dengan JavaScript: AddEventListener () : Metode DOM ini digunakan untuk melampirkan event handler ke elemen.

document.getElementById("customID").addEventListener("click", customFunction);

getAttribute () : Metode DOM ini digunakan untuk melampirkan event handler ke suatu elemen.

document.getElementById("customID").addEventListener("click", customFunction);

getElementById () : Metode untuk mendapatkan elemen tertentu dengan “ID” yang diberikan.

let element = document.getElementById("myID");

QuerySelector () : Gunakan metode ini untuk mendapatkan elemen anak pertama yang dicocokkan dengan pemilih CSS.

document.getElementById("myID").querySelector(".first").innerHTML = "change the value";

ToString () : Anda dapat menggunakan metode ini untuk mengubah elemen menjadi string. Demikian juga, ada banyak metode dan sifat lain yang dapat Anda jelajahi.

Kesimpulan

Kami mengakhiri tutorial JavasXcript ini di sini dengan harapan Anda memiliki pemahaman yang baik tentang apa itu DOM dalam JavaScript . Kami juga telah melewati DOM, Level DOM, HTML DOM Tree dan DOM Properties . Posting blog ini sangat penting bagi pemula yang ingin memiliki cengkeraman yang kuat pada konsep Javascrit. Selain itu, ada artikel lain yang relevan yang dapat Anda temukan di bagian “Lihat juga”.

Terhubung dengan kami

Akhirnya, containerize.com menawarkan tutorial JavaScript yang sedang berlangsung tentang berbagai topik menarik. Anda dapat tetap berada di loop dengan mengikuti kami di platform media sosial kami, termasuk Facebook, LinkedIn, dan Twitter.

Berikan pertanyaan

Anda dapat memberi tahu kami tentang pertanyaan atau pertanyaan Anda di [forum] kami 9.

FAQ

Apa yang digunakan DOM dalam JavaScript? Anda dapat mengunjungi tautan ini untuk mendapatkan jawaban terperinci untuk pertanyaan ini.

Lihat juga