Model Objek Dokumen (DOM) ialah antara muka penting yang membolehkan pembangun berinteraksi dengan dokumen web menggunakan bahasa skrip seperti JavaScript. Ia mewakili paparan berstruktur, hierarki dan logik kandungan dokumen web, seperti HTML atau XML, sebagai struktur seperti pokok.
Kejadian Model Objek Dokumen (DOM)
Konsep DOM mula wujud pada pertengahan hingga akhir 1990-an hasil daripada keperluan untuk membenarkan kandungan web yang lebih interaktif. Dengan kemunculan tapak web dinamik dan penggunaan JavaScript yang meluas, terdapat keperluan untuk model yang membenarkan skrip menukar struktur, gaya dan kandungan dokumen. World Wide Web Consortium (W3C) mengambil tugas untuk mencipta API terpiawai untuk tujuan ini, menghasilkan pembangunan DOM.
Tahap DOM standard pertama, DOM Tahap 1, telah diperkenalkan oleh W3C pada tahun 1998. Ia menyediakan model komprehensif untuk keseluruhan dokumen HTML atau XML, termasuk cara untuk menukar mana-mana bahagian dokumen.
Memperluaskan Model Objek Dokumen (DOM)
DOM pada asasnya ialah platform dan antara muka neutral bahasa yang membolehkan program dan skrip mengakses dan mengemas kini kandungan, struktur dan gaya dokumen secara dinamik.
DOM disusun dalam hierarki nod, setiap satu mewakili sebahagian daripada dokumen, seperti elemen, atribut dan teks. Struktur pokok logik ini memudahkan untuk menavigasi dan memanipulasi kandungan dokumen.
Dokumen web dimodelkan sebagai pepohon objek yang semuanya mempunyai sifat dan kaedah, dan boleh mengandungi objek lain. Contohnya, dokumen HTML diubah menjadi objek yang mewakili elemen seperti "body", "div", "span" dan "p", serta atribut dan kandungan teksnya.
Cara Model Objek Dokumen (DOM) Berfungsi
Struktur dalaman DOM disusun sebagai pokok nod. Nod paling atas ialah Document nod, yang mewakili keseluruhan dokumen. Di bawah ini, yang Element nod sepadan dengan elemen HTML dalam halaman, Attribute nod memegang atribut unsur, dan Text nod memegang kandungan teks unsur.
Struktur hierarki ini membolehkan pembangun menavigasi pepohon dokumen dan menggunakan kaedah API untuk memilih, mencipta, mengubah suai atau memadamkan nod.
Berikut ialah contoh bagaimana dokumen HTML akan kelihatan sebagai pepohon DOM:
mathematicaDocument
↳ Element: html
↳ Element: head
↳ Element: title
↳ Text: "Title of the Document"
↳ Element: body
↳ Element: h1
↳ Text: "Hello, world!"
↳ Element: p
↳ Text: "This is a paragraph."
Ciri Utama Model Objek Dokumen (DOM)
-
Struktur Pokok: DOM mewakili dokumen dalam struktur pokok logik, yang menjadikan navigasi, pemilihan dan manipulasi mudah dan intuitif.
-
Bahasa-Neutral: DOM tidak terikat dengan mana-mana bahasa pengaturcaraan tertentu. Ia adalah konvensyen untuk mewakili dan berinteraksi dengan objek dalam HTML, XML, dan jenis dokumen lain.
-
Akses Dinamik dan Kemas Kini: DOM membenarkan program mengakses dan mengemas kini kandungan, struktur dan gaya dokumen secara dinamik.
-
diseragamkan: DOM ialah piawaian W3C, memastikan penerimaan meluas dan keserasiannya merentas pelayar dan platform yang berbeza.
Jenis Model Objek Dokumen (DOM)
Spesifikasi DOM dibahagikan kepada beberapa "tahap" dan "modul", setiap satu menambah ciri dan kefungsian kepada sebelumnya. Jenis utama termasuk:
| Tahap/Jenis DOM | Penerangan ringkas |
|---|---|
| DOM Tahap 1 | Menyediakan model asas untuk keseluruhan dokumen HTML atau XML, termasuk kaedah untuk memanipulasi elemen dan atributnya. |
| DOM Tahap 2 | Memperkenalkan ciri seperti pengendalian ruang nama, modul gaya yang menyokong CSS dan beberapa antara muka baharu untuk menangani jadual, acara, dsb. |
| DOM Tahap 3 | Menambah sokongan untuk pengendalian acara XPath dan papan kekunci, memperkenalkan antara muka untuk memuatkan dan menyimpan dokumen. |
| DOM Tahap 4 | Mempermudahkan teras DOM dengan mengurangkan kebergantungan, memperkenalkan janji untuk operasi tak segerak dan menambah lebih banyak ciri seperti ciri ibu bapa untuk manipulasi nod yang lebih mudah. |
Menggunakan Model Objek Dokumen (DOM)
DOM digunakan setiap kali halaman web dimanipulasi menggunakan JavaScript. Ia adalah API asas untuk pelbagai teknologi web.
Pembangun menggunakan DOM untuk menukar rupa, rasa dan kandungan halaman web secara dinamik tanpa memerlukan muat semula halaman penuh, membenarkan antara muka pengguna yang interaktif dan responsif.
Walaupun kuasanya, DOM bukan tanpa masalah. Ia boleh menjadi perlahan jika tidak digunakan dengan berhati-hati, terutamanya dengan dokumen web yang besar atau kompleks. Manipulasi DOM yang tidak dioptimumkan dengan baik boleh menyebabkan pemaparan halaman yang perlahan dan antara muka tidak bertindak balas. Untuk menangani perkara ini, pembangun sering menggunakan perpustakaan atau rangka kerja seperti jQuery, React atau Vue.js, yang menawarkan API peringkat lebih tinggi untuk manipulasi DOM yang cekap.
Ciri dan Perbandingan DOM dengan Istilah Serupa
| Penggal | Penerangan | Perbandingan |
|---|---|---|
| DOM | API untuk dokumen HTML dan XML, menyediakan perwakilan struktur dokumen dan membenarkan pembangun memanipulasi kandungan dan persembahan visualnya. | |
| CSSOM | Model Objek CSS (CSSOM) ialah peta gaya CSS, serupa dengan DOM tetapi khusus untuk CSS. Ia membenarkan manipulasi lembaran gaya dan gaya yang digunakan pada DOM. | Walaupun DOM memfokuskan pada struktur dokumen, CSSOM memfokuskan pada lapisan pembentangan. |
| Shadow DOM | Mekanisme untuk merangkum bahagian pokok DOM untuk pelaksanaan Komponen Web. Ia mengasingkan bahagian DOM untuk "menyembunyikan" mereka daripada pokok dokumen utama. | Tidak seperti DOM biasa, Shadow DOM menyediakan enkapsulasi gaya dan tingkah laku. |
Perspektif Masa Depan Berkaitan dengan Model Objek Dokumen (DOM)
Memandangkan teknologi web terus berkembang, API DOM juga berkemungkinan akan berkembang dan bertambah baik. Perkembangan masa depan yang berpotensi termasuk kaedah yang lebih cekap untuk memanipulasi DOM, penyepaduan yang lebih baik dengan standard web yang baru muncul, dan evolusi berterusan spesifikasi HTML itu sendiri.
Pembangunan berterusan yang menarik ialah penggunaan tambahan Komponen Web, yang membolehkan penciptaan tag HTML yang boleh diguna semula dan dikapsulkan. Ini berkait rapat dengan Shadow DOM, yang menyediakan kaedah merangkum elemen DOM.
Model Objek Dokumen (DOM) dan Pelayan Proksi
Pelayan proksi ialah perantara yang memajukan permintaan dan respons antara pelanggan dan pelayan. Walaupun DOM mementingkan struktur dan manipulasi dokumen web pada bahagian klien, pelayan proksi beroperasi pada peringkat rangkaian.
Walau bagaimanapun, persimpangan kedua-duanya boleh ditemui dalam senario di mana pelayan proksi mungkin mengubah suai kandungan dokumen web. Sebagai contoh, pelayan proksi boleh menambah, mengalih keluar atau mengubah suai elemen DOM dalam halaman web sebelum ia sampai kepada pelanggan. Ini boleh digunakan untuk pelbagai sebab, seperti menyuntik skrip, mengalih keluar elemen yang tidak diingini atau mengubah suai kandungan untuk tujuan penyetempatan atau penyesuaian.
Pautan Berkaitan
- Dokumen Web MDN: Model Objek Dokumen (DOM)
- Standard DOM W3C
- Maklumat JavaScript: DOM
- Asas Web Google: Cara Penyemak Imbas Berfungsi
Gambaran keseluruhan ini harus memberikan pemahaman yang menyeluruh tentang Model Objek Dokumen (DOM), asal usulnya, cara ia berfungsi, ciri-cirinya dan cara ia mungkin berkembang. DOM kekal sebagai asas pembangunan web interaktif dan akan terus memainkan peranan penting seiring kemajuan teknologi web.
