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
• Nodobjektet
• Elementobjekt
• Fler objekttyper
• Referenser

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

• doctype - dokumentypsdeklaration.
• documentElement - elementnod för HTML-tagg.
• implementation - objekt som hanterar detta dokument.

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

• createAttribute(namn) - skapar attributnod med namnet namn.
• createCDATASection(data) - skapar CDATA-nod med innehåll data.
• createComment(data) - skapar kommentarnod med innehåll data.
• createDocumentFragment() - skapar en tom dokumentfragmentsnod.
• createElement(taggnamn) - skapar elementnod med namnet taggnamn (t.ex. "p", "h1" eller "a").
• createEntityReference(namn) - skapar entitetsreferensnod.
• createProcessingInstruction(mål, data) - skapar processinstruktonsnod.
• createTextNode(data) - skapar en textnod innehållande data.
• getElementsByTagName(taggnamn) - returnerar lista med alla element med taggnamn (t.ex. "p", "h1" eller "a"). Observera S:et (plural), d.v.s. att flera noder returneras!

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

• URL - komplett adress (URI) till dokument.
• anchors - lista med länkar (A) i dokument.
• applets - lista med applets (OBJECT och APPLETS) i dokument.
• body - "genväg" till taggen BODY.
• cookie - lista med cookies som klient skickat.
• domain - domän för webbserver som dokument hämtats från, eller null om ej kan avgöras.
• forms - lista med formulär (FORM) i dokument.
• images - lista med bilder (IMG) i dokument.
• links - lista med länkar (AREA och A) i dokument.
• referrer - adress (URI) till webbsida som länkade till detta dokument.
• title - titel (TITLE) för dokument.

Metoder

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

• close() - stänger ström (stream) öppnad med open() (se Referenser).
• getElementById(elemId) - returnerar nod med värdet elemId på attributet ID. Observera avsaknaden av S:et (singular), d.v.s. returnerar endast en nod (värde på ID-attribut ska vara unika i ett och samma dokument)!
• getElementsByName(namn) - returnerar lista med noder för element med värdet namn på attributet NAME. Denna metod ska inte förväxlas med metoden getElementsByTagName() i DOM Core!
• open() - öppnar en ström (stream) (se Referenser).
• write(text) - skriver till ström (stream) öppnad med open() (se Referenser).
• writeln(text) - skriver till ström (stream) öppnad med open() (se Referenser).

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

• attributes - lista med alla attribut i nod.
• childNodes - lista med alla barnnoder i nod.
• firstChild - första barnnoden i nod.
• lastChild - sista barnnoden i nod.
• nextSibling - nästa nod på samma nivå som nod.
• nodeName - taggnamn om elementnod, attributnamn om attributnod eller strängen "#text" om textnod.
• nodeType - nummer motsvarande typ av nod (se ovan).
• nodeValue - null om elementnod, värde på attribut om attributnod eller innehåll om textnod.
• ownerDocument - dokumentnod som nod finns i.
• parentNode - föräldernod till nod.
• previousSibling - föregående nod på samma nivå som nod.

Metoder

• appendChild(nod) - lägg till nod
• cloneNode(deep) - skapa en kopia av nod - om deep är sant så klonas även barnnoder.
• hasChildNodes() - returnerar sant om nod har barnnoder.
• insertBefore(nynod, ref.nod) - inforga nynod före ref.nod i nodträd.
• removeChild(nod) - ta bort nod från nodträd.
• replaceChild(nynod, gammalnod) - ersätt gammalnod med nynod.

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

• tagName - namn (med versaler) på element (t.ex. "BODY", "P", "H1" eller "A").

Metoder

• getAttribute(namn) - returnerar attribut med namnet namn.
• getAttributeNode(namn) - returnerar attributnod med namnet namn.
• getElementsByTagName(namn) - returnerar alla barnnoder med namnet namn.
• normalize() - "normaliserar" dokument under nod (se Referenser).
• removeAttribute(namn) - tar bort attributnod med namnet namn.
• removeAttributeNode(attr.nod) - tar bort attributnod attr.nod.
• setAttribute(namn, värde) - anger värdet värde (som sträng) för attributet namn. Om attribut redan existerar så ersätts dess värde, annars skapas en ny attributnod.
• setAttributeNode(attr.nod) - lägger till attributnod attr.nod.

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.

• className - värdet på attributet CLASS i nod.
• dir - värde på attributet DIR i nod (anv. om t.ex. arabiska).
• id - värde på attributet ID i nod.
• lang - värde på attributet LANG i nod (anv. om annat språk).
• title - värde på attributet TITLE i nod.

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

• Inga...

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.

• DOM Core hos World Wide Web Consortium (W3C)
• DOM HTML hos World Wide Web Consortium (W3C)