--- title: Wprowadzenie slug: Web/API/Document_Object_Model/Introduction tags: - DOM - Gecko translation_of: Web/API/Document_Object_Model/Introduction original_slug: Dokumentacja_Gecko_DOM/Wprowadzenie --- <p>Ten rozdział ma dać ogólne pojęcie o <a href="pl/DOM">DOM</a>: co to jest, o strukturze dla dokumentów <a href="pl/HTML">HTML</a> i <a href="pl/XML">XML</a>, jak korzystać z DOM oraz w jaki sposób przedstawiona będzie dokumentacja i przykłady.</p> <h2 id="Czym_jest_DOM.3F" name="Czym_jest_DOM.3F">Czym jest DOM?</h2> <p><b>Model obiektowy dokumentu</b> (ang. Document Object Model, DOM) stanowi API dla dokumentów HTML i XML. Odpowiada za dwie rzeczy: zapewnia reprezentację struktury dokumentu oraz określa, w jaki sposób odnosić się do tej struktury z poziomu skryptu. DOM przedstawia stronę jako strukturyzowaną grupę węzłów, co omówimy pokrótce. W gruncie rzeczy, DOM łączy stronę ze skryptami bądź językami programowania.</p> <p>Zauważ, że DOM nie jest konkretną aplikacją czy produktem. Jest raczej interfejsem, API, które twórcy oprogramowania muszą zaimplementować, jeśli chcą spełniać standard W3C DOM. Mały przykład: każda przeglądarka internetowa musi zwracać wszystkie elementy <code><P></code> ze strony HTML jako tablicę węzłów, kiedy poniższy skrypt wywoła metodę <code>getElementsByTagName</code>:</p> <pre>paragraphs = document.getElementsByTagName("P"); // paragraphs[0] to pierwszy element <p> // paragraphs[1] - drugi element <p>, etc. alert(paragraphs[0].nodeName); </pre> <p>Wszystkie metody, właściwości i wydarzenie dostępne dla webmastera w celu manipulowania lub tworzenia stron są zorganizowane w obiekty (np. obiekt <code>document</code>, reprezentujący sam dokument, obiekt <code>table</code>, implementujący specjalny interfejs DOM <code>HTMLTableElement</code>, który umożliwia dostęp do tabel w HTML, itd.) Niniejsza dokumentacja przedstawia opis każdego z obiektów w tym API.</p> <h2 id="DOM_vs._JavaScript" name="DOM_vs._JavaScript">DOM vs. JavaScript</h2> <p>Powyższy przykład, jak i inne w tej dokumentacji, napisano w <a href="pl/JavaScript">JavaScript</a>. Ściślej, został on <i>napisany</i> w JavaScript, ale <i>korzysta</i> z DOM, by manipulować stroną i jej elementami. DOM nie jest sam w sobie językiem programowania, ale bez niego język JavaScript nie miałby żadnego odniesienia do stron czy dokumentów XML i ich elementów. Każdy z elementów - jak nagłówek, tabele, nagłówki tabel, komórki tych tabel, tekst w tych komórkach - są częściami obiektowego modelu tego konkretnego dokumentu i, za pomocą DOM, język taki jak JavaScript może nimi operować.</p> <p>DOM zaprojektowano tak, by był niezależny od języka programowania, dzięki czemu reprezentacja struktury dokumentu dostępna jest poprzez jedno, spójne API. W niniejszej dokumentacji skupimy się wyłącznie na JavaScripcie, jednak można stworzyć implementację DOM dla dowolnego języka - poniżej przykład w Pythonie:</p> <pre class="eval"># Przykład: DOM w Pythonie import xml.dom.minidom as m doc = m.parse("C:\\Projects\\Py\\chap1.xml"); doc.nodeName # DOM - własność obiektu document; p_list = doc.getElementsByTagName("para"); </pre> <h2 id="Jak_korzysta.C4.87_z_DOM.3F" name="Jak_korzysta.C4.87_z_DOM.3F">Jak korzystać z DOM?</h2> <p>Aby zacząć korzystać z DOM, nie musisz robić nic szczególnego. Różne przeglądarki różnią się implementacją DOM, implementacje wykazują różny stopień zgodności z faktycznym standardem DOM (jest to kwestia, której staramy się unikać w niniejszej dokumentacji), ale każda przeglądarka używa jakiegoś obiektowego modelu dokumentu, by dać dostęp do strony z poziomu skryptu.</p> <p>Kiedy tworzysz nowy skrypt - niezależnie, czy jest to on zagnieżdżony w elemencie <code><SCRIPT></code>, czy też załączony do strony w odpowiedni sposób - możesz od razu zacząć korzystać z API dla elementów <code>document</code> lub <code>window</code> by manipulować samym dokumentem lub by przechwycić któregoś z potomków - elementów strony. Programowanie w DOM może być tak proste jak poniższy przykład, który wykorzystuje metodę <code>alert()</code> obiektu <code>window</code>, może jednak korzystać z bardziej skomplikowanych metod, by tworzyć nową zawartość - tak jak w drugim z poniższych przykładów.</p> <pre class="eval"><body onload="window.alert('Witaj!');"> </pre> <p>Niezależnie od elementu <code><script></code>, w którym poniższy skrypt jest zdefiniowany, kod ten tworzy nowy element H1, dodaje do niego tekst, a następnie włącza <code>H1</code> do drzewa dokumentu.</p> <pre class="eval"><html> <script> // create a couple of elements // in an otherwise empty HTML page heading = document.createElement("h1"); heading_text = document.createTextNode("Big Head!"); heading.appendChild(heading_text); document.body.appendChild(heading); </script> </html> </pre> <h2 id="Wa.C5.BCne_typy_danych" name="Wa.C5.BCne_typy_danych">Ważne typy danych</h2> <h2 id="Interfejsy_DOM" name="Interfejsy_DOM">Interfejsy DOM</h2> <p>Założeniem tego przewodnika jest ograniczenie do minimum dyskusji o abstrakcyjnych interfejsach, dziedziczeniu i innych szczegółach implementacji, a zamiast tego omówienie obiektów w DOM, faktycznych <i>bytów</i> , jakich możesz użyć do manipulowania hierarchią DOM. Z punktu widzenia programisty zwykle nie jest istotne, że obiekt reprezentujący element HTML <code>FORM</code> pobiera własność <b>name</b> z interfejsu <code>HTMLFormElement</code>, a własność <b>className</b> z interfejsu <code>HTMLElement</code>. W obu przypadkach własność, która Ciebie interesuje, znajduje się po prostu w obiekcie <code>form</code>.</p> <p>Jednakże zależność między obiektami a interfejsami, jakie one implementują, może być myląca, dlatego w tym podrozdziale spróbujemy powiedzieć coś o faktycznych interfejsach w specyfikacji DOM oraz o tym, w jaki sposób są one dostępne.</p> <h3 id="Interfejsy_a_obiekty" name="Interfejsy_a_obiekty">Interfejsy a obiekty</h3> <p>W niektórych przypadkach obiekt przedstawia tylko jeden interfejs, jednak z reguły obiekty - takie jak np. <code>table</code> - reprezentują kilka różnych interfejsów. Dla przykładu - <code>table</code> implementuje specjalny interfejs <code>HTMLTableElement</code>, który zawiera metody takie jak XXX i YYY. Ponieważ jednak jest to element HTML, <code>table</code> implementuje też interfejs <code>Element</code>, opisany w rozdziale <a href="pl/DOM/element">Obiekt element</a>. I wreszcie, ponieważ element HTML jest, jeśli mówimy o DOM, węzłem w drzewie węzłów, jakie tworzy obiektowy model strony internetowej czy XML, element <code>table</code> implementuje także bardziej podstawowy interfejs <code>Node</code>, z którego wywodzi się <code>Element</code>.</p> <p>Kiedy otrzymasz referencję do obiektu <code>table</code>, tak jak w poniższym przykładzie, używasz zazwyczaj zamiennie wszystkich trzech interfejsów, być może nawet o tym nie wiedząc.</p> <pre>var table = document.getElementById("table"); var tableAttrs = table.attributes; // interfejs Node/Element for(var i = 0; i < tableAttrs.length; i++){ // interfejs HTMLTableElement: atrybut border if(tableAttrs[i].nodeName.toLowerCase() == "border") table.setAttribute("border", "1"); } // interfejs HTMLTableElement: atrybut summary table.summary = "uwaga: zwiększono obramowanie"; </pre> <h3 id="Najwa.C5.BCniejsze_interfejsy_w_DOM" name="Najwa.C5.BCniejsze_interfejsy_w_DOM">Najważniejsze interfejsy w DOM</h3> <p>W tej części wymienione zostaną niektóre z najczęściej używanych interfejsów DOM. Celem nie jest opisanie, co wymienione API robią, ale raczej by dać Tobie ogólne pojęcie o rodzajach metod i własności, jakie będziesz często widywał, używając DOM. Te API wykorzystano także w <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">przykładach</a>, jakie znajdziesz na końcu tej dokumentacji.</p> <p>Obiekty <code>document</code> i <code>window</code> to obiekty, których interfejsy będziesz najczęściej wykorzystywał w programowaniu przy użyciu DOM. W prostych słowach, <code>window</code> reprezentuje coś takiego jak przeglądarka, zaś <code>document</code> jest początkiem, górą całego dokumentu. <code>Element</code> dziedziczy z ogólnego interfejsu <code>Node</code>, zaś razem te dwa interfejsy odpowiadają za wiele metod i własności, jakich będziesz używał na konkretnych elementach. Elementy te mogą mieć też własne, osobne interfejsy, służące do obsługi konkretnego rodzaju danych, jaki przechowują - tak jak na przykład wspomniany wcześniej obiekt <code>table</code>.</p> <p>Poniżej krótka lista najczęściej używanych API w skryptach wykorzystujących DOM.</p> <ul> <li><code><a href="pl/DOM/document.getElementById">document.getElementById</a>(id)</code></li> <li><code>element.<a href="pl/DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code></li> <li><code><a href="pl/DOM/document.createElement">document.createElement</a>(name)</code></li> <li><code>parentNode.<a href="pl/DOM/element.appendChild">appendChild</a>(node)</code></li> <li><code>element.<a href="pl/DOM/element.innerHTML">innerHTML</a></code></li> <li><code>element.<a href="pl/DOM/element.style">style</a>.left</code></li> <li><code>element.<a href="pl/DOM/element.setAttribute">setAttribute</a></code></li> <li><code>element.<a href="pl/DOM/element.getAttribute">element.getAttribute</a></code></li> <li><code>element.<a href="pl/DOM/element.addEventListener">addEventListener</a></code></li> <li><code><a href="pl/DOM/window.content">window.content</a></code></li> <li><code><a href="pl/DOM/window.onload">window.onload</a></code></li> <li><code><a href="pl/DOM/window.dump">window.dump</a></code></li> <li><code><a href="pl/DOM/window.scrollTo">window.scrollTo</a></code></li> </ul> <h2 id="Testowanie_DOM_API" name="Testowanie_DOM_API">Testowanie DOM API</h2> <p>W dokumentacji tej znajdziesz do każdego interfejsu przykłady wykorzystania. W niektórych przypadkach są to kompletne strony HTML, działające z poziomu elementu <code><script></code>, z elementami (jak np. przyciski) niezbędnymi do uruchomienia skryptu, jak również elementami, którymi operuje DOM. W takim przypadku możesz po prostu skopiować przykład, wkleić go do nowego pliku, zapisać i uruchomić w przeglądarce.</p> <p>Jednakże, w wielu przypadkach przykłady są bardziej zwięzłe. Aby uruchomić kod, który pokazuje proste relacje między interfejsem a elementami HTML, możesz chcieć stworzyć stronę testową. Poniżej znajdziesz właśnie taką, prostą stronę do testów - funkcje testujące możesz umieścić w znaczniku <code><script></code> w nagłówku, umieszczono też kilka elementów wraz z atrybutami, którymi możesz swobodnie manipulować, a także interfejs użytkownika, pozwalający wywoływać funkcje testowe z poziomu przeglądarki.</p> <p>Możesz skorzystać z tej strony testowej lub stworzyć własną. Możesz zmieniać w razie potrzeby treść skryptu, dodać przyciski czy elementy.</p> <pre><html> <head> <title>DOM Tests</title> <script type="application/x-javascript"> function setBodyAttr(attr,value){ if(document.body) eval('document.body.'+attr+'="'+value+'"'); else notSupported(); } </script> </head> <body> <div style="margin: .5in; height="400""> <p><b><tt>text</tt> color</p> <form> <select onChange="setBodyAttr('text', this.options[this.selectedIndex].value);"> <option value="black">black <option value="darkblue">darkblue </select> <p><b><tt>bgColor</tt></p> <select onChange="setBodyAttr('bgColor', this.options[this.selectedIndex].value);"> <option value="white">white <option value="lightgrey">gray </select> <p><b><tt>link</tt></p> <select onChange="setBodyAttr('link', this.options[this.selectedIndex].value);"> <option value="blue">blue <option value="green">green </select> <small> <a href="http://www.brownhen.com/dom_api_top.html" id="sample"> (sample link)</a></small><br> </form> <form> <input type="button" value="version" onclick="ver()" /> </form> </div> </body> </html> </pre> <p><img alt="Przykładowa strona testowa DOM"><br> By przetestować więcej interfejsów na jednej stronie - np. komplet własności zmieniających kolory strony - możesz stworzyć podobną stronę z całą konsolą przycisków, pól tekstowych i innych elementów HTML. Poniższy zrzut ekranu przedstawia przykładowy pomysł pogrupowania interfejsów do testów.</p> <p>W tym przykładzie rozwijalne menu dynamicznie podmieniają takie aspekty strony jak kolor tła (<code>bgColor</code>), kolory linków (<code>aLink</code>), tekstu (<code>text</code>). Niezależnie od tego, jak zaprojektujesz swoją stronę testową - testowanie interfejsów jest ważnym elementem efektywnej nauki DOM.</p>