JavaScript DOM-dokument


Innehållsförteckning

    Visa innehållsförteckning


HTML DOM-dokumentobjektet är ägare till alla andra objekt på din webbsida.


HTML DOM-dokumentobjektet

Dokumentobjektet representerar din webbsida.

Om du vill komma åt något element på en HTML-sida börjar du alltid med att komma åt dokumentobjekt.

Nedan finns några exempel på hur du kan använda dokumentobjektet för att komma åt och manipulera HTML.


Hitta HTML-element

document.getElementById(id)

Hitta ett element efter element-id

document.getElementsByTagName(name)

Hitta element efter taggnamn

document.getElementsByClassName(name)

Hitta element efter klassnamn


Ändra HTML-element

element.innerHTML =  new html content

Ändra den inre HTML-koden för ett element

element.attribute = new value

Ändra attributvärdet för ett HTML-element

element.style.property = new style

Ändra stilen för ett HTML-element

element.setAttribute(attribute, value)

Ändra attributvärdet för ett HTML-element


Lägga till och ta bort element

document.createElement(element)

Skapa ett HTML-element

document.removeChild(element)

Ta bort ett HTML-element

document.appendChild(element)

Lägg till ett HTML-element

document.replaceChild(new, old)

Ersätt ett HTML-element

document.write(text)

Skriv in i HTML-utdataströmmen



Lägga till händelsehanterare

document.getElementById(id).onclick = function(){code}

Lägger till händelsehanterarkod till en onclick-händelse


Hitta HTML-objekt

Den första HTML DOM Level 1 (1998), definierade 11 HTML-objekt, objektsamlingar och egenskaper. Dessa är fortfarande giltiga i HTML5.

Senare, i HTML DOM Level 3, lades fler objekt, samlingar och egenskaper till.

document.anchors

Returnerar alla <a>-element som har ett namnattribut. Nivå 1

document.applets

Utfasad. Nivå 1

document.baseURI

Returnerar den absoluta bas-URI för dokumentet. Nivå 3

document.body

Returnerar elementet <body>. Nivå 1

document.cookie

Returnerar dokumentets cookie. Nivå 1

document.doctype

Returnerar dokumentets doctype. Nivå 3

document.documentElement

Returnerar <html>-elementet. Nivå 3

document.documentMode

Returnerar läget som används av webbläsaren. Nivå 3

document.documentURI

Returnerar dokumentets URI. Nivå 3

document.domain

Returnerar domännamnet för dokumentservern. Nivå 1

document.domConfig

Föråldrad.. Nivå 3

document.embeds

Returnerar alla <embed>-element. Nivå 3

document.forms

Returnerar alla <form>-element. Nivå 1

document.head

Returnerar elementet <head>. Nivå 3

document.images

Returnerar alla <img>-element. Nivå 1

document.implementation

Returnerar DOM-implementeringen. Nivå 3

document.inputEncoding

Returnerar dokumentets kodning (teckenuppsättning). Nivå 3

document.lastModified

Returnerar datum och tid då dokumentet uppdaterades. Nivå 3

document.links

Returnerar alla <area>- och <a>-element som har ett href-attribut. Nivå 1

document.readyState

Returnerar (laddar) status för dokumentet. Nivå 3

document.referrer

Returnerar hänvisarens URI (det länkande dokumentet). Nivå 1

document.scripts

Returnerar alla <script>-element. Nivå 3

document.strictErrorChecking

Återkommer om felkontroll tillämpas. Nivå 3

document.title

Returnerar elementet <title>. Nivå 1

document.URL

Returnerar dokumentets fullständiga URL. Nivå 1