JavaScript HTML DOM dokument
- Föregående sida DOM-metoder
- Nästa sida DOM-element
HTML DOM-dokumentobjektet äger alla andra objekt på din webbsida.
HTML DOM Document-objekt
Dokumentobjektet representerar din webbsida.
Om du vill komma åt något element på HTML-sidan, börjar du alltid med att komma åt dokumentobjektet.
Nedan är några exempel på hur man använder dokumentobjektet för att komma åt och manipulera HTML.
Sök HTML-element
Method | Description |
---|---|
document.getElementById(id) | Sök element via elementets id |
document.getElementsByTagName(namn) | Sök element via taggnamn |
document.getElementsByClassName(namn) | Sök element via klassnamn |
Ändra HTML-element
Method | Description |
---|---|
element.innerHTML = nytt HTML-innehåll | Ändra elementets inner HTML |
element.attribute = new value | Change the attribute value of HTML elements |
element.setAttribute(attribute, value) | Change the attribute value of HTML elements |
element.style.property = new style | Change the style of HTML elements |
Add and delete elements
Method | Description |
---|---|
document.createElement(element) | Create HTML element |
document.removeChild(element) | Delete HTML element |
document.appendChild(element) | Add HTML element |
document.replaceChild(element) | Replace HTML element |
document.write(text) | Write to HTML output stream |
Add event handler
Method | Description |
---|---|
document.getElementById(id).onclick = function() {code} | Add an event handler to the onclick event |
Find HTML objects
First HTML DOM Level 1 (1998) defined 11 HTML objects, object collections, and attributes. They are still valid in HTML5.
Later, in HTML DOM Level 3, more objects, collections, and attributes were added.
Attributes | Description | DOM |
---|---|---|
document.anchors | Return all <a> elements with the name attribute | 1 |
document.applets | Return all <applet> elements(Not recommended for use in HTML5) | 1 |
document.baseURI | Return the absolute base URI of the document | 3 |
document.body | Return the <body> element | 1 |
document.cookie | Return the cookie of the document | 1 |
document.doctype | Return the doctype of the document | 3 |
document.documentElement | Return the <html> element | 3 |
document.documentMode | Return the mode used by the browser | 3 |
document.documentURI | Return the URI of the document | 3 |
document.domain | Return the domain name of the document server | 1 |
document.domConfig | Abandoned.Return the DOM configuration | 3 |
document.embeds | Return all <embed> elements | 3 |
document.forms | Returnerar alla <form>-element | 1 |
document.head | Returnerar <head>-elementet | 3 |
document.images | Returnerar alla <img>-element | 1 |
document.implementation | Returnerar DOM-implementering | 3 |
document.inputEncoding | Returnerar dokumentets kodning (teckenuppsättning) | 3 |
document.lastModified | Returnerar datum och tid för dokumentets uppdatering | 3 |
document.links | Returnerar alla <area> och <a>-element med href-egenskap | 1 |
document.readyState | Returnerar dokumentets (laddnings) status | 3 |
document.referrer | Returnerar refererad URI (länkad dokument) | 1 |
document.scripts | Returnerar alla <script>-element | 3 |
document.strictErrorChecking | Returnerar om felkontroll är påkallad | 3 |
document.title | Returnerar <title>-elementet | 1 |
document.URL | Returnerar dokumentets fullständiga URL | 1 |
- Föregående sida DOM-metoder
- Nästa sida DOM-element