Najnowsze tutoriale tworzenie stron internetowych
 

JavaScript HTML DOM


Z DOM HTML, JavaScript może uzyskać dostęp i zmienić wszystkie elementy w dokumencie HTML.


HTML DOM (Document Object Model)

Gdy strona jest ładowana, przeglądarka tworzy Document Object Model strony.

Model DOM HTML jest skonstruowany jako drzewo obiektów:

HTML DOM drzewa obiektów

drzewa DOM HTML

Z modelu obiektowego, JavaScript dostaje całą moc potrzebną do stworzenia dynamicznego HTML:

  • JavaScript może zmienić wszystkie elementy HTML na stronie
  • JavaScript może zmienić wszystkie atrybuty HTML na stronie
  • JavaScript może zmienić wszystkie style CSS na stronie
  • JavaScript może usunąć istniejące elementy HTML i atrybutów
  • JavaScript może dodawać nowe elementy HTML i atrybutów
  • JavaScript może reagować na wszystkich istniejących zdarzeń HTML na stronie
  • JavaScript może tworzyć nowe zdarzenia HTML na stronie

Czego nauczysz

W kolejnych rozdziałach tego poradnika dowiesz się:

  • Jak zmienić zawartość elementów HTML
  • Jak zmienić styl (CSS) elementów HTML
  • Jak reagować na zdarzenia DOM HTML
  • Jak dodawać i usuwać elementy HTML

Czym jest DOM?

DOM jest W3C (World Wide Web Consortium) w standardzie.

DOM definiuje standardy w zakresie dostępu do dokumentów:

"The Document Object Model W3C (DOM) to interfejs platformy i języka neutralne, które pozwala programy i skrypty do dynamicznego dostępu i aktualizować treść, strukturę i styl dokumentu."

Średnia W3C DOM dzieli się na 3 części:

  • Rdzeń DOM - standardowy model dla wszystkich typów dokumentów
  • XML DOM - standardowy model dla dokumentów XML
  • HTML DOM - standardowy model dla dokumentów HTML

Czym jest DOM HTML?

DOM HTML to standardowy model obiektowy interfejs programowania i HTML. Określa on:

  • Elementy HTML jakoobiektów
  • Właściwości wszystkich elementów HTML
  • Metody dostępu do wszystkich elementów HTML
  • Zdarzenia dla wszystkich elementów HTML

Innymi słowy:DOM HTML jest standardem, jak uzyskać, zmieniać, dodawać lub usuwać elementy HTML.