JavaScript HTML DOM

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

HTML DOM（dokumenttiobjektipuu）

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

HTML DOM Mallia rakennetaanObjektipuu:

Objektin HTML DOM-puu

DOM HTML puu

Tämän objektiomallin 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-elementtien tyylejä (CSS)
  • Miten reagoida HTML DOM -tapahtumiin
  • Miten lisätä ja poistaa HTML-elementtejä

Mitä on DOM?

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

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

“W3C Dokumenttiobjektipohja (DOM) on alustariippumaton ja kielen riippumaton liitäntä, joka mahdollistaa ohjelmien ja skriptien dynaamisen pääsyn, päivittämisen ja muutoksen 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ä on HTML DOM?

HTML DOM on HTML:n standardiObjektiMallit jaOhjelmointirajapinta. Se määrittelee:

  • ToimiiObjektiHTML-elementin
  • Kaikkien HTML-elementtienOminaisuudet
  • Käyntiin kaikkien HTML-elementtienMenetelmät
  • Kaikkien HTML-elementtienTapahtumat

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