Logotyp för Björns studiewebb

DOM-objekt (JavaScript)

Innehåll

På den webbsidan behandlas de vanligaste (mest användbara?) objekttyperna (klasserna) i DOM. Jag redovisar här alla egenskaper och metoder, men beskriver endast en del av dem (markeras med fet stil -se Referenser för kompletta beskrivningar). För att kunna skilja på ursprung för egenskaper och metoder (DOM Core eller DOM HTML), så redovisas de, för respektive typ av objekt, under rubrikerna DOM Core respektive DOM HTML.

Innehållet i denna webbsida kan verka överväldigande vid första anblick, men fokusera på egenskaper och metoder markerade med fet stil så märker du antagligen hur "lite" du behöver lära dig för att komma igång. :-)

Dokumentobjekt

Dokumentobjektet (eller -gränssnittet, om vi ska följa DOM-specifikationens termer) innehåller ett antal egenskaper och metoder. Det kan endast finnas ett sådant här objekt och dess variabel har, ganska bekvämt, namnet document. :-) Vi använder detta objekt för att bl.a. skapa nya element- och textnoder (attributnoder skapar vi m.h.a. elementnoder) samt för att hämta olika typer av element (t.ex. stycken [P] eller rubriker [Hx]).

DOM Core

Nedan visas egenskaper i dokumentobjekt som specificerats i DOM Core.

Egenskaper

Dessa egenskaper behandlas inte i denna underwebb (ännu - de finns med för att göra referens komplett - se Referenser nedan).

Metoder

Dokumentobjekt (eller, snarare, dokumentobjektet - singular) innehåller främst tre metoder av intresse och de har markerats med fet stil i lista nedan.

Det finns en metod i listan nedan för att skapa en attributnod, men jag fokuserar i denna underwebb på hur man skapar dem m.h.a. metoder i elementnoder (se nedan).

DOM HTML

Nedan visas egenskaper och metoder i dokumentobjekt som specificerats i DOM HTML, d.v.s i HTML-dokumentobjekt. Dessa egenskaper och metoder är unika för (X)HTML-dokument (gäller inte för XML och andra typer av dokument).

Egenskaper

Nedan visas alla egenskaper för dokumentobjektet i DOM HTML-specifikationen (men inga, förutom eventuellt body, förklaras närmare i denna underwebb - ännu).

Metoder

Nedan finns främst en metod som vi är intresserade av och den har markerats med fet stil.

I DOM HTML-specifikationen är vi främst intresserad av metoden getElementByID() som returnerar den nod vars värde på attributet ID skickas som argument till metoden. Detta används frekvent tillsammans med DIV-taggar för att hämta referenser till olika delar av dokument.

I ett och samma (X)HTML-dokument måste alla element ha unika värden på eventuella ID-attribut.

Till början på sida

Nodobjekt

Nodobjektet (eller gränssnittet, om vi ska följa specifikationens termer) innehåller även det ett antal egenskaper och metoder.

Nodobjekt (element, attribut eller text) är en generell beskrivning av noder, d.v.s. se även Elementobjekt nedan för fler egenskaper och funktioner för elementnoder (för andra typer av objekt, se Referenser).

Gränssnittet innehåller även ett antal konstanter som inte behandlas i denna underwebb (ännu).

DOM Core

Egenskaper

Nedan listas egenskaper i nodobjekt. Observera att vissa egenskaper innehåller olika värden beroende på typ av nod (element, attribut eller text)!

Metoder

DOM HTML

Inga extra egenskaper eller metoder för nodobjekt definieras i specifikation.

Till början på sida

Elementnodsobjekt

Elementnoder har några fler egenskaper än övriga nodtyper, vilket beskrivs här. (Se även Nodobjekt ovan.)

DOM Core

Egenskaper

Metoder

DOM HTML

DOM HTML-specifikationen utökar med en HTMLElementnod som bara utökar med egenskaper, vilka visas nedan.

Egenskaper

Det är främst en egenskap som är av intresse (ur min synvinkel :-) här.

Observera att egenskapen för elements attribut CLASS har döpts om till className för att undvika konflikter i språk som brukar ha en egenskap med det namnet i alla objekt (klasser - t.ex. Java). Observera även att egenskapen className kan innehålla flera HTML-klasser, d.v.s. vill vi ändra presentation, med stilmallar (CSS), för element som tillhör flera klasser så måste vi ta hänsyn till detta. I exempel nedan så tillhör stycke (P) flera klasser, separerade med mellanslag.

<p class="stor gul nyttig">Ett stycke tillhörande klasserna stor, gul och nyttig.</p>

Metoder

Till början på sida

Fler objekttyper

DOM Core

Det finns fler objekt (gränssnitt) än vad som beskriver ovan, bl.a. NodeList, NamedNodeMap, CharacterData, Attr, Text och Comment.

DOM HTML

Respektive (X)HTML-element har ett motsvarande objekt (gränssnitt) men namn som HTML<tagg>Element (ersätt <tagg> med elementets tagg, t.ex. HTMLBodyElement för taggen BODY).

Om (X)HTML-element innehåller attribut (t.ex. HREF i länkar [A]) så kan dess värde nås som om det vore en egenskap i elementnod (se exempel nedan). Observera dock att om attributet har samma namn som t.ex. ett reserverat ord, t.ex. attributet FOR i taggen LABEL, så ges egenskapen ett prefix "html" och första bokstaven i "attributets namn" blir versal (se exempel nedan).

var adress = elemA.href;  //HREF-attribut i länk (A)
var kontroll = elemLabel.htmlFor;  //FOR-attr. i etikett (LABEL)

Vad gäller metoder så finns det en hel del intressanta metoder för att lägga till rader i t.ex. tabeller (se Referenser).

Till början på sida

Referenser

Nedan finns några webbsidor/-platser med mer information om ämnet på denna webbsida.