{"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\/pl\/wiki\/document-object-model-dom\/","title":{"rendered":"Model obiektowy dokumentu (DOM)"},"content":{"rendered":"<p>Document Object Model (DOM) to istotny interfejs umo\u017cliwiaj\u0105cy programistom interakcj\u0119 z dokumentami internetowymi przy u\u017cyciu j\u0119zyk\u00f3w skryptowych, takich jak JavaScript. Reprezentuje ustrukturyzowany, hierarchiczny i logiczny widok zawarto\u015bci dokumentu internetowego, takiego jak HTML lub XML, w postaci struktury przypominaj\u0105cej drzewo.<\/p>\n<h2>Geneza obiektowego modelu dokumentu (DOM)<\/h2>\n<p>Koncepcja DOM pojawi\u0142a si\u0119 po raz pierwszy w po\u0142owie lat 90. XX wieku w wyniku potrzeby umo\u017cliwienia bardziej interaktywnych tre\u015bci internetowych. Wraz z pojawieniem si\u0119 dynamicznych stron internetowych i powszechnym wykorzystaniem JavaScript zaistnia\u0142 zapotrzebowanie na model, kt\u00f3ry umo\u017cliwia\u0142by skryptom zmian\u0119 struktury, stylu i tre\u015bci dokumentu. Konsorcjum World Wide Web (W3C) podj\u0119\u0142o si\u0119 stworzenia w tym celu standaryzowanego API, czego efektem by\u0142 rozw\u00f3j DOM.<\/p>\n<p>Pierwszy standardowy poziom DOM, DOM Poziom 1, zosta\u0142 wprowadzony przez W3C w 1998 roku. Zapewnia\u0142 kompleksowy model ca\u0142ego dokumentu HTML lub XML, \u0142\u0105cznie ze \u015brodkami do zmiany dowolnej cz\u0119\u015bci dokumentu.<\/p>\n<h2>Rozszerzanie obiektowego modelu dokumentu (DOM)<\/h2>\n<p>DOM to zasadniczo neutralny pod wzgl\u0119dem platformy i j\u0119zyka interfejs, kt\u00f3ry umo\u017cliwia programom i skryptom dynamiczny dost\u0119p do zawarto\u015bci, struktury i stylu dokumentu oraz aktualizacj\u0119 jego zawarto\u015bci.<\/p>\n<p>DOM jest zorganizowany w hierarchi\u0119 w\u0119z\u0142\u00f3w, z kt\u00f3rych ka\u017cdy reprezentuje cz\u0119\u015b\u0107 dokumentu, tak\u0105 jak elementy, atrybuty i tekst. Ta logiczna struktura drzewa u\u0142atwia nawigacj\u0119 i manipulowanie zawarto\u015bci\u0105 dokumentu.<\/p>\n<p>Dokument internetowy jest modelowany jako drzewo obiekt\u00f3w, kt\u00f3re maj\u0105 w\u0142a\u015bciwo\u015bci i metody i mog\u0105 zawiera\u0107 inne obiekty. Na przyk\u0142ad dokument HTML jest przekszta\u0142cany w obiekty reprezentuj\u0105ce elementy takie jak \u201ebody\u201d, \u201ediv\u201d, \u201espan\u201d i \u201ep\u201d, a tak\u017ce ich atrybuty i tre\u015b\u0107 tekstow\u0105.<\/p>\n<h2>Jak dzia\u0142a obiektowy model dokumentu (DOM).<\/h2>\n<p>Wewn\u0119trzna struktura DOM jest zorganizowana jako drzewo w\u0119z\u0142\u00f3w. Najwy\u017cszym w\u0119z\u0142em jest <code data-no-translation=\"\">Document<\/code> w\u0119ze\u0142, kt\u00f3ry reprezentuje ca\u0142y dokument. Poni\u017cej tego, <code data-no-translation=\"\">Element<\/code> w\u0119z\u0142y odpowiadaj\u0105 elementom HTML na stronie, <code data-no-translation=\"\">Attribute<\/code> w\u0119z\u0142y przechowuj\u0105 atrybuty element\u00f3w i <code data-no-translation=\"\">Text<\/code> w\u0119z\u0142y przechowuj\u0105 tre\u015b\u0107 tekstow\u0105 element\u00f3w.<\/p>\n<p>Ta hierarchiczna struktura umo\u017cliwia programistom poruszanie si\u0119 po drzewie dokument\u00f3w i u\u017cywanie metod API do wybierania, tworzenia, modyfikowania lub usuwania w\u0119z\u0142\u00f3w.<\/p>\n<p>Oto przyk\u0142ad wygl\u0105du dokumentu HTML jako drzewa 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>Matematyka<\/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>Skopiuj 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>Kluczowe cechy obiektowego modelu dokumentu (DOM)<\/h2>\n<ol>\n<li>\n<p><strong>Struktura drzewa<\/strong>: DOM reprezentuje dokument w logicznej strukturze drzewa, co sprawia, \u017ce nawigacja, wyb\u00f3r i manipulacja s\u0105 proste i intuicyjne.<\/p>\n<\/li>\n<li>\n<p><strong>Neutralny j\u0119zykowo<\/strong>: DOM nie jest powi\u0105zany z \u017cadnym konkretnym j\u0119zykiem programowania. Jest to konwencja przedstawiania obiekt\u00f3w i interakcji z nimi w dokumentach HTML, XML i innych typach dokument\u00f3w.<\/p>\n<\/li>\n<li>\n<p><strong>Dynamiczny dost\u0119p i aktualizacja<\/strong>: DOM umo\u017cliwia programom dynamiczny dost\u0119p do zawarto\u015bci, struktury i stylu dokumentu oraz aktualizacj\u0119 jego zawarto\u015bci.<\/p>\n<\/li>\n<li>\n<p><strong>Standaryzowane<\/strong>: DOM jest standardem W3C, zapewniaj\u0105cym jego powszechn\u0105 akceptacj\u0119 i kompatybilno\u015b\u0107 w r\u00f3\u017cnych przegl\u0105darkach i platformach.<\/p>\n<\/li>\n<\/ol>\n<h2>Typy obiektowego modelu dokumentu (DOM)<\/h2>\n<p>Specyfikacja DOM jest podzielona na kilka \u201epoziom\u00f3w\u201d i \u201emodu\u0142\u00f3w\u201d, z kt\u00f3rych ka\u017cdy dodaje funkcje i funkcjonalno\u015b\u0107 do poprzedniego. Typy kluczy obejmuj\u0105:<\/p>\n<table>\n<thead>\n<tr>\n<th>Poziom\/typ DOM<\/th>\n<th>Kr\u00f3tki opis<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM poziom 1<\/strong><\/td>\n<td>Zapewniono podstawowy model ca\u0142ych dokument\u00f3w HTML lub XML, w tym metody manipulowania elementami i ich atrybutami.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM poziom 2<\/strong><\/td>\n<td>Wprowadzono funkcje, takie jak obs\u0142uga przestrzeni nazw, modu\u0142 stylu obs\u0142uguj\u0105cy CSS i kilka nowych interfejs\u00f3w do obs\u0142ugi tabel, zdarze\u0144 itp.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM poziom 3<\/strong><\/td>\n<td>Dodano obs\u0142ug\u0119 obs\u0142ugi zdarze\u0144 XPath i klawiatury, wprowadzono interfejsy do \u0142adowania i zapisywania dokument\u00f3w.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM Poziom 4<\/strong><\/td>\n<td>Uproszczono podstawowy model DOM poprzez redukcj\u0119 zale\u017cno\u015bci, wprowadzono obietnice operacji asynchronicznych i dodano wi\u0119cej funkcji, takich jak funkcje rodzicielskie, u\u0142atwiaj\u0105ce manipulowanie w\u0119z\u0142ami.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Korzystanie z obiektowego modelu dokumentu (DOM)<\/h2>\n<p>DOM jest u\u017cywany za ka\u017cdym razem, gdy strona internetowa jest manipulowana przy u\u017cyciu JavaScript. Jest to podstawowy interfejs API dla wielu technologii internetowych.<\/p>\n<p>Programi\u015bci u\u017cywaj\u0105 DOM do dynamicznej zmiany wygl\u0105du, stylu i zawarto\u015bci strony internetowej bez konieczno\u015bci ponownego \u0142adowania ca\u0142ej strony, co pozwala na interaktywne i responsywne interfejsy u\u017cytkownika.<\/p>\n<p>Pomimo swojej mocy, DOM nie jest pozbawiony problem\u00f3w. Mo\u017ce dzia\u0142a\u0107 powoli, je\u015bli nie jest u\u017cywany ostro\u017cnie, szczeg\u00f3lnie w przypadku du\u017cych i z\u0142o\u017conych dokument\u00f3w internetowych. \u0179le zoptymalizowana manipulacja DOM mo\u017ce prowadzi\u0107 do powolnego renderowania strony i braku reakcji interfejs\u00f3w. Aby rozwi\u0105za\u0107 ten problem, programi\u015bci cz\u0119sto korzystaj\u0105 z bibliotek lub framework\u00f3w, takich jak jQuery, React lub Vue.js, kt\u00f3re oferuj\u0105 interfejsy API wy\u017cszego poziomu do wydajnej manipulacji DOM.<\/p>\n<h2>Charakterystyka DOM i por\u00f3wnanie z podobnymi terminami<\/h2>\n<table>\n<thead>\n<tr>\n<th>Termin<\/th>\n<th>Opis<\/th>\n<th>Por\u00f3wnanie<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM<\/strong><\/td>\n<td>Interfejs API dla dokument\u00f3w HTML i XML, zapewniaj\u0105cy strukturaln\u0105 reprezentacj\u0119 dokumentu i umo\u017cliwiaj\u0105cy programistom manipulowanie jego zawarto\u015bci\u0105 i prezentacj\u0105 wizualn\u0105.<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><strong>CSSOM<\/strong><\/td>\n<td>Model obiektowy CSS (CSSOM) to mapa styl\u00f3w CSS, podobna do DOM, ale specjalnie dla CSS. Umo\u017cliwia manipulowanie arkuszami styl\u00f3w i stylami zastosowanymi w DOM.<\/td>\n<td>Podczas gdy DOM skupia si\u0119 na strukturze dokumentu, CSSOM skupia si\u0119 na warstwie prezentacji.<\/td>\n<\/tr>\n<tr>\n<td><strong>Cie\u0144 DOM<\/strong><\/td>\n<td>Mechanizm hermetyzacji cz\u0119\u015bci drzewa DOM na potrzeby implementacji komponent\u00f3w sieciowych. Izoluje cz\u0119\u015bci DOM, aby \u201eukry\u0107\u201d je przed g\u0142\u00f3wnym drzewem dokument\u00f3w.<\/td>\n<td>W przeciwie\u0144stwie do zwyk\u0142ego modelu DOM, Shadow DOM zapewnia enkapsulacj\u0119 stylu i zachowania.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Przysz\u0142e perspektywy zwi\u0105zane z obiektowym modelem dokumentu (DOM)<\/h2>\n<p>W miar\u0119 ci\u0105g\u0142ego rozwoju technologii internetowych interfejs DOM API r\u00f3wnie\u017c b\u0119dzie prawdopodobnie rozwijany i ulepszany. Potencjalne przysz\u0142e zmiany obejmuj\u0105 bardziej wydajne metody manipulowania DOM, lepsz\u0105 integracj\u0119 z pojawiaj\u0105cymi si\u0119 standardami sieciowymi oraz ci\u0105g\u0142\u0105 ewolucj\u0119 samej specyfikacji HTML.<\/p>\n<p>Ciekawym, ci\u0105g\u0142ym rozwojem jest stopniowe wdra\u017canie komponent\u00f3w sieciowych, kt\u00f3re umo\u017cliwiaj\u0105 tworzenie hermetyzowanych znacznik\u00f3w HTML wielokrotnego u\u017cytku. Jest to \u015bci\u015ble powi\u0105zane z Shadow DOM, kt\u00f3ry zapewnia metod\u0119 enkapsulacji element\u00f3w DOM.<\/p>\n<h2>Model obiektowy dokumentu (DOM) i serwery proxy<\/h2>\n<p>Serwer proxy to po\u015brednik, kt\u00f3ry przekazuje \u017c\u0105dania i odpowiedzi mi\u0119dzy klientem a serwerem. Podczas gdy DOM zajmuje si\u0119 przede wszystkim struktur\u0105 i manipulowaniem dokumentami internetowymi po stronie klienta, serwery proxy dzia\u0142aj\u0105 na poziomie sieci.<\/p>\n<p>Jednak\u017ce skrzy\u017cowanie tych dw\u00f3ch element\u00f3w mo\u017cna znale\u017a\u0107 w scenariuszach, w kt\u00f3rych serwer proxy mo\u017ce modyfikowa\u0107 zawarto\u015b\u0107 dokumentu internetowego. Na przyk\u0142ad serwer proxy mo\u017ce dodawa\u0107, usuwa\u0107 lub modyfikowa\u0107 elementy DOM na stronie internetowej, zanim dotrze ona do klienta. Mo\u017cna to wykorzysta\u0107 z r\u00f3\u017cnych powod\u00f3w, takich jak wstrzykiwanie skrypt\u00f3w, usuwanie niechcianych element\u00f3w lub modyfikowanie tre\u015bci w celu lokalizacji lub dostosowywania.<\/p>\n<h2>powi\u0105zane linki<\/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\">Dokumenty internetowe MDN: Model obiektowy dokumentu (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\">Informacje o JavaScript: DOM<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/09\/inside-browser-part1\" target=\"_new\" rel=\"noopener nofollow\">Podstawy Google Web: Jak dzia\u0142aj\u0105 przegl\u0105darki<\/a><\/li>\n<\/ul>\n<p>Przegl\u0105d ten powinien zapewni\u0107 wszechstronne zrozumienie Document Object Model (DOM), jego pochodzenia, sposobu dzia\u0142ania, jego cech charakterystycznych i prawdopodobnej ewolucji. DOM pozostaje kamieniem w\u0119gielnym interaktywnego tworzenia stron internetowych i b\u0119dzie nadal odgrywa\u0107 kluczow\u0105 rol\u0119 w miar\u0119 post\u0119pu technologii internetowych.<\/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\/pl\/wp-json\/wp\/v2\/wiki\/476958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneproxy.pro\/pl\/wp-json\/wp\/v2\/wiki"}],"about":[{"href":"https:\/\/oneproxy.pro\/pl\/wp-json\/wp\/v2\/types\/wiki"}],"version-history":[{"count":0,"href":"https:\/\/oneproxy.pro\/pl\/wp-json\/wp\/v2\/wiki\/476958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneproxy.pro\/pl\/wp-json\/wp\/v2\/media\/468251"}],"wp:attachment":[{"href":"https:\/\/oneproxy.pro\/pl\/wp-json\/wp\/v2\/media?parent=476958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}