path: root/files/pl/dokumentacja_gecko_dom/przykłady_użycia_dom/index.html

---
title: Przykłady użycia DOM
slug: Dokumentacja_Gecko_DOM/Przykłady_użycia_DOM
tags:
  - DOM
  - Dokumentacja_Gecko_DOM
  - Gecko
  - Wszystkie_kategorie
translation_of: Web/API/Document_Object_Model/Examples
---
<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>&lt;!DOCTYPE html&gt;
&lt;html lang="pl"&gt;
&lt;head&gt;
&lt;title&gt;Przykład width/height&lt;/title&gt;
&lt;script&gt;
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 = "&lt;ul&gt;";
  for (var i = 0; i &lt; arrImages.length; i++)
    strHtml += "&lt;li&gt;image" + (i+1) +
            ": height=" + arrImages[i].height +
            ", width=" + arrImages[i].width +
            ", style.height=" + arrImages[i].style.height +
            ", style.width=" + arrImages[i].style.width +
            "&lt;\/li&gt;";
  strHtml += "&lt;\/ul&gt;";
  objOutput.innerHTML = strHtml;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="init();"&gt;

&lt;p&gt;Obrazek 1: Brak wysokości, szerokości oraz stylu
    &lt;img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"&gt;
&lt;/p&gt;
&lt;p&gt;Obrazek 2: height="50", width="500", lecz bez stylu
    &lt;img id="image2" src="http://www.mozilla.org/images/mozilla-banner.gif"
         height="50" width="500"&gt;
&lt;/p&gt;
&lt;p&gt;Obrazek 3: Brak wysokości, szerokości, lecz style="height: 50px; width: 500px;"
    &lt;img id="image3" src="http://www.mozilla.org/images/mozilla-banner.gif"
         style="height: 50px; width: 500px;"&gt;
&lt;/p&gt;

&lt;div id="output"&gt; &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</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>&lt;!DOCTYPE html&gt;
&lt;html lang="pl"&gt;
&lt;head&gt;
&lt;title&gt;Modyfikacja obramowania obrazka&lt;/title&gt;

&lt;script&gt;
function setBorderWidth(width) {
  document.getElementById("img1").style.borderWidth = width + "px";
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p&gt;
  &lt;img id="img1"
       src="image1.gif"
       style="border: 5px solid green;"
       width="100"
       height="100"
       alt="test obramowania"&gt;
&lt;/p&gt;

&lt;form name="FormName"&gt;
  &lt;input type="button" value="Utwórz obramowanie 20px-wide" onclick="setBorderWidth(20);"&gt;
  &lt;input type="button" value="Utwórz obramowanie 5px-wide" onclick="setBorderWidth(5);"&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</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>&lt;!DOCTYPE html&gt;
&lt;html lang="pl"&gt;
&lt;head&gt;
&lt;title&gt;Zmiana koloru i rozmiaru czcionki w przykładzie&lt;/title&gt;

&lt;script&gt;
function changeText() {
	var p = document.getElementById("pid");

    p.style.color = "blue"
	p.style.fontSize = "18pt"
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p id="pid" onclick="window.location.href = 'http://www.cnn.com/';"&gt;linker&lt;/p&gt;

&lt;form&gt;
  &lt;p&gt;&lt;input value="rec" type="button" onclick="changeText();"&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</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 &lt; ss.length; i++) {
  for(var j=0; j &lt; 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>&lt;!DOCTYPE html&gt;
&lt;html lang="pl"&gt;
&lt;head&gt;
  &lt;title&gt;Propagowanie zdarzeń&lt;/title&gt;
  &lt;style&gt;
    #t-daddy { border: 1px solid red }
    #t1 { background-color: pink; }
  &lt;/style&gt;
  &lt;script&gt;
  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);
  }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body onload="load();"&gt;

&lt;table id="t-daddy" onclick="alert('hi');"&gt;
  &lt;tr id="t"&gt;
     &lt;td id="t1"&gt;jeden&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td id="t2"&gt;dwa&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</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>&lt;!DOCTYPE html&gt;
&lt;html lang="pl"&gt;
&lt;head&gt;

&lt;title&gt;Przykład getComputedStyle&lt;/title&gt;

&lt;script&gt;
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;
  }
 &lt;/script&gt;

 &lt;style&gt;
   #d1 { margin-left: 10px; background-color: rgb(173, 216, 230);
height: 20px; max-width: 20px; }
 &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="d1"&gt;&amp;nbsp;&lt;/div&gt;

&lt;form action=""&gt;
&lt;p&gt;&lt;button type="button" onclick="cStyles();"&gt;getComputedStyle&lt;/button&gt;
  height&lt;input id="t1" type="text" value="1"&gt;
  max-width&lt;input id="t2" type="text" value="2"&gt;
  bg-color&lt;input id="t3" type="text" value="3"&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</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>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;Show Event properties&lt;/title&gt;

&lt;style&gt;
  table {border-collapse: collapse;}
  thead {font-weight: bold;}
  td {padding: 2px 10px 2px 10px;}
  .odd {background-color: #efdfef;}
  .even {background-color: #ffffff;}
&lt;/style&gt;

&lt;script&gt;

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&lt;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);
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;h1&gt;Properties of the DOM &lt;span id="eventType"&gt;&lt;/span&gt; Event Object&lt;/h1&gt;
&lt;/body&gt;

&lt;/html&gt;
</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>&lt;table id="table0"&gt;
 &lt;tr&gt;
  &lt;td&gt;Row 0 Cell 0&lt;/td&gt;
  &lt;td&gt;Row 0 Cell 1&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;

&lt;script&gt;

var table = document.getElementById('table0');
var row = table.insertRow(-1);
var cell, text;

for (var i=0; i&lt;2; i++) {
  cell = row.insertCell(-1);
  text = 'Row ' + row.rowIndex + ' Cell ' + i;
  cell.appendChild(document.createTextNode(text));
}
&lt;/script&gt;
</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>