JavaScript DOM-asiakirja

Sisällysluettelo

Näytä sisällysluettelo

HTML DOM -dokumenttiobjekti on kaikkien muiden Web-sivusi objektien omistaja.

HTML DOM -asiakirjaobjekti

Asiakirjaobjekti edustaa verkkosivuasi.

Jos haluat käyttää mitä tahansa HTML-sivun elementtiä, aloita aina käyttämällä dokumenttiobjekti.

Alla on esimerkkejä siitä, kuinka voit käyttää dokumenttiobjektia ja manipuloida HTML:ää.

HTML-elementtien löytäminen

document.getElementById(id): Etsi elementti elementtitunnuksen mukaan
document.getElementsByTagName(name): Etsi elementtejä tunnisteen nimen mukaan
document.getElementsByClassName(name): Etsi elementtejä luokan nimen mukaan

HTML-elementtien muuttaminen

element.innerHTML = new html content: Muuta elementin sisäistä HTML-koodia
element.attribute = new value: Muuta HTML-elementin attribuutin arvoa
element.style.property = new style: Muuta HTML-elementin tyyliä

element.setAttribute(attribute, value): Muuta HTML-elementin attribuutin arvoa

Elementtien lisääminen ja poistaminen

document.createElement(element): Luo HTML-elementti
document.removeChild(element): Poista HTML-elementti
document.appendChild(element): Lisää HTML-elementti
document.replaceChild(new, old): Korvaa HTML-elementti
document.write(text): Kirjoita HTML-lähtövirtaan

Tapahtumakäsittelijöiden lisääminen

document.getElementById(id).onclick = function(){code}: Tapahtumakäsittelijän koodin lisääminen onclick-tapahtumaan

HTML-objektien etsiminen

Ensimmäinen HTML DOM Level 1 (1998) määritteli 11 HTML-objektia, objektikokoelmaa ja ominaisuuksia. Nämä ovat edelleen voimassa HTML5:ssä.

Myöhemmin HTML DOM Level 3:een lisättiin lisää objekteja, kokoelmia ja ominaisuuksia.

document.anchors: Palauttaa kaikki <a>-elementit, joilla on name-attribuutti. Taso 1
document.applets: Käytöstä poistettu. Taso 1
document.baseURI: Palauttaa asiakirjan absoluuttisen perus-URI:n. Taso: 3
document.body: Palauttaa <body>-elementin. Taso 1
document.cookie: Palauttaa asiakirjan evästeen. Taso 1
document.doctype: Palauttaa asiakirjan asiakirjatyypin. Taso: 3
document.documentElement: Palauttaa <html>-elementin. Taso: 3
document.documentMode: Palauttaa selaimen käyttämän tilan. Taso: 3
document.documentURI: Palauttaa asiakirjan URI:n. Taso: 3
document.domain: Palauttaa asiakirjapalvelimen toimialueen nimen. Taso 1
document.domConfig: Vanhentunut.. Taso: 3
document.embeds: Palauttaa kaikki <embed>-elementit. Taso: 3
document.forms: Palauttaa kaikki <form>-elementit. Taso 1
document.head: Palauttaa <head>-elementin. Taso: 3
document.images: Palauttaa kaikki <img>-elementit. Taso 1
document.implementation: Palauttaa DOM-toteutuksen. Taso: 3
document.inputEncoding: Palauttaa asiakirjan koodauksen (merkistön). Taso: 3
document.lastModified: Palauttaa päivämäärän ja kellonajan, jolloin asiakirja päivitettiin. Taso: 3
document.links: Palauttaa kaikki <area>- ja <a>-elementit, joilla on href-attribuutti. Taso 1
document.readyState: Palauttaa asiakirjan (lataus) tilan. Taso: 3
document.referrer: Palauttaa viittaajan URI:n (linkittävä asiakirja). Taso 1
document.scripts: Palauttaa kaikki <script>-elementit. Taso: 3
document.strictErrorChecking: Palauttaa, jos virheentarkistus pakotetaan. Taso: 3
document.title: Palauttaa <title>-elementin. Taso 1
document.URL: Palauttaa asiakirjan täydellisen URL-osoitteen. Taso 1