Memahami Model Objek Dokumen (DOM) dalam Butiran

Kami semua telah mendengar tentang DOM, atau Model Objek Dokumen, yang akan disebutkan dari semasa ke semasa, berkaitan dengan JavaScript. DOM adalah konsep yang cukup penting dalam pembangunan web. Tanpa itu, kita tidak akan dapat mengubah suai laman HTML secara dinamik dalam pelayar.

Belajar dan memahami hasil DOM dalam cara yang lebih baik mengakses, mengubah, dan memantau elemen yang berbeza dari halaman HTML. Model Objek Dokumen juga boleh membantu kami mengurangkan masa yang tidak diperlukan dalam masa pelaksanaan skrip.

Struktur data pokok

Sebelum bercakap mengenai apa yang DOM itu, bagaimana ia wujud, bagaimana ia wujud, dan apa yang berlaku di dalamnya, saya mahu anda tahu tentang pokok. Tidak jenis konifer & runcing tetapi mengenai pokok struktur data.

Lebih mudah untuk memahami konsep struktur data jika kita memudahkan pengertiannya. Saya akan mengatakan, struktur data adalah kira-kira mengatur data anda. Ya, hanya susunan lama yang biasa, kerana anda akan mengatur perabot di rumah atau buku-buku anda di rak buku atau semua kumpulan makanan yang berbeza yang anda makan untuk di piring anda untuk menjadikannya bermakna kepada anda.

Sudah tentu, itu tidak semua ada pada struktur data, tetapi itu cukup banyak di mana ia semua bermula. Ini “susunan” adalah di tengah-tengah semua itu. Ia cukup penting dalam DOM juga. Tetapi kami tidak bercakap tentang DOM lagi, jadi biarkan saya memandu anda ke arah a struktur data yang mungkin anda kenal dengan: array.

Arrays & trees

Array mempunyai Indeks dan panjang, mereka boleh jadi pelbagai dimensi, dan mempunyai lebih banyak ciri. Sebanyak yang penting adalah untuk mengetahui perkara-perkara ini mengenai array, janganlah mengganggu diri kita sekarang. Kepada kami, array sangat mudah. Ia adalah ketika anda mengaturkan perkara yang berbeza dalam satu baris.

Begitu juga, apabila memikirkan pokok-pokok, katakan, ia tentang meletakkan perkara di bawah satu sama lain, bermula dengan hanya satu perkara di bahagian atas.

Sekarang, anda mungkin mengambil itik talian tunggal dari sebelumnya, tolong tegak, dan beritahu saya itu “sekarang, setiap itik berada di bawah itik lain”. Adakah pokok itu? Ia adalah.

Bergantung pada data anda atau bagaimana anda akan menggunakannya, data teratas dalam pokok anda (dipanggil akar) mungkin sesuatu yang ada sangat penting atau sesuatu yang ada di sana sahaja melampirkan unsur-unsur lain di bawahnya.

Sama ada cara, elemen paling atas dalam struktur data pokok melakukan sesuatu yang sangat penting. Ia menyediakan tempat untuk mula mencari apa-apa maklumat yang kita mahu ekstrak dari pokok itu.

Makna DOM

DOM bermaksud Model Objek Dokumen. Dokumen itu menunjuk kepada dokumen HTML (XML) iaitu diwakili sebagai Objek. (Dalam semua JavaScript boleh diwakili sebagai objek!)

Model ini dicipta oleh penyemak imbas yang mengambil dokumen HTML dan mencipta objek yang mewakilinya. Kami boleh mengakses objek ini dengan JavaScript. Dan sejak kita menggunakan objek ini untuk memanipulasi dokumen HTML dan membina aplikasi kita sendiri, DOM pada dasarnya adalah API.

Pokok DOM

Dalam kod JavaScript, dokumen HTML adalah diwakili sebagai objek. Semua data yang dibaca dari dokumen itu juga disimpan sebagai objek, bersarang di bawah satu sama lain (kerana seperti yang saya katakan sebelum ini, dalam JavaScript segala-galanya hanya boleh diwakili sebagai objek).

Oleh itu, ini pada dasarnya adalah susunan fizikal data DOM dalam kod: semuanya adalah disusun sebagai objek. Walau bagaimanapun, secara logiknya, ia adalah pokok.

Parser DOM

Setiap perisian pelayar mempunyai program yang dipanggil Parser DOM yang bertanggungjawab menyusun dokumen HTML ke dalam DOM.

Pelayar membaca halaman HTML dan menghidupkan datanya menjadi objek yang membentuk DOM. Maklumat yang terdapat dalam objek JavaScript JavaScript ini diatur secara logik sebagai pokok struktur data yang dikenali sebagai pokok DOM.

Parsing data dari HTML ke pokok DOM

Ambil fail HTML mudah. Ia mempunyai elemen akar . Ia sub-unsur adalah dan , masing-masing mempunyai banyak elemen kanak-kanak sendiri.

Jadi pada asasnya, penyemak imbas membaca data dalam dokumen HTML, sesuatu yang serupa dengan ini:

Dan, mengatur mereka ke dalam pokok DOM seperti ini:

Perwakilan setiap elemen HTML (dan kandungan kepunyaannya) dalam pokok DOM dikenali sebagai Nod. The nod akar adalah nod dari .

The Antara muka DOM dalam JavaScript dipanggil dokumen (kerana ia adalah perwakilan dokumen HTML). Oleh itu, kita mengakses pohon DOM dokumen HTML melalui dokumen antara muka dalam JavaScript.

Kita bukan sahaja dapat mengakses, tetapi juga memanipulasi dokumen HTML melalui DOM. Kita boleh menambah elemen ke laman web, mengalih keluar & mengemas kini mereka. Setiap kali kita menukar atau mengemas kini sebarang nod dalam pokok DOM, ia mencerminkan pada halaman web.

Bagaimana nod direka

Saya telah menyebut sebelum ini bahawa setiap sekeping data dari dokumen HTML adalah disimpan sebagai objek dalam JavaScript. Jadi, bagaimana data disimpan sebagai objek boleh diatur secara logik sebagai pokok?

Nod dari pokok DOM mempunyai ciri atau sifat tertentu. Hampir setiap nod dalam pokok mempunyai nod induk (nod yang betul di atasnya), nod kanak-kanak (nod di bawahnya) dan adik-beradik (nod lain yang dimiliki oleh ibu bapa yang sama). Mempunyai ini keluarga di atas, di bawah, dan di sekitar nod adalah apa yang layak sebagai sebahagian daripada pokok.

Maklumat keluarga setiap nod adalah disimpan sebagai sifat dalam objek yang mewakili simpul itu. Sebagai contoh, kanak-kanak adalah harta nod yang membawa senarai elemen kanak-kanak node itu, dengan itu secara logiknya menyusun unsur-unsur anaknya di bawah nod.

Elakkan mengatasi manipulasi DOM

Seperti yang kita dapati mengemas kini penggunaan DOM (untuk mengubah suai laman web), ada perkara seperti itu berlebihan.

Katakanlah, anda mahu mengemas kini warna a