From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pl/dokumentacja_gecko_dom/index.html | 85 +++++ .../pl/dokumentacja_gecko_dom/przedmowa/index.html | 46 +++ .../przyk\305\202ady_u\305\274ycia_dom/index.html" | 354 +++++++++++++++++++++ .../dokumentacja_gecko_dom/wprowadzenie/index.html | 171 ++++++++++ 4 files changed, 656 insertions(+) create mode 100644 files/pl/dokumentacja_gecko_dom/index.html create mode 100644 files/pl/dokumentacja_gecko_dom/przedmowa/index.html create mode 100644 "files/pl/dokumentacja_gecko_dom/przyk\305\202ady_u\305\274ycia_dom/index.html" create mode 100644 files/pl/dokumentacja_gecko_dom/wprowadzenie/index.html (limited to 'files/pl/dokumentacja_gecko_dom') diff --git a/files/pl/dokumentacja_gecko_dom/index.html b/files/pl/dokumentacja_gecko_dom/index.html new file mode 100644 index 0000000000..e4c1475516 --- /dev/null +++ b/files/pl/dokumentacja_gecko_dom/index.html @@ -0,0 +1,85 @@ +--- +title: Dokumentacja Gecko DOM +slug: Dokumentacja_Gecko_DOM +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document_Object_Model +--- +

+

Ta strona jest przyszłym spisem treści Dokumentacji Gecko DOM, którą przenosimy stąd. +


+

+

Przedmowa

+ +

Wprowadzenie

+ +

Elementy w DOM

+ +

Obiekt window

+ +

Obiekt document

+ +

Zdarzenia

+ +

Style w DOM

+ +

DOM range

+ +

Interfejs elementu HTML FORM

+ +

Interfejs elementu HTML TABLE

+ +

Przykłady użycia DOM

+ +


+

+
+
+{{ 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/dokumentacja_gecko_dom/przedmowa/index.html b/files/pl/dokumentacja_gecko_dom/przedmowa/index.html new file mode 100644 index 0000000000..6cf8a2b1f0 --- /dev/null +++ b/files/pl/dokumentacja_gecko_dom/przedmowa/index.html @@ -0,0 +1,46 @@ +--- +title: Przedmowa +slug: Dokumentacja_Gecko_DOM/Przedmowa +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document_Object_Model +--- +

{{ ApiRef() }}

+

O dokumentacji

+

Ten rozdział opisuje przewodnik jaki czytasz: czyli czym jest, jakie informacje są w nim zaprezentowane i w jaki sposób można użyć przykładów zawartych w dokumentacji do własnego programowania.

+

Uwaga, bo ten dokument nie służy do programowania i nie jest aktualnie pełną listą metod DOM i własności zaimplementowanych w Gecko. Każdy indywidualny rozdział dokumentu (np., Obiekt document) są w pełni opisanym obiektem(ami). Jako informacje dokumentacji dla rozmaitych użytkowników wraz z odnośnikami do poszczególnych części API będą zintegrowane z tym dokumentem.

+

Kto powinien ją przeczytać

+

Czytelnik dokumentacji Gecko DOM jest programista piszący strony internetowe lub wprawny użytkownik sieci, który wie trochę o pisaniu stron oraz zna ich budowę. W dokumentacji nie tworzy się założeń, że czytelnik posiada wiedzę z DOM, z XML, z tematyki serwerów sieciowych lub standardów sieciowych, czy nawet z JavaScriptu, bo język, w którym DOM został stworzony, jest dostępny dla czytającego tą dokumentację. Natomiast w tym dokumencie założono, że czytelnik ma obycie z HTML, ze znacznikami, z podstawową strukturą stron internetowych, z przeglądarkami i z arkuszami stylów.

+

We wstępnym materiale, znajduje się wiele przykładów i ich wykorzystanie na bardzo wysokim poziomie, dokument jest dla "początkujących" programistów sieciowych. Ogólnie, kiedykolwiek, dokumentacja API powinna być wartościowa zarówno dla doświadczonych jak i niedoświadczonych deweloperów.

+

Czym jest Gecko?

+

Mozilla, Firefox, Netscape 6+, i inne oparte o Mozillę przeglądarki posiadają identyczną implementację DOM. Dzieje się tak ponieważ używają tej samej technologii. naturally, it applies only to products based on the same version of Gecko, but it\'s tricky to explain

+

Gecko, komponent oprogramowania w tych przeglądarkach, który obsługuje przetwarzanie kodu HTML, rozmieszczenie elementów na stronach, model obiektowy dokumentu (DOM), a nawet tworzenie całego interfejsu aplikacji, jest szybkim, zgodnym ze standardami silnikiem renderowania, który implementuje standard W3C DOM i podobny do DOM (ale niestandardowy) model obiektowy przeglądarki (np., window i inne) w kontekście stron WWW i interfejsu aplikacji.

+

Mimo, że interfejs aplikacji i zawartość wyświetlana przez przeglądarkę różnią się w wielu praktycznych aspektach, DOM reprezentuje je jednorodnie jako hierarchię węzłów. (commenting this incomplete sentence out for now...) The tree structure of the DOM (which in its application to the user

+

Składnia API

+

Każdy opis w dokumentacji API zawiera przykłady składni, parametry wejścia - wyjścia (gdzie podawany jest również typ zmiennej), przykład, dodatkowe uwagi i link do odpowiedniego tematu w specyfikacji.

+

Normalnie właściwości tylko do odczytu posiadają tylko jedna linię składni, gdyż mogą być one tylko odczytane a nie zapisane. Na przykład własność availHeight obiektu screen zawiera następująca informacje:

+
+ Grafika:Preface2.gif
+

Oznacza to, że można używać tylko własności z prawej strony wyrażenia; dla własności typu odczyt/zapis można je wykorzystywać po obydwu stronach wyrażenia jak ilustruje poniższy przykład:

+
+ Grafika:Prefacea.gif
+

Ogólnie, dla obiektów opisanych powyżej jest podana prosta składnia, np. element dla wszystkich elementów, document dla głównych dokumentów obiektu, table dla obiektu TABLE itd. (zobacz Ważne typy danych dla różnych typów danych).

+

Korzystanie z przykładów

+

Wiele przykładów w tej dokumentacji jest pełnymi plikami, które możemy wykorzystać poprzez skopiowanie i wklejenie do nowego pliku i następnie otworzenie w swojej przeglądarce. Reszta jest tylko fragmentami kodu. Taki fragment możesz uruchomić poprzez umieszczenie go w wewnątrz funkcji JavaScript zwracającej nazwę. Na przykład własność window.document może być testowana wewnątrz funkcji takiej jak ta poniżej, która jest wywołana za pomocą przycisku:

+
<html>
+<script>
+function testWinDoc() {
+doc= window.document;
+alert(doc.title);
+}
+</script>
+<button onclick="testWinDoc();">Test własności dokumentu</button>
+</html>
+
+

Podobne funkcje i strony można wymyślić dla wszystkich składników obiektów, które jeszcze nie znajdują się w pakiecie. Zobacz temat Testowanie DOM API we wprowadzeniu dla "test harness", który będziesz mógł użyć do testowania liczby wszystkich API na raz.

+
+  
+

{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "es": "es/Referencia_DOM_de_Gecko/Prefacio", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Pr\u00e9face", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}

diff --git "a/files/pl/dokumentacja_gecko_dom/przyk\305\202ady_u\305\274ycia_dom/index.html" "b/files/pl/dokumentacja_gecko_dom/przyk\305\202ady_u\305\274ycia_dom/index.html" new file mode 100644 index 0000000000..90d24738ef --- /dev/null +++ "b/files/pl/dokumentacja_gecko_dom/przyk\305\202ady_u\305\274ycia_dom/index.html" @@ -0,0 +1,354 @@ +--- +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 +--- +

{{ ApiRef() }}

+ +

Rozdział ten pokazuje kilka dłuższych przykładów użycia DOM na stronach internetowych i zastosowanie XML-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.

+ +

Przykład 1: Wysokość i szerokość

+ +

Następujący przykład pokazuje użycie własności height i width obok obrazków, które się różnią rozmiarami:

+ +
<!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>
+
+ +

height i width są także własnościami elementów OBJECT i APPLET.

+ +

Przykład 2: Atrybuty obrazu

+ +
<!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>
+
+ +

Przykład 3: Manipulacja stylami

+ +

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 przykład 4), zastosujemy arkusz stylów i jego reguły do zmiany stylów w dokumentach wokół.

+ +
<!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>
+
+ +

Przykład 4: Zastosowanie stylów

+ +

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.

+ +
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" );
+  }
+}
+
+ +

Dla dokumentu posiadającego tylko jeden styl, dla którego zdefiniowano 3 poniższe reguły:

+ +
body { background-color: darkblue; }
+p { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+
+ +

Wynik skryptu będzie następujący:

+ +
BODY
+P
+#LUMPY
+
+ +

Przykład 5: Propagowanie zdarzeń

+ +

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.

+ +

Jednakże, l_func wywołuje również metodę obiektu zdarzenia event.stopPropagation powstrzymującą zdarzenie od dalszego "mieszania" w DOM-ie. Zauważ, że sama tabela posiada uchwyt zdarzenia onclick, 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.

+ +
<!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>
+
+ +

Przykład 6: getComputedStyle

+ +

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 DOM Style Reference książki (patrz DOM CSS Properties List). Zobacz również własności stylów w DOM Elements Reference. 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.

+ +
<!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>
+
+ +

Przykład 7: Wyświetlanie stałych obiektu zdarzenia

+ +

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.

+ +
<!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>
+
+ +

Przykład 8: Zastosowanie interfejsu DOM Table

+ +

Interfejs DOM HTMLTableElement dostarcza kilku wygodnych metod do tworzenia i modyfikacji tabeli. Dwoma często stosowanymi metodami są table.insertRow i row.insertCell.

+ +

Aby dodać wiersz i kilka komórek do istniejącej tabeli:

+ +
<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>
+
+ +

Uwagi

+ + + +
 
+ +

{{ 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" } ) }}

diff --git a/files/pl/dokumentacja_gecko_dom/wprowadzenie/index.html b/files/pl/dokumentacja_gecko_dom/wprowadzenie/index.html new file mode 100644 index 0000000000..2ffb9814a7 --- /dev/null +++ b/files/pl/dokumentacja_gecko_dom/wprowadzenie/index.html @@ -0,0 +1,171 @@ +--- +title: Wprowadzenie +slug: Dokumentacja_Gecko_DOM/Wprowadzenie +tags: + - DOM + - Gecko +translation_of: Web/API/Document_Object_Model/Introduction +--- +

Ten rozdział ma dać ogólne pojęcie o DOM: co to jest, o strukturze dla dokumentów HTML i XML, jak korzystać z DOM oraz w jaki sposób przedstawiona będzie dokumentacja i przykłady.

+ +

Czym jest DOM?

+ +

Model obiektowy dokumentu (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.

+ +

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 <P> ze strony HTML jako tablicę węzłów, kiedy poniższy skrypt wywoła metodę getElementsByTagName:

+ +
paragraphs = document.getElementsByTagName("P");
+// paragraphs[0] to pierwszy element <p>
+// paragraphs[1] - drugi element <p>, etc.
+alert(paragraphs[0].nodeName);
+
+ +

Wszystkie metody, właściwości i wydarzenie dostępne dla webmastera w celu manipulowania lub tworzenia stron są zorganizowane w obiekty (np. obiekt document, reprezentujący sam dokument, obiekt table, implementujący specjalny interfejs DOM HTMLTableElement, który umożliwia dostęp do tabel w HTML, itd.) Niniejsza dokumentacja przedstawia opis każdego z obiektów w tym API.

+ +

DOM vs. JavaScript

+ +

Powyższy przykład, jak i inne w tej dokumentacji, napisano w JavaScript. Ściślej, został on + + napisany + w JavaScript, ale + + korzysta + 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ć.

+ +

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:

+ +
# 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");
+
+ +

Jak korzystać z DOM?

+ +

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.

+ +

Kiedy tworzysz nowy skrypt - niezależnie, czy jest to on zagnieżdżony w elemencie <SCRIPT>, czy też załączony do strony w odpowiedni sposób - możesz od razu zacząć korzystać z API dla elementów document lub window 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ę alert() obiektu window, może jednak korzystać z bardziej skomplikowanych metod, by tworzyć nową zawartość - tak jak w drugim z poniższych przykładów.

+ +
<body onload="window.alert('Witaj!');">
+
+ +

Niezależnie od elementu <script>, w którym poniższy skrypt jest zdefiniowany, kod ten tworzy nowy element H1, dodaje do niego tekst, a następnie włącza H1 do drzewa dokumentu.

+ +
<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>
+
+ +

Ważne typy danych

+ +

Interfejsy DOM

+ +

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 + bytów + , jakich możesz użyć do manipulowania hierarchią DOM. Z punktu widzenia programisty zwykle nie jest istotne, że obiekt reprezentujący element HTML FORM pobiera własność name z interfejsu HTMLFormElement, a własność className z interfejsu HTMLElement. W obu przypadkach własność, która Ciebie interesuje, znajduje się po prostu w obiekcie form.

+ +

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.

+ +

Interfejsy a obiekty

+ +

W niektórych przypadkach obiekt przedstawia tylko jeden interfejs, jednak z reguły obiekty - takie jak np. table - reprezentują kilka różnych interfejsów. Dla przykładu - table implementuje specjalny interfejs HTMLTableElement, który zawiera metody takie jak XXX i YYY. Ponieważ jednak jest to element HTML, table implementuje też interfejs Element, opisany w rozdziale Obiekt element. 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 table implementuje także bardziej podstawowy interfejs Node, z którego wywodzi się Element.

+ +

Kiedy otrzymasz referencję do obiektu table, tak jak w poniższym przykładzie, używasz zazwyczaj zamiennie wszystkich trzech interfejsów, być może nawet o tym nie wiedząc.

+ +
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";
+
+ +

Najważniejsze interfejsy w DOM

+ +

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 przykładach, jakie znajdziesz na końcu tej dokumentacji.

+ +

Obiekty document i window to obiekty, których interfejsy będziesz najczęściej wykorzystywał w programowaniu przy użyciu DOM. W prostych słowach, window reprezentuje coś takiego jak przeglądarka, zaś document jest początkiem, górą całego dokumentu. Element dziedziczy z ogólnego interfejsu Node, 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 table.

+ +

Poniżej krótka lista najczęściej używanych API w skryptach wykorzystujących DOM.

+ + + +

Testowanie DOM API

+ +

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 <script>, 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.

+ +

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 <script> 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.

+ +

Możesz skorzystać z tej strony testowej lub stworzyć własną. Możesz zmieniać w razie potrzeby treść skryptu, dodać przyciski czy elementy.

+ +
<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>
+
+ +

Przykładowa strona testowa DOM
+ 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.

+ +

W tym przykładzie rozwijalne menu dynamicznie podmieniają takie aspekty strony jak kolor tła (bgColor), kolory linków (aLink), tekstu (text). Niezależnie od tego, jak zaprojektujesz swoją stronę testową - testowanie interfejsów jest ważnym elementem efektywnej nauki DOM.

-- cgit v1.2.3-54-g00ecf