JavaScript HTML DOM

HTML DOM:n avulla JavaScript voi käyttää ja muuttaa HTML-dokumentin kaikkia elementtejä.

HTML DOM（dokumenttiobjektipuu）

Kun sivu ladataan, selain luo sivun dokumenttiobjektipuun（Document Object Model）。

HTML DOM Malli on rakennettuObjektipuu:

Objektin HTML DOM-puu

DOM HTML puu

Tämän objektipohjaisen mallin avulla JavaScript saa kaikki voimavarat luodakseen dynaamista HTML:ää:

  • JavaScript voi muuttaa kaikkia sivulla olevia HTML-elementtejä
  • JavaScript voi muuttaa kaikkia sivulla olevia HTML-ominaisuuksia
  • JavaScript voi muuttaa kaikkia sivulla olevia CSS-tyylejä
  • JavaScript voi poistaa olemassa olevia HTML-elementtejä ja ominaisuuksia
  • JavaScript voi lisätä uusia HTML-elementtejä ja ominaisuuksia
  • JavaScript voi reagoida kaikkiin olemassa oleviin HTML-tapahtumiin sivulla
  • JavaScript voi luoda uusia HTML-tapahtumia sivulla

Mitä opit

Tässä opetusohjelmassa seuraavissa luvuissa opit:

  • Kuinka muuttaa HTML-elementin sisältöä
  • Miten muuttaa HTML-elementin tyylejä (CSS)
  • Miten reagoida HTML DOM tapahtumiin
  • Miten lisätä ja poistaa HTML-elementtejä

Mitä DOM on?

DOM on W3C (World Wide Web Consortium) -standardi.

DOM määrittelee dokumenttiin pääsyn standardin:

“W3C Dokumenttiobjekti malli (DOM) on alustariippumaton ja kielen riippumaton liittymä, joka mahdollistaa ohjelmien ja skriptien dynaamisen pääsyn, päivittämisen ja muokkaamisen dokumentin sisältöön, rakenteeseen ja tyyleihin.”

W3C DOM-standardeja jaetaan 3 eri osaan:

  • Core DOM - Kaikkien dokumenttipyyhköjen standardimalli
  • XML DOM - XML-dokumentin standardimalli
  • HTML DOM - HTML-dokumentin standardimalli

Mitä HTML DOM on?

HTML DOM on HTML:n standardiObjektiMallit jaOhjelmointikäyttöliittymä. Se määrittelee:

  • ToimiiObjektiHTML-elementin
  • Kaikilla HTML-elementeilläOminaisuudet
  • Käyntiin kaikkien HTML-elementtienMenetelmät
  • Kaikilla HTML-elementeilläTapahtumat

Toisin sanoen: HTML DOM on standardi, joka kertoo, miten hankkia, muuttaa, lisätä tai poistaa HTML-elementtejä.