Document Object Model (DOM)

Luentoesimerkki

DOM on standardi, jonka avulla voidaan manipuloida dynaamisesti XML- tai HTML-dokumenttien dokumenttipuuta.

Kukin elementti ja teksti muodostavat dokumenttipuuhun Node-tyypin olion. DOM:in tarjoamia attribuutteja ja metodeja voi tarkastella Firefoxissa tai Chromessa Inspectorilla, jonka saa näkyville valinnalla Tools|Web developer|Inspector tai F12-näppäimellä. Inspectorin näyttämä HTML-koodi ei ole sama, kuin View|Source-valinnalla näkyvä koodi. View|Source näyttää palvelimelta ladatun lähdekoodin, mutta Inspector näyttää selaimen muistissa olevan dynaamisen version, joka voi olla selaimen korjaama versio tai javascriptilla muokattu rakenne.

Käsitteitä

• vanhempi-, äiti- tai isäelementti (engl. parent) elementti, jonka sisällä ko. elementti välittömästi on.
• lapsielementti (engl. child) välittömästi ko. elementin sisällä oleva elementti
• jälkeläinen (engl. descendant) ko. elementin sisällä oleva elementti
• esivanhempi, esi-isä (engl. ancestor) elementti, jonka jälkeläinen ko. elementti on
• sisarelementti (engl. sibling) elementit ovat sisaruksia, jos niillä on yhteinen vanhempielementti
• edeltävä/seuraava sisarelementti (engl. preceding/following sibling) edeltävä elementti on dokumenttipuussa ennen ko. elementtiä, seuraava on sen jälkeen

Node

Node on abstrakti pääluokka, johon perustuvat kaikki muut DOM-puussa esiintyvät tyypit, joista tärkeimmät ovat Element ja Document.

Noden tarkka kuvaus löytyy MDN:n Node-sivulta. Tässä on lueteltu tärkeimmät ominaisuudet:

• Node.childNodes
• Node.firstChild
• Node.lastChild
• Node.nextSibling
• Node.nodeName
• Node.nodeType
• Node.nodeValue
• Node.parentNode
• Node.previousSibling
• Node.textContent

Noden tärkeimmät metodit ovat:

• Node.appendChild(childNode)
• Node.cloneNode()
• Node.contains()
• Node.hasChildNodes()
• Node.insertBefore()
• Node.removeChild()
• Node.replaceChild()

Element

Element perii kaikki Noden ominaisuudet. Näiden lisäksi Elementin tärkeimpiä ominaisuuksia ovat seuraavat:

• Element.className
• Element.clientHeight
• Element.clientWidth
• Element.id
• Element.localName
• Element.tagName

Elementillä on Nodelta perittyjen metodien lisäksi seuraavia tärkeitä metodeja:

• Eventtarget.addEventListener()
• Element.getAttribute()
• Element.getElementsByClassName()
• Element.getElementsByTagName()
• Element.hasAttribute()
• Element.insertAdjacentElement()
• Element.querySelector()
• Element.querySelectorAll()
• ChildNode.remove()
• Element.removeAttribute()
• EventTarget.removeEventListener()
• Element.setAttribute()

Elementtien hakeminen

• document.getElementById(id)
• document.documentElement
• document.body
• element.getElementsByTagName(name)
• element.querySelector(css-valitsin)
• element.querySelectorAll(css-valitsin)
• element.parentNode
• element.firstChild
• element.lastChild
• element.childNodes
• element.nextSibling

Elementtien lisääminen ja poistaminen

• document.createElement(name)

• document.createTextNode(data)

• element.appendChild(node)

• element.insertBefore(node)

• element.removeChild(node)

• element.replaceChild(newChild, oldChild)

  Esim.

  var vanhaelementti = document.getElementById("elementin_id");
  vanhaelementti.parentNode.replaceChild(uusielementti, vanhaelementti);

• element.innerHTML

  • Ei kuulu DOM-standardiin, mutta on useissa selaimissa. Ei pidä käyttää, koska voi rikkoa DOM-puun.

Elementtien arvot

• element.nodeValue
• HTMLInputElement.value ja HTMLSelectElement.value
• HTMLSelectElement.selectedIndex - DOM Level 1
• element.textContent
• element.nodeName
• element.setAttribute(name, value)
• element.getAttribute(name)
• element.className
• element.style
  • DOM CSS Properties
  • CSS Property Index
• document.defaultView.getComputedStyle(element,pseudoelement).getPropertyValue(stylename)

Huomattavaa

• DOM:in käsittely on "live" eli jos esimerkiksi olet läpikäymässä jonkun solmun lapsielementtejä ja poistat sieltä yhden niin läpikäytävä joukko muuttuu.

• Solmun siirtäminen tapahtuu hakemalla haluttu solmu ja liittämällä se toisen solmun lapsisolmuksi appendChild-metodilla. Normaalisti solmuista ei tule kopioita vaan olioreferenssit liikkuvat vain vanhempielementiltä toiselle.

• Teksti ei ole normaalin elementtisolmun ominaisuus vaan elementin sisällä on usein TextNode-tyyppinen solmu, jonka tekstisisällön saa NodeValue-metodilla.

• Lomake-elementtien arvot saadaan value-attribuutilla

• Puun läpikäyminen vaatii usein rekursiota.

• Helpoin tapa saada tietty elementti on antaa sille id-arvo ja pyytää sitä document.getElementById-metodilla.

• Monet metodit, kuten getElementsByTagName, palauttavat listan solmuista, nämä pitää läpikäydä silmukassa ja pyytää yksittäin listaobjekti.item(i) metodilla

• Tietyn elementin voi poistaa vain sen vanhempielementti. Esim. tietyllä id:llä olevi kaikkien lapsielementtien poistaminen:

  var vanhempi = document.getElementById("lista");
  while (vanhempi.firstChild) {
    vanhempi.removeChild(vanhempi.firstChild);
  }

Selainten DOM-laajennokset

Kurssin materiaaleissa käytetään pääasiassa yleisiä DOM-rajapinnan metodeja. Tämä tarkoittaa, että samat metodit toimivat muuallakin kuin selainympäristössä. Esim. voisitte kirjoittaa python-ohjelman, joka käsittelee jotain XML-tiedostoja ja käytössänne olisi tismalleen samat metodit.

Selainympäristössä on kuitenkin sisäänrakennettuna useita lisäominaisuuksia, joista osaa voi myös käyttää. Esim. seuraavista metodeista voi olla paljonkin apua:

• document.getElementsByClassName()
• HTMLTableElement.rows
• HTMLTableElement.caption
• HTMLTableElement.insertRow()
• HTMLTableElement.deleteRow()

Seuraavia EI PIDä KÄYTTÄÄ. Näiden käyttäminen aiheuttaa tietoturvaongelmia.

• element.innerHTML
• element.insertAdjacentHTML
• element.outerHTML

Lisätietoa

• DOM Enlightenment
• Document Object Model MDN
• DOM Tool - helpottaa elementtien luomista
• W3C DOM

vanha luentomalli

malli.js

Vanha DOM-luento