DOM i JavaScript

Ogólne pojęcie

Efekty wizualne takie jak przesuwanie warstw na stronie, pokazywanie i ukrywanie ich, wyskakujące menu itd., są często określane pojęciami „DHTML” lub „Dynamiczny HTML”. Niektórzy kwestionują zasadność użycia tych technologii na stronach, które powinny przecież obejmować treść, a nie prezentację. Ale faktem jest, że technologie te nadal istnieją.

Od kiedy pracuję nad tym projektem i mam kontakty z wieloma webmasterami, uderza mnie to, że duża ich część nie wie jak ich DHTML tak naprawdę działa. Większość z nich po prostu odnalazło stronę z repozytorium skryptów i skopiowali stamtąd kod na swoją stronę. Niestety, większość takich stron mówi o „JavaScripcie” i „DHTML-u”, jednak nigdy o „DOM”. Prawdą jest, że nawet jeśli DOM jest pomysłem starym, to pojęcie to weszło w „żargon przeciętnego webmastera” dopiero niedawno.

Wielkim wyzwaniem dla projektów takich jak Mozilla jest by przekonać właścicieli tego typu stron, że warto kodować według W3C DOM (co oznacza niekiedy wiele mozolnej pracy czy utrata wsparcia dla starszych przeglądarek). Dużym wyzwaniem jest również zebrać wszystkie fakty w prosty sposób związane ze wsparciem dla W3C DOM. Netscape 6 był mocno krytykowany przez niezdarnych projektantów internetowych, którzy pisali swój kod „JavaScript” pod Netscape'a 4 oraz Internet Explorera używając document.layers i document.all. Każdego dnia staramy się pomagać ludziom na grupach newsowych, poprzez e-maile, Bugzillę, by ich strony były jak najbardziej zgodne ze standardami. Jednym z największych problemów jakie napotykamy, jest zamieszanie związane z JavaScriptem, DHTML-em oraz DOM. Ten dokument jest próbą wyjaśnienia tych problemów, wyjaśnienia relacji pomiędzy tymi wymyślnymi oraz przydatnymi technologiami.

JavaScript — sieciowy język skryptowy

JavaScript jest „obiektowym językiem skryptowym” początkowo opracowanym w Netscape Communications Corp. przez Brendana Eicha (który jest obecnie jednym z liderów projektu Mozilla). Silnik JavaScript używany przez Mozillę to SpiderMonkey, zgodny z 3 rewizją specyfikacji ECMA-262. JavaScript jest również znany jako ECMAScript (zobacz odsyłacz, aby uzyskać więcej informacji).

Wbrew popularnemu przekonaniu, JavaScript nie jest „interpretowaną Javą”. Wewnątrz JavaScript jest dynamicznym językiem skryptowym wspierającym prototypową konstrukcję obiektów. Podstawowa składnia jest świadomie podobna do tej znanej z Javy i C++, by zminimalizować liczbę nowych pojęć potrzebnych do opanowania języka. Świetną rzeczą jest to, że jest on bardzo łatwy do nauczenia się, jeśli chcesz zajmować się prostszymi rzeczami (jak na przykład te w prostym DHTML-u). Niewidoczne typy zmiennych, niezwykle proste w użyciu łańcuchy znakowe, całkowita neutralność platformowa itd. Dla bardziej zaawansowanych programistów funkcjonuje on również jako język zarówno obiektowy jak i proceduralny.

Odkryjesz, że większość informacji o JavaScripcie w tym akapacie pochodzi ze strony Mozilla JavaScript. Najnowsza wersja specyfikacji ECMA znajduje się tutaj.

Obiektowy Model Dokumentu, neutralnie językowo zestaw interfejsów

JavaScript jest językiem programowania, który pozwala Ci działać na obiektach DOM i manipulować nimi programowo, DOM natomiast dostarczy Ci metod oraz własności do pobierania, modyfikowania, uaktualniania i usuwać części dokumentu nad którym pracujesz. Przykładowo, możesz pobrać wartość pola tekstowego jako łańcuch znaków używając DOM. Następnie możesz użyć operatora JavaScript +, by połączyć go z innym łańcuchem znaków i stworzyć z tego sensowną treść. Gdy to zrobisz, możesz użyć metody DOM alert(), aby wyświetlić użytkownikowi nowy łańcuch znaków w oknie dialogowym. Zobacz również poniższe przykłady

Jeśli strona internetowa byłaby importowanym szwedzkim meblem, DOM byłby ilustracjami jego elementów — półek, uchwytów, gwoździ oraz śrubokrętów. Możliwe jest napisanie instrukcji jak połączyć je w całość i używać tych elementów, instrukcji w wielu językach, ale Ty użyjesz tylko tego, który rozumiesz. Podręcznik ułatwia Ci złożenie tego mebla przy użyciu napisanych instrukcji (JavaScript) odwołujących się do przedstawionych ilustracji elementów (DOM), które reprezentują faktyczne obiekty (silnik renderujący przeglądarki) (dzięki Jonathanowi za analogię!).

Czym jest ten cały szum wokół neutralności językowej i DOM? Dlaczego DOM jest językowo neutralny, skoro jedynym językiem używanym razem z nim jest JavaScript? No cóż, nie jest to do końca prawda. Na przykład, Mozilla używa wewnętrznie DOM jednocześnie z C++ i JavaScriptem w interfejsie użytkownika. Z kolei edytor używa DOM w celu wstawiania, modyfikowania i usuwania kodu HTML, który widzisz w fazie tworzenia strony w module Kompozytora. Inne znane implementacje DOM zawierają Perl, Java, ActiveX, Python oraz prawdopodobnie wiele innych. To wszystko możliwe jest tylko i wyłącznie dzięki neutralności językowej DOM.

DOM a JavaScript — Co robi co?

Docieramy do głównego gwoździa programu: Co robi co? Czym jest DOM, a czym JavaScript, w skrypcie, który zawarłem na mojej stronie? Spójrzmy bliżej na prosty przykład. Pobierze on wszystkie znaczniki <a> w listę węzłów (NodeList), którą nazwalismy anchorTags. Wtedy dla każdego znacznika kotwicy (każdy element z listy węzłów anchorTags) pojawi się komunikat z wartością atrybutu href.

Kolor niebieski oznacza JavaScript, czerwony — DOM.

var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
   alert("Atrybut href dla " + i + " elementu to: " + anchorTags[i].href + "\n");
}

Wyjaśnienia

Ten fragment kodu wyjaśnia czym jest prawdziwy JavaScript, a czym DOM.

var anchorTags =

To utworzy zmienną JavaScript o nazwie „anchorTags”.

document.getElementsByTagName("a")

Interfejs Document jest pierwszym interfejsem zdefiniowanym w DOM1 Core, a document jest głównym obiektem implementującym ten interfejs. Dokument przechowuje wszystko, co znajduje się na Twojej stronie.
DOM1 Core definiuje metodę getElementsByTagName() w interfejsie Document. Pobiera ona do listy węzłów (NodeList, rodzaj specyficznej dla DOM tablicy, która przechowuje węzły) wszystkie znaczniki, które odpowiadają przekazanemu parametrowi (w kolejności występowania w źródle dokumentu). Tym samym anchorTags jest teraz listą węzłów.

;

Średnik kończący instrukcję w JavaScripcie.

for (var i = 0; i <

Typowa pętla „for” znana z wielu innych języków programowania. Pozwoli ona nam na przejście przez każdy węzeł zawarty w liście węzłów anchorTags. Zwróć uwagę na deklarację zmiennej „i”. To również JavaScript.

anchorTags.length

DOM1 Core definiuje własność length interfejsu NodeList. Zwraca ona liczbę całkowitą będącą ilością węzłów przechowywanych w liście węzłów. Zauważ, że tablica JavaScript również posiada własność length.

; i++) {

Typowa instrukcja JavaScript powiększająca wartość zmiennej o 1.

alert(

alert() jest metodą DOM, która pokazuje okno dialogowe z przekazanym parametrem (łańcuchem znaków). Zwróć uwagę, że metoda ta jest częścią tzw. poziomu 0 DOM poziomu 0 lub DOM0. DOM0 jest zbiorem interfejsów obsługiwanych przez niektóre przeglądarki, ale które nie są częścią żadnej specyfikacji DOM.

"Atrybut href dla " + i + " elementu to: "

Literały znakowe oraz operator ich łączenia (konkatenacji). JavaScript.

anchorTags[i].href

„href” jest własnością interfejsu HTMLAnchorElement zdefiniowanego w specyfikacji HTML DOM1. Zwraca wartość atrybutu href odnośnika, jeśli wartość ta istnieje.
Używamy również anchorTags[i], tej samej składni, która w JavaScripcie używana jest przy dostępie do i-tego elementu tablicy. Neutralnie językowym sposobem jest używanie metody item(), zdefiniowanej w interfejsie NodeList): anchorTags.item(1).href. Jednak większość implementacji JavaScriptu pozwala na używanie prostszej, tablicowej składni i takiej właśnie używa większość ludzi.

+ "\n");

Kolejne łączenie łańcuchów znaków. Wstawienie znaku powrotu karetki na końcu łańcucha znaków.

}

Koniec pętli „for”.