Memahami Document Object Model (DOM) secara Detail

Kita semua pernah mendengar tentang DOM, atau Model Obyek Dokumen, yang disebutkan dari waktu ke waktu, terkait dengan JavaScript. DOM adalah konsep yang cukup penting dalam pengembangan web. Tanpanya, kita tidak akan bisa secara dinamis mengubah halaman HTML di browser.

Belajar dan memahami hasil DOM dengan cara yang lebih baik mengakses, mengubah, dan memantau berbagai elemen halaman HTML. Model Obyek Dokumen juga dapat membantu kami mengurangi peningkatan waktu eksekusi skrip yang tidak perlu.

Struktur pohon data

Sebelum berbicara tentang apa DOM itu, bagaimana itu muncul, bagaimana itu ada, dan apa yang terjadi di dalamnya, saya ingin Anda tahu tentang pohon. Bukan jenis termasuk jenis pohon jarum & gugur tetapi tentang pohon struktur data.

Jauh lebih mudah untuk memahami konsep struktur data jika kita menyederhanakan definisinya. Saya akan mengatakan, struktur data adalah tentang mengatur data Anda. Ya, hanya pengaturan lama, seperti Anda akan mengatur furnitur di rumah Anda atau buku-buku di rak buku atau semua kelompok makanan berbeda yang Anda makan untuk di piring Anda untuk buat itu bermakna bagi Anda.

Tentu saja, itu tidak semua ada pada struktur data, tetapi di situlah semuanya dimulai. Ini “pengaturan” adalah jantung dari semuanya. Ini cukup penting di DOM juga. Tapi kami belum membicarakan DOM, jadi izinkan saya mengarahkan Anda ke a struktur data yang mungkin Anda kenal: array.

Array & pohon

Array miliki indeks dan panjangnya, mereka bisa menjadi multidimensi, dan memiliki lebih banyak karakteristik. Sama pentingnya dengan mengetahui hal-hal ini tentang array, jangan repot-repot dengan itu sekarang. Bagi kami, sebuah array cukup sederhana. Itu saat kamu mengatur hal-hal yang berbeda dalam satu baris.

Demikian pula, ketika memikirkan pohon, katakanlah, ini tentang menempatkan hal-hal di bawah satu sama lain, dimulai dengan hanya satu hal di atas.

Sekarang, Anda mungkin mengambil bebek satu baris dari sebelumnya, putar ke atas, dan katakan itu padaku “sekarang, setiap bebek ada di bawah bebek lain”. Apakah itu pohon? ini.

Bergantung pada apa data Anda atau bagaimana Anda akan menggunakannya, data teratas di pohon Anda (disebut akar) mungkin sesuatu yang sangat penting atau sesuatu yang hanya ada untuk itu lampirkan elemen lain di bawahnya.

Either way, elemen paling atas dalam struktur data pohon melakukan sesuatu yang sangat penting. Ini menyediakan tempat untuk mulai mencari informasi apa pun yang ingin kami ekstrak dari pohon.

Arti DOM

DOM adalah singkatan dari Model Obyek Dokumen. Dokumen menunjuk ke dokumen HTML (XML) yang mana direpresentasikan sebagai Obyek. (Dalam JavaScript semuanya hanya dapat direpresentasikan sebagai objek!)

Modelnya adalah dibuat oleh browser yang mengambil dokumen HTML dan membuat objek yang mewakilinya. Kami dapat mengakses objek ini dengan JavaScript. Dan karena kita menggunakan objek ini untuk memanipulasi dokumen HTML dan membangun aplikasi kita sendiri, DOM pada dasarnya adalah API.

Pohon DOM

Dalam kode JavaScript, dokumen HTML adalah direpresentasikan sebagai objek. Semua data yang dibaca dari dokumen itu adalah juga disimpan sebagai objek, bersarang di bawah satu sama lain (karena seperti saya katakan sebelumnya, dalam JavaScript semuanya hanya dapat direpresentasikan sebagai objek).

Jadi, ini pada dasarnya adalah pengaturan fisik data DOM dalam kode: semuanya diatur sebagai objek. Namun secara logis, itu pohon.

Parser DOM

Setiap perangkat lunak browser memiliki program yang disebut Parser DOM yang bertanggung jawab untuk parsing dokumen HTML ke DOM.

Browser membaca halaman HTML dan mengubah datanya menjadi objek yang membentuk DOM. Informasi yang ada dalam objek DOM JavaScript ini secara logis diatur sebagai pohon struktur data yang dikenal sebagai pohon DOM.

Parsing data dari HTML ke pohon DOM

Ambil file HTML sederhana. Itu memiliki elemen root . Nya sub-elemen adalah dan , masing-masing memiliki banyak elemen anak.

Jadi intinya, browser membaca data dalam dokumen HTML, sesuatu yang mirip dengan ini:

Dan, mengaturnya menjadi pohon DOM seperti ini:

Representasi setiap elemen HTML (dan kontennya) di pohon DOM dikenal sebagai a Node. Itu simpul akar adalah simpul dari .

Itu Antarmuka DOM dalam JavaScript disebut dokumen (karena ini adalah representasi dari dokumen HTML). Jadi, kami mengakses pohon DOM dokumen HTML melalui dokumen antarmuka dalam JavaScript.

Kami tidak hanya dapat mengakses, tetapi juga memanipulasi dokumen HTML melalui DOM. Kami dapat menambahkan elemen ke halaman web, menghapus & memperbaruinya. Setiap kali kami mengubah atau memperbarui node di pohon DOM, itu merefleksikan halaman web.

Bagaimana node dirancang

Saya telah menyebutkan sebelumnya bahwa setiap bagian data dari dokumen HTML adalah disimpan sebagai objek dalam JavaScript. Jadi, bagaimana data yang disimpan sebagai objek dapat diatur secara logis sebagai pohon?

Simpul pohon DOM memiliki karakteristik atau properti tertentu. Hampir setiap simpul di pohon memiliki simpul induk (simpul tepat di atasnya), simpul anak (node di bawahnya) dan saudara kandung (node lain milik orang tua yang sama). Memiliki ini keluarga di atas, di bawah, dan di sekitar simpul adalah apa yang memenuhi syarat sebagai bagian dari pohon.

Informasi keluarga ini dari setiap node disimpan sebagai properti di objek yang mewakili simpul itu. Sebagai contoh, anak-anak adalah properti dari simpul yang membawa daftar elemen turunan dari simpul tersebut, sehingga secara logis mengatur elemen turunannya di bawah simpul.

Hindari manipulasi DOM yang berlebihan

Sebanyak mungkin kami menemukan memperbarui DOM berguna (untuk memodifikasi halaman web), ada yang namanya berlebihan.

Katakanlah, Anda ingin memperbarui warna a

pada halaman web menggunakan JavaScript. Yang perlu Anda lakukan adalah mengakses objek DOM node yang sesuai dan perbarui properti warna. Ini seharusnya tidak mempengaruhi sisa pohon (node lain di pohon).

Tapi, bagaimana jika Anda mau menghapus simpul dari pohon atau tambahkan satu ke dalamnya? Seluruh pohon mungkin harus diatur ulang, dengan simpul dihapus atau ditambahkan ke pohon. Ini adalah pekerjaan yang mahal. Butuh waktu dan sumber daya browser untuk menyelesaikan pekerjaan ini.

Misalnya, katakanlah, Anda mau tambahkan lima baris tambahan ke tabel. Untuk setiap baris, ketika node baru dibuat dan ditambahkan ke DOM, the pohon diperbarui setiap kali, menambahkan hingga lima pembaruan secara total.

Kita dapat menghindari ini dengan menggunakan DocumentFragment antarmuka. Anggap saja sebagai kotak yang bisa tahan semua lima baris dan ditambahkan ke pohon. Lewat sini lima baris ditambahkan sebagai satu bagian data dan tidak satu per satu, hanya mengarah ke satu pembaruan di pohon.

Ini tidak hanya terjadi ketika kami menghapus atau menambahkan elemen, tetapi mengubah ukuran elemen juga dapat mempengaruhi node lain, karena elemen yang diubah ukurannya mungkin membutuhkan elemen lain di sekitarnya sesuaikan ukurannya. Jadi, node yang sesuai dari semua elemen lain perlu diperbarui dan elemen HTML akan diberikan lagi sesuai dengan aturan baru.

Demikian juga ketika tata letak halaman web secara keseluruhan terpengaruh, sebagian atau seluruh halaman web dapat dirender ulang. Proses ini dikenal sebagai Reflow. Untuk hindari reflow yang berlebihan pastikan Anda tidak terlalu banyak mengubah DOM. Perubahan pada DOM bukan satu-satunya hal yang dapat menyebabkan Reflow pada halaman web. Bergantung pada peramban, faktor-faktor lain juga dapat berkontribusi.

Membungkus

Membungkus semuanya, DOM adalah divisualisasikan sebagai pohon terdiri dari semua elemen yang ditemukan dalam dokumen HTML. Secara fisik (fisik seperti apa pun digital bisa dapatkan), itu a set objek JavaScript bersarang properti dan metode yang menyimpan informasi yang memungkinkan secara logis mengatur mereka menjadi pohon.