logo

Model obiektowy dokumentu

  1. Obiekt dokumentu
  2. Właściwości obiektu dokumentu
  3. Metody obiektu dokumentu
  4. Przykład obiektu dokumentu

The obiekt dokumentu reprezentuje cały dokument HTML.

Po załadowaniu dokumentu HTML do przeglądarki staje się on obiektem dokumentu. To jest element główny który reprezentuje dokument HTML. Ma właściwości i metody. Za pomocą obiektu dokumentu możemy dodać dynamiczną zawartość do naszej strony internetowej.

Jak wspomniano wcześniej, jest to obiekt window. Więc

 window.document 

Jest taki sam jak

 document 

Według W3C - „Model obiektowy dokumentu W3C (DOM) to neutralny pod względem platformy i języka interfejs, który umożliwia programom i skryptom dynamiczny dostęp oraz aktualizację zawartości, struktury i stylu dokumentu”.


Właściwości obiektu dokumentu

Zobaczmy właściwości obiektu dokumentu, do których obiekt dokumentu może uzyskać dostęp i które można modyfikować.


Metody obiektu dokumentu

Możemy uzyskać dostęp i zmienić zawartość dokumentu za pomocą jego metod.

Ważne metody obiektu dokumentu są następujące:

metodaOpis
napisz('ciąg znaków')zapisuje podany ciąg znaków w dokumencie.
writeln('ciąg znaków')zapisuje podany ciąg znaków w dokumencie ze znakiem nowej linii na końcu.
getElementById()zwraca element posiadający podaną wartość identyfikatora.
getElementsByName()zwraca wszystkie elementy posiadające podaną wartość nazwy.
getElementsByTagName()zwraca wszystkie elementy posiadające podaną nazwę znacznika.
getElementsByClassName()zwraca wszystkie elementy posiadające podaną nazwę klasy.

Dostęp do wartości pola według obiektu dokumentu

W tym przykładzie otrzymamy wartość tekstu wejściowego według użytkownika. Tutaj używamy dokument.formularz1.nazwa.wartość aby uzyskać wartość pola nazwy.

Tutaj, dokument jest elementem głównym reprezentującym dokument HTML.

Formularz 1 to nazwa formularza.

nazwa jest nazwą atrybutu tekstu wejściowego.

wartość to właściwość zwracająca wartość wprowadzonego tekstu.

Zobaczmy prosty przykład obiektu dokumentu, który wypisuje nazwę z wiadomością powitalną.

 function printvalue(){ var name=document.form1.name.value; alert('Welcome: '+name); } Enter Name: 

Dane wyjściowe powyższego przykładu

Wprowadź imię: