diff options
Diffstat (limited to 'files/pl/web/api/document_object_model/introduction/index.html')
| -rw-r--r-- | files/pl/web/api/document_object_model/introduction/index.html | 172 |
1 files changed, 172 insertions, 0 deletions
diff --git a/files/pl/web/api/document_object_model/introduction/index.html b/files/pl/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..074d814fce --- /dev/null +++ b/files/pl/web/api/document_object_model/introduction/index.html @@ -0,0 +1,172 @@ +--- +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> |