diff options
Diffstat (limited to 'files/pl/web/api/document_object_model')
3 files changed, 613 insertions, 0 deletions
diff --git a/files/pl/web/api/document_object_model/examples/index.html b/files/pl/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..294e891bfe --- /dev/null +++ b/files/pl/web/api/document_object_model/examples/index.html @@ -0,0 +1,355 @@ +--- +title: Przykłady użycia DOM +slug: Web/API/Document_Object_Model/Examples +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document_Object_Model/Examples +original_slug: Dokumentacja_Gecko_DOM/Przykłady_użycia_DOM +--- +<p>{{ ApiRef() }}</p> + +<p>Rozdział ten pokazuje kilka dłuższych przykładów użycia DOM na stronach internetowych i zastosowanie <a href="pl/XML">XML</a>-a. Gdzie tylko jest to możliwe, przykłady używają ogólnie API, trików i wzorów kodu napisanych w JavaScripcie służących do manipulacji obiektem dokumentu.</p> + +<h3 id="Przyk.C5.82ad_1:_Wysoko.C5.9B.C4.87_i_szeroko.C5.9B.C4.87" name="Przyk.C5.82ad_1:_Wysoko.C5.9B.C4.87_i_szeroko.C5.9B.C4.87">Przykład 1: Wysokość i szerokość</h3> + +<p>Następujący przykład pokazuje użycie własności <code>height</code> i <code>width</code> obok obrazków, które się różnią rozmiarami:</p> + +<pre><!DOCTYPE html> +<html lang="pl"> +<head> +<title>Przykład width/height</title> +<script> +function init() +{ + var arrImages = new Array(3); + + arrImages[0] = document.getElementById("image1"); + arrImages[1] = document.getElementById("image2"); + arrImages[2] = document.getElementById("image3"); + var objOutput = document.getElementById("output"); + var strHtml = "<ul>"; + for (var i = 0; i < arrImages.length; i++) + strHtml += "<li>image" + (i+1) + + ": height=" + arrImages[i].height + + ", width=" + arrImages[i].width + + ", style.height=" + arrImages[i].style.height + + ", style.width=" + arrImages[i].style.width + + "<\/li>"; + strHtml += "<\/ul>"; + objOutput.innerHTML = strHtml; +} +</script> +</head> +<body onload="init();"> + +<p>Obrazek 1: Brak wysokości, szerokości oraz stylu + <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"> +</p> +<p>Obrazek 2: height="50", width="500", lecz bez stylu + <img id="image2" src="http://www.mozilla.org/images/mozilla-banner.gif" + height="50" width="500"> +</p> +<p>Obrazek 3: Brak wysokości, szerokości, lecz style="height: 50px; width: 500px;" + <img id="image3" src="http://www.mozilla.org/images/mozilla-banner.gif" + style="height: 50px; width: 500px;"> +</p> + +<div id="output"> </div> +</body> +</html> +</pre> + +<p><code>height</code> i <code>width</code> są także własnościami elementów <code>OBJECT</code> i <code>APPLET</code>.</p> + +<h3 id="Przyk.C5.82ad_2:_Atrybuty_obrazu" name="Przyk.C5.82ad_2:_Atrybuty_obrazu">Przykład 2: Atrybuty obrazu</h3> + +<pre><!DOCTYPE html> +<html lang="pl"> +<head> +<title>Modyfikacja obramowania obrazka</title> + +<script> +function setBorderWidth(width) { + document.getElementById("img1").style.borderWidth = width + "px"; +} +</script> +</head> + +<body> +<p> + <img id="img1" + src="image1.gif" + style="border: 5px solid green;" + width="100" + height="100" + alt="test obramowania"> +</p> + +<form name="FormName"> + <input type="button" value="Utwórz obramowanie 20px-wide" onclick="setBorderWidth(20);"> + <input type="button" value="Utwórz obramowanie 5px-wide" onclick="setBorderWidth(5);"> +</form> + +</body> +</html> +</pre> + +<h3 id="Przyk.C5.82ad_3:_Manipulacja_stylami" name="Przyk.C5.82ad_3:_Manipulacja_stylami">Przykład 3: Manipulacja stylami</h3> + +<p>W tym prostym przykładzie, niektóre podstawowe własności stylów elementu znacznika HTML są dostępne przy zastosowaniu obiektów stylu elementu i obiektów własności stylu CSS, który może być odzyskiwany i ustawiany z DOM. W tym przypadku manipulujemy bezpośrednio pojedynczym stylem. W następnym przykładzie (zobacz <a href="#Przyk.C5.82ad_4:_Zastosowanie_styl.C3.B3w">przykład 4</a>), zastosujemy arkusz stylów i jego reguły do zmiany stylów w dokumentach wokół.</p> + +<pre><!DOCTYPE html> +<html lang="pl"> +<head> +<title>Zmiana koloru i rozmiaru czcionki w przykładzie</title> + +<script> +function changeText() { + var p = document.getElementById("pid"); + + p.style.color = "blue" + p.style.fontSize = "18pt" +} +</script> +</head> +<body> + +<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> + +<form> + <p><input value="rec" type="button" onclick="changeText();"></p> +</form> + +</body> +</html> +</pre> + +<h3 id="Przyk.C5.82ad_4:_Zastosowanie_styl.C3.B3w" name="Przyk.C5.82ad_4:_Zastosowanie_styl.C3.B3w">Przykład 4: Zastosowanie stylów</h3> + +<p>Własność obiektu dokumentu styleSheets zwraca listę arkusza stylów wczytanego do tegoż dokumentu. Można uzyskać dostęp do indywidualnych własności arkusza stylów używając obiektów stylesheet, style oraz CSSRule jak zademonstrowano w poniższym przykładzie, który wyświetla selektory reguł stylu na konsole.</p> + +<pre>var ss = document.styleSheets; + +for(var i=0; i < ss.length; i++) { + for(var j=0; j < ss[i].cssRules.length; j++) { + console.log(ss[i].cssRules[j].selectorText + "\n" ); + } +} +</pre> + +<p>Dla dokumentu posiadającego tylko jeden styl, dla którego zdefiniowano 3 poniższe reguły:</p> + +<pre class="eval">body { background-color: darkblue; } +p { font-face: Arial; font-size: 10pt; margin-left: .125in; } +#lumpy { display: none; } +</pre> + +<p>Wynik skryptu będzie następujący:</p> + +<pre class="eval">BODY +P +#LUMPY +</pre> + +<h3 id="Przyk.C5.82ad_5:_Propagowanie_zdarze.C5.84" name="Przyk.C5.82ad_5:_Propagowanie_zdarze.C5.84">Przykład 5: Propagowanie zdarzeń</h3> + +<p>Poniższy przykład demonstruje w prosty sposób jak zainicjować zdarzenia oraz ich obsługę przez DOM. Kiedy BODY tegoż dokumentu zostanie załadowany nasłuch zdarzeń zostaje zarejestrowany w pierwszym rzędzie TABLE. Nasłuch zdarzeń obsługuje zdarzenie przez wykonanie funkcji l_func, która zmienia wartość dolnej komórki tabeli.</p> + +<p>Jednakże, l_func wywołuje również metodę obiektu zdarzenia <a href="pl/DOM/event.stopPropagation">event.stopPropagation</a> powstrzymującą zdarzenie od dalszego "mieszania" w DOM-ie. Zauważ, że sama tabela posiada uchwyt zdarzenia <a href="pl/DOM/element.onclick">onclick</a>, który powinien wyświetlić powiadomienie w przypadku kliknięcia na tabelę. Metoda l_func powstrzymała propagacje, tak wiec po zaktualizowaniu danych tabeli faza zdarzenia została zakończona.</p> + +<pre><!DOCTYPE html> +<html lang="pl"> +<head> + <title>Propagowanie zdarzeń</title> + <style> + #t-daddy { border: 1px solid red } + #t1 { background-color: pink; } + </style> + <script> + function stopEvent(e) { + t2 = document.getElementById("t2"); + t2.innerHTML = "hej"; + // this ought to keep t-daddy from getting the click. + e.stopPropagation(); + alert("propagowanie zdarzeń zatrzymane."); + } + function load() { + el = document.getElementById("t"); + el.addEventListener("click", stopEvent, false); + } + </script> +</head> +<body onload="load();"> + +<table id="t-daddy" onclick="alert('hi');"> + <tr id="t"> + <td id="t1">jeden</td> + </tr> + <tr> + <td id="t2">dwa</td> + </tr> +</table> +</body> +</html> +</pre> + +<h3 id="Przyk.C5.82ad_6:_getComputedStyle" name="Przyk.C5.82ad_6:_getComputedStyle">Przykład 6: getComputedStyle</h3> + +<p>Poniższy przykład demonstruje jak użyć metody DOM document.defaultView.getComputedStyle() do pobrania stylu elementu, który nie jest zgodny z językiem JavaScript (np., elementReference.style.backgroundColor="rgb(173, 216, 230)"). Typy stylów można pobrać w bardziej bezpośredni sposób style = własności elementReference.style, których lista własności przedstawiona jest <a href="pl/DOM/style">DOM Style Reference</a> książki (patrz <a href="pl/DOM/CSS">DOM CSS Properties List</a>). Zobacz również własności stylów w <a href="pl/DOM/element">DOM Elements Reference</a>. getComputedStyle() zwraca obiekt ComputedCSSStyleDeclaration, którego własności stylów można związać z metodą getPropertyValue() obiektu, jak pokazuje poniższy przykład dokumentu.</p> + +<pre><!DOCTYPE html> +<html lang="pl"> +<head> + +<title>Przykład getComputedStyle</title> + +<script> +function cStyles() { + var RefDiv = document.getElementById("d1"); + + var txtHeight = document.getElementById("t1"); + var h_style = +document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height"); + txtHeight.value = h_style; + + var txtWidth = document.getElementById("t2"); + var w_style = +document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width"); + txtWidth.value = w_style; + + var txtBackgroundColor = document.getElementById("t3"); + var b_style = +document.defaultView.getComputedStyle(RefDiv, +null).getPropertyValue("background-color"); + txtBackgroundColor.value = b_style; + } + </script> + + <style> + #d1 { margin-left: 10px; background-color: rgb(173, 216, 230); +height: 20px; max-width: 20px; } + </style> + +</head> + +<body> + +<div id="d1">&nbsp;</div> + +<form action=""> +<p><button type="button" onclick="cStyles();">getComputedStyle</button> + height<input id="t1" type="text" value="1"> + max-width<input id="t2" type="text" value="2"> + bg-color<input id="t3" type="text" value="3"></p> +</form> + +</body> +</html> +</pre> + +<h3 id="Przyk.C5.82ad_7:_Wy.C5.9Bwietlanie_sta.C5.82ych_obiektu_zdarzenia" name="Przyk.C5.82ad_7:_Wy.C5.9Bwietlanie_sta.C5.82ych_obiektu_zdarzenia">Przykład 7: Wyświetlanie stałych obiektu zdarzenia</h3> + +<p>Przykład pokazuje jak używając DOM można stworzyć tabele zawierającą zarówno wszystkie stałe obiektu zdarzenia jak i ich wartości. Pokazuje kilka ciekawych aspektów DOM, włączając w to własność Event.prototype pozwalającą uzyskać dostęp do własności danego obiektu, dobry wzorzec iteracji przez własności tegoż prototypu oraz same wartości stałych wyświetlanych w tabeli. Zauważ, że środkowy zakres zmiennych to kody znaków reprezentujące klawisze wciśnięte podczas zdarzenia (i do pobrania za pomocą własności charCode). Załaduj poniższy kod jako stronę www, aby zobaczyć stale obiektu zdarzenia.</p> + +<pre><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>Show Event properties</title> + +<style> + table {border-collapse: collapse;} + thead {font-weight: bold;} + td {padding: 2px 10px 2px 10px;} + .odd {background-color: #efdfef;} + .even {background-color: #ffffff;} +</style> + +<script> + +function showEventProperties(e) { + function addCell(row, text) { + var cell = row.insertCell(-1); + cell.appendChild(document.createTextNode(text)); + } + + var e = e || window.event; + document.getElementById('eventType').innerHTML = e.type; + + var table = document.createElement('table'); + var thead = table.createTHead(); + var row = thead.insertRow(-1); + var lableList = ['#', 'Property', 'Value']; + var len = lableList.length; + + for (var i=0; i<len; i++) { + addCell(row, lableList[i]); + } + + var tbody = document.createElement('tbody'); + table.appendChild(tbody); + + for (var p in e) { + row = tbody.insertRow(-1); + row.className = (row.rowIndex % 2)? 'odd':'even'; + addCell(row, row.rowIndex); + addCell(row, p); + addCell(row, e[p]); + } + + document.body.appendChild(table); +} +window.onload = function(event){ + showEventProperties(event); +} +</script> +</head> + +<body> +<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> +</body> + +</html> +</pre> + +<h3 id="Przyk.C5.82ad_8:_Zastosowanie_interfejsu_DOM_Table" name="Przyk.C5.82ad_8:_Zastosowanie_interfejsu_DOM_Table">Przykład 8: Zastosowanie interfejsu DOM Table</h3> + +<p>Interfejs DOM HTMLTableElement dostarcza kilku wygodnych metod do tworzenia i modyfikacji tabeli. Dwoma często stosowanymi metodami są <code><a href="pl/DOM/table.insertRow">table.insertRow</a></code> i <code><a href="pl/DOM/tableRow.insertCell">row.insertCell</a></code>.</p> + +<p>Aby dodać wiersz i kilka komórek do istniejącej tabeli:</p> + +<pre><table id="table0"> + <tr> + <td>Row 0 Cell 0</td> + <td>Row 0 Cell 1</td> + </tr> +</table> + +<script> + +var table = document.getElementById('table0'); +var row = table.insertRow(-1); +var cell, text; + +for (var i=0; i<2; i++) { + cell = row.insertCell(-1); + text = 'Row ' + row.rowIndex + ' Cell ' + i; + cell.appendChild(document.createTextNode(text)); +} +</script> +</pre> + +<h4 id="Uwagi" name="Uwagi">Uwagi</h4> + +<ul> + <li>A table's <code><a href="pl/DOM/element.innerHTML">innerHTML</a></code> property should never be used to modify a table, although you can use it to write an entire table or the content of a cell.</li> + <li>If DOM Core methods <code><a href="pl/DOM/document.createElement">document.createElement</a></code> and <code><a href="pl/DOM/element.appendChild">element.appendChild</a></code> are used to create rows and cells, IE requires that they are appended to a tbody element, whereas other browsers will allow appending to a table element (the rows will be added to the last tbody element).</li> + <li>There are a number of other convenience methods belonging to the <a href="pl/DOM/table#Metody">table interface</a> that can be used for creating and modifying tables.</li> +</ul> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/Gecko_DOM_Reference/Examples", "es": "es/Referencia_DOM_de_Gecko/Ejemplos", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Exemples", "ja": "ja/Gecko_DOM_Reference/Examples" } ) }}</p> diff --git a/files/pl/web/api/document_object_model/index.html b/files/pl/web/api/document_object_model/index.html new file mode 100644 index 0000000000..65d3e598e5 --- /dev/null +++ b/files/pl/web/api/document_object_model/index.html @@ -0,0 +1,86 @@ +--- +title: Dokumentacja Gecko DOM +slug: Web/API/Document_Object_Model +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document_Object_Model +original_slug: Dokumentacja_Gecko_DOM +--- +<p> +</p><p>Ta strona jest przyszłym spisem treści Dokumentacji Gecko DOM, którą przenosimy <a class="external" href="http://www.mozilla.org/docs/dom/domref/">stąd</a>. +</p><p><br> +</p> +<h4 id="Przedmowa"> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa">Przedmowa</a> </h4> +<ul><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#O_dokumentacji">O dokumentacji</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#Kto_j.C4.85_powinien_przeczyta.C4.87">Kto ją powinien przeczytać</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#Czym_jest_Gecko.3F">Czym jest Gecko?</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#Sk.C5.82adnia_API">Składnia API</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przedmowa#Korzystanie_z_przyk.C5.82ad.C3.B3w">Korzystanie z przykładów</a> +</li></ul> +<h4 id="Wprowadzenie"> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie">Wprowadzenie</a> </h4> +<ul><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Czym_jest_DOM.3F">Czym jest DOM?</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#DOM_vs._JavaScript">DOM vs. JavaScript</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Jak_korzysta.C4.87_z_DOM.3F">Jak korzystać z DOM?</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Wa.C5.BCne_typy_danych">Ważne typy danych</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Interfejsy_DOM">Interfejsy DOM</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie#Testowanie_DOM_API">Testowanie DOM API</a> +</li></ul> +<h4 id="Elementy_w_DOM"> <a href="pl/DOM/element">Elementy w DOM</a> </h4> +<ul><li> <a href="pl/DOM/element#Wprowadzenie">Wprowadzenie</a> +</li><li> <a href="pl/DOM/element#W.C5.82asno.C5.9Bci">Własności</a> +</li><li> <a href="pl/DOM/element#Metody">Metody</a> +</li><li> <a href="pl/DOM/element#Uchwyty_zdarze.C5.84">Uchwyty zdarzeń</a> +</li></ul> +<h4 id="Obiekt_window"> <a href="pl/DOM/window">Obiekt window</a> </h4> +<ul><li> <a href="pl/DOM/window#Wprowadzenie">Wprowadzenie</a> +</li><li> <a href="pl/DOM/window#W.C5.82asno.C5.9Bci">Własności</a> +</li><li> <a href="pl/DOM/window#Metody">Metody</a> +</li><li> <a href="pl/DOM/window#Uchwyty_zdarze.C5.84">Uchwyty zdarzeń</a> +</li></ul> +<h4 id="Obiekt_document"> <a href="pl/DOM/document">Obiekt document</a> </h4> +<ul><li> <a href="pl/DOM/document#Wprowadzenie">Wprowadzenie</a> +</li><li> <a href="pl/DOM/document#W.C5.82asno.C5.9Bci">Własności</a> +</li><li> <a href="pl/DOM/document#Metody">Metody</a> +</li></ul> +<h4 id="Zdarzenia"> <a href="pl/DOM/event">Zdarzenia</a> </h4> +<ul><li> <a href="pl/DOM/event#Wprowadzenie">Wprowadzenie</a> +</li><li> <a href="pl/DOM/event#W.C5.82asno.C5.9Bci">Własności</a> +</li><li> <a href="pl/DOM/event#Metody">Metody</a> +</li></ul> +<h4 id="Style_w_DOM"> <a href="pl/DOM/style">Style w DOM</a> </h4> +<ul><li> <a href="pl/DOM/style#Notatki">Notatki</a> +</li><li> <a href="pl/DOM/style#Materia.C5.82y_do_przeniesienia_na_inne_strony">Materiały do przeniesienia na inne strony</a> +</li></ul> +<h4 id="DOM_range"> <a href="pl/DOM/range">DOM range</a> </h4> +<ul><li> <a href="pl/DOM/range#Wprowadzenie">Wprowadzenie</a> +</li><li> <a href="pl/DOM/range#W.C5.82asno.C5.9Bci">Własności</a> +</li><li> <a href="pl/DOM/range#Metody">Metody</a> +</li></ul> +<h4 id="Interfejs_elementu_HTML_FORM"> <a href="pl/DOM/form">Interfejs elementu HTML FORM</a> </h4> +<ul><li> <a href="pl/DOM/form#Interfejs_elementu_HTML_FORM">Interfejs elementu HTML FORM</a> +</li><li> <a href="pl/DOM/form#W.C5.82asno.C5.9Bci">Własności</a> +</li><li> <a href="pl/DOM/form#Metody">Metody</a> +</li></ul> +<h4 id="Interfejs_elementu_HTML_TABLE"> <a href="pl/DOM/table">Interfejs elementu HTML TABLE</a> </h4> +<ul><li> <a href="pl/DOM/table#Interfejs_elementu_HTML_TABLE">Interfejs elementu HTML TABLE</a> +</li><li> <a href="pl/DOM/table#W.C5.82asno.C5.9Bci">Własności</a> +</li><li> <a href="pl/DOM/table#Metody">Metody</a> +</li></ul> +<h4 id="Przyk.C5.82ady_u.C5.BCycia_DOM"> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykłady użycia DOM</a> </h4> +<ul><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_1:_Wysoko.C5.9B.C4.87_i_szeroko.C5.9B.C4.87">Przykład 1: Wysokość i szerokość</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_2:_Atrybuty_obrazu">Przykład 2: Atrybuty obrazu</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_3:_Manipulacja_stylami">Przykład 3: Manipulacja stylami</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_4:_Zastosowanie_styl.C3.B3w">Przykład 4: Zastosowanie stylów</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_5:_Propagowanie_zdarze.C5.84">Przykład 5: Propagowanie zdarzeń</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_6:_getComputedStyle">Przykład 6: getComputedStyle</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_7:_Wy.C5.9Bwietlanie_sta.C5.82ych_obiektu_zdarzenia">Przykład 7: Wyświetlanie stałych obiektu zdarzenia</a> +</li><li> <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM#Przyk.C5.82ad_8:_Zastosowanie_interfejsu_DOM_Table">Przykład 8: Zastosowanie interfejsu DOM Table</a> +</li></ul> +<p><br> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Gecko_DOM_Reference", "es": "es/Referencia_DOM_de_Gecko", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko", "it": "it/Reference_del_DOM_di_Gecko", "ja": "ja/Gecko_DOM_Reference", "ko": "ko/Gecko_DOM_Reference", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003" } ) }} 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> |