{"id":476958,"date":"2023-08-09T09:05:36","date_gmt":"2023-08-09T09:05:36","guid":{"rendered":""},"modified":"2023-09-05T11:13:45","modified_gmt":"2023-09-05T11:13:45","slug":"document-object-model-dom","status":"publish","type":"wiki","link":"https:\/\/oneproxy.pro\/my\/wiki\/document-object-model-dom\/","title":{"rendered":"Model Objek Dokumen (DOM)"},"content":{"rendered":"<p>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.<\/p>\n<h2>Kejadian Model Objek Dokumen (DOM)<\/h2>\n<p>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.<\/p>\n<p>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.<\/p>\n<h2>Memperluaskan Model Objek Dokumen (DOM)<\/h2>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>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 &quot;body&quot;, &quot;div&quot;, &quot;span&quot; dan &quot;p&quot;, serta atribut dan kandungan teksnya.<\/p>\n<h2>Cara Model Objek Dokumen (DOM) Berfungsi<\/h2>\n<p>Struktur dalaman DOM disusun sebagai pokok nod. Nod paling atas ialah <code data-no-translation=\"\">Document<\/code> nod, yang mewakili keseluruhan dokumen. Di bawah ini, yang <code data-no-translation=\"\">Element<\/code> nod sepadan dengan elemen HTML dalam halaman, <code data-no-translation=\"\">Attribute<\/code> nod memegang atribut unsur, dan <code data-no-translation=\"\">Text<\/code> nod memegang kandungan teks unsur.<\/p>\n<p>Struktur hierarki ini membolehkan pembangun menavigasi pepohon dokumen dan menggunakan kaedah API untuk memilih, mencipta, mengubah suai atau memadamkan nod.<\/p>\n<p>Berikut ialah contoh bagaimana dokumen HTML akan kelihatan sebagai pepohon DOM:<\/p>\n<pre><div class=\"bg-black rounded-md mb-4\"><div class=\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md\"><span>mathematica<\/span><button class=\"flex ml-auto gap-2\"><svg stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" viewbox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"h-4 w-4\" height=\"1em\" width=\"1em\" ><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"><\/path><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"><\/rect><\/svg>Salin kod<\/button><\/div><div class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-mathematica\" data-no-translation=\"\"><span class=\"hljs-variable\">Document<\/span>\n    \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">html<\/span>\n        \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">head<\/span>\n            \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">title<\/span>\n                \u21b3 <span class=\"hljs-built_in\">Text<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-string\">\"Title of the Document\"<\/span>\n        \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">body<\/span>\n            \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">h1<\/span>\n                \u21b3 <span class=\"hljs-built_in\">Text<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-string\">\"Hello, world!\"<\/span>\n            \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">p<\/span>\n                \u21b3 <span class=\"hljs-built_in\">Text<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-string\">\"This is a paragraph.\"<\/span>\n<\/code><\/div><\/div><\/pre>\n<h2>Ciri Utama Model Objek Dokumen (DOM)<\/h2>\n<ol>\n<li>\n<p><strong>Struktur Pokok<\/strong>: DOM mewakili dokumen dalam struktur pokok logik, yang menjadikan navigasi, pemilihan dan manipulasi mudah dan intuitif.<\/p>\n<\/li>\n<li>\n<p><strong>Bahasa-Neutral<\/strong>: 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.<\/p>\n<\/li>\n<li>\n<p><strong>Akses Dinamik dan Kemas Kini<\/strong>: DOM membenarkan program mengakses dan mengemas kini kandungan, struktur dan gaya dokumen secara dinamik.<\/p>\n<\/li>\n<li>\n<p><strong>diseragamkan<\/strong>: DOM ialah piawaian W3C, memastikan penerimaan meluas dan keserasiannya merentas pelayar dan platform yang berbeza.<\/p>\n<\/li>\n<\/ol>\n<h2>Jenis Model Objek Dokumen (DOM)<\/h2>\n<p>Spesifikasi DOM dibahagikan kepada beberapa &quot;tahap&quot; dan &quot;modul&quot;, setiap satu menambah ciri dan kefungsian kepada sebelumnya. Jenis utama termasuk:<\/p>\n<table>\n<thead>\n<tr>\n<th>Tahap\/Jenis DOM<\/th>\n<th>Penerangan ringkas<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM Tahap 1<\/strong><\/td>\n<td>Menyediakan model asas untuk keseluruhan dokumen HTML atau XML, termasuk kaedah untuk memanipulasi elemen dan atributnya.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM Tahap 2<\/strong><\/td>\n<td>Memperkenalkan ciri seperti pengendalian ruang nama, modul gaya yang menyokong CSS dan beberapa antara muka baharu untuk menangani jadual, acara, dsb.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM Tahap 3<\/strong><\/td>\n<td>Menambah sokongan untuk pengendalian acara XPath dan papan kekunci, memperkenalkan antara muka untuk memuatkan dan menyimpan dokumen.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM Tahap 4<\/strong><\/td>\n<td>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.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Menggunakan Model Objek Dokumen (DOM)<\/h2>\n<p>DOM digunakan setiap kali halaman web dimanipulasi menggunakan JavaScript. Ia adalah API asas untuk pelbagai teknologi web.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<h2>Ciri dan Perbandingan DOM dengan Istilah Serupa<\/h2>\n<table>\n<thead>\n<tr>\n<th>Penggal<\/th>\n<th>Penerangan<\/th>\n<th>Perbandingan<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM<\/strong><\/td>\n<td>API untuk dokumen HTML dan XML, menyediakan perwakilan struktur dokumen dan membenarkan pembangun memanipulasi kandungan dan persembahan visualnya.<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><strong>CSSOM<\/strong><\/td>\n<td>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.<\/td>\n<td>Walaupun DOM memfokuskan pada struktur dokumen, CSSOM memfokuskan pada lapisan pembentangan.<\/td>\n<\/tr>\n<tr>\n<td><strong>Shadow DOM<\/strong><\/td>\n<td>Mekanisme untuk merangkum bahagian pokok DOM untuk pelaksanaan Komponen Web. Ia mengasingkan bahagian DOM untuk &quot;menyembunyikan&quot; mereka daripada pokok dokumen utama.<\/td>\n<td>Tidak seperti DOM biasa, Shadow DOM menyediakan enkapsulasi gaya dan tingkah laku.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Perspektif Masa Depan Berkaitan dengan Model Objek Dokumen (DOM)<\/h2>\n<p>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.<\/p>\n<p>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.<\/p>\n<h2>Model Objek Dokumen (DOM) dan Pelayan Proksi<\/h2>\n<p>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.<\/p>\n<p>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.<\/p>\n<h2>Pautan Berkaitan<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\" target=\"_new\" rel=\"noopener nofollow\">Dokumen Web MDN: Model Objek Dokumen (DOM)<\/a><\/li>\n<li><a href=\"https:\/\/dom.spec.whatwg.org\/\" target=\"_new\" rel=\"noopener nofollow\">Standard DOM W3C<\/a><\/li>\n<li><a href=\"https:\/\/javascript.info\/dom\" target=\"_new\" rel=\"noopener nofollow\">Maklumat JavaScript: DOM<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/09\/inside-browser-part1\" target=\"_new\" rel=\"noopener nofollow\">Asas Web Google: Cara Penyemak Imbas Berfungsi<\/a><\/li>\n<\/ul>\n<p>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.<\/p>","protected":false},"featured_media":468251,"menu_order":0,"template":"","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"class_list":["post-476958","wiki","type-wiki","status-publish","has-post-thumbnail","hentry"],"acf":{"faq_title":"Frequently Asked Questions about <mark>Document Object Model (DOM): A Comprehensive Overview<\/mark>","faq_items":[{"question":"What is the Document Object Model (DOM)?","answer":"<p>The Document Object Model (DOM) is an interface that allows developers to interact with web documents using scripting languages like JavaScript. It represents the contents of a web document, such as HTML or XML, in a structured, hierarchical, and logical tree-like structure.<\/p>"},{"question":"When was the Document Object Model (DOM) first introduced?","answer":"<p>The concept of the DOM came into existence in the mid-to-late 1990s, with the World Wide Web Consortium (W3C) introducing the first standard DOM level, DOM Level 1, in 1998.<\/p>"},{"question":"How does the Document Object Model (DOM) work?","answer":"<p>The DOM works by representing a web document in a tree-like structure, with the topmost node being the <code>Document<\/code> node, representing the entire document. Below this, there are <code>Element<\/code> nodes, <code>Attribute<\/code> nodes, and <code>Text<\/code> nodes, each representing elements, attributes, and text within the document. This structure allows developers to navigate the document tree and use API methods to select, create, modify, or delete nodes.<\/p>"},{"question":"What are the key features of the Document Object Model (DOM)?","answer":"<p>The key features of the DOM include its tree-like structure, making it easy to navigate and manipulate; its language-neutrality, making it compatible with any programming language; its dynamic access and update capabilities; and its status as a W3C standard, ensuring widespread acceptance and compatibility.<\/p>"},{"question":"Are there different types of Document Object Model (DOM)?","answer":"<p>Yes, the DOM specification is divided into several \"levels\" and \"modules\", each adding features and functionality to the previous ones. These include DOM Level 1, DOM Level 2, DOM Level 3, and DOM Level 4.<\/p>"},{"question":"How is the Document Object Model (DOM) used?","answer":"<p>The DOM is used to dynamically change the look, feel, and content of a web page without requiring a full page reload. This makes for interactive and responsive user interfaces. However, the DOM can become slow if not used carefully, especially with large or complex web documents.<\/p>"},{"question":"How does the Document Object Model (DOM) relate to proxy servers?","answer":"<p>While the DOM is primarily concerned with the structure and manipulation of web documents on the client-side, proxy servers operate at the network level. However, they intersect when a proxy server modifies the contents of a web document before it reaches the client, such as injecting scripts, removing unwanted elements, or modifying content for localization or customization purposes.<\/p>"},{"question":"What are the future perspectives related to the Document Object Model (DOM)?","answer":"<p>The DOM API is likely to expand and improve as web technologies continue to evolve. Potential future developments include more efficient methods of manipulating the DOM, improved integration with emerging web standards, and the ongoing evolution of the HTML specification itself.<\/p>"}]},"_links":{"self":[{"href":"https:\/\/oneproxy.pro\/my\/wp-json\/wp\/v2\/wiki\/476958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneproxy.pro\/my\/wp-json\/wp\/v2\/wiki"}],"about":[{"href":"https:\/\/oneproxy.pro\/my\/wp-json\/wp\/v2\/types\/wiki"}],"version-history":[{"count":0,"href":"https:\/\/oneproxy.pro\/my\/wp-json\/wp\/v2\/wiki\/476958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneproxy.pro\/my\/wp-json\/wp\/v2\/media\/468251"}],"wp:attachment":[{"href":"https:\/\/oneproxy.pro\/my\/wp-json\/wp\/v2\/media?parent=476958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}