JavaScript HTML DOM dokumentti

HTML DOM -dokumentti-objekti on omistaja kaikille muille objekteille verkkosivullasi.

HTML DOM Document-objekti

Dokumentti-objekti edustaa verkkosivuasi.

Jos haluat käyttää HTML-sivulla olevaa minkään elementin, aloitat aina document-objektin kautta.

Tässä on joitakin esimerkkejä siitä, miten käytät document-objektia HTML:n katseluun ja hallintaan.

Etsi HTML-elementti

Metodi Kuvaus
document.getElementById(id) Etsi elementti elementin id:n perusteella
document.getElementsByTagName(nimi) Etsi elementti tagin perusteella
document.getElementsByClassName(nimi) Etsi elementti luokan perusteella

Muuta HTML-elementtiä

Metodi Kuvaus
element.innerHTML = uusi HTML-sisältö Muuta elementin sisäistä HTML:ää
element.attribute = new value Muuta HTML-elementin ominaisuuden arvo
element.setAttribute(ominaisuus, value) Muuta HTML-elementin ominaisuuden arvo
element.style.property = new style Muuta HTML-elementin tyylit

Lisää ja poista elementtejä

Metodi Kuvaus
document.createElement(element) Luo HTML-elementti
document.removeChild(element) Poista HTML-elementti
document.appendChild(element) Lisää HTML-elementti
document.replaceChild(element) Vaihda HTML-elementti
document.write(text) Kirjoita HTML-lähtövirtaan

Lisää tapahtumankäsittelijä

Metodi Kuvaus
document.getElementById(id).onclick = function(){code} Lisää tapahtumankäsittelijä onclick-tilanteeseen

Etsi HTML-objekti

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

Lisättiin lisää objekteja, joukkoja ja ominaisuuksia HTML DOM Level 3:ssa (1998).

Ominaisuudet Kuvaus DOM
document.anchors Palauttaa kaikki <a> -elementit, joilla on name-ominaisuus 1
document.applets Palauttaa kaikki <applet> -elementit（HTML5 ei suositella käytettäväksi） 1
document.baseURI Palauttaa dokumentin absoluutin perus-URI:n 3
document.body Palauttaa <body> -elementin 1
document.cookie Palauttaa dokumentin cookien 1
document.doctype Palauttaa dokumentin doctype:n 3
document.documentElement Palauttaa <html> -elementin 3
document.documentMode Palauttaa selaimen käytetyn模式的 3
document.documentURI Palauttaa dokumentin URI:n 3
document.domain Palauttaa dokumentin palvelimen domain-nimen 1
document.domConfig Hylätty.Palauttaa DOM-konfiguraation 3
document.embeds Palauttaa kaikki <embed> -elementit 3
document.forms Palauttaa kaikki <form>-elementit 1
document.head Palauttaa <head>-elementin 3
document.images Palauttaa kaikki <img>-elementit 1
document.implementation Palauttaa DOM-toteutuksen 3
document.inputEncoding Palauttaa dokumentin koodauksen (merkistön) 3
document.lastModified Palauttaa dokumentin päivitetyksi tiedoksi olevan päivämäärän ja aikavälillä 3
document.links Palauttaa kaikki <area>- ja <a>-elementit, joilla on href-ominaisuus 1
document.readyState Palauttaa dokumentin (lataus)tilan 3
document.referrer Palauttaa viittaavan URI:n (linkitetty dokumentti) 1
document.scripts Palauttaa kaikki <script>-elementit 3
document.strictErrorChecking Palauttaa pakollisten virheen tarkistusten suorittamisen 3
document.title Palauttaa <title>-elementin 1
document.URL Palauttaa dokumentin täyden URL-osoitteen 1