Celem dokumentu HTML DOM jest właścicielem wszystkich innych obiektów w swojej stronie internetowej.
Przedmiot HTML DOM Document
Obiekt document reprezentuje swoją stronę internetową.
Jeśli chcesz uzyskać dostęp do dowolnego elementu na stronie HTML, zawsze zaczynają się dostępu do obiektu document.
Poniżej przedstawiamy kilka przykładów, jak można korzystać z obiektu dokumentu na dostęp i manipulowanie HTML.
Znajdowanie elementów HTML
| metoda | Opis |
|---|---|
| document.getElementById( id ) | Znajdź element po elemencie id |
| document.getElementsByTagName( name ) | Znajdź elementy według nazwy znacznika |
| document.getElementsByClassName( name ) | Znajdź elementy według nazwy klasy |
Zmiana elementów HTML
| metoda | Opis |
|---|---|
| element .innerHTML = new html content | Zmień wewnętrzną HTML elementu |
| element . attribute = new value | Zmień wartość atrybutu elementu HTML |
| element .setAttribute (attribute, value) | Zmień wartość atrybutu elementu HTML |
| element .style. property = new style | Zmień styl elementu HTML |
Dodawanie i usuwanie elementów
| metoda | Opis |
|---|---|
| document.createElement( element ) | Tworzenie elementu HTML |
| document.removeChild( element ) | Usuwanie elementu HTML |
| document.appendChild( element ) | Dodaj element HTML |
| document.replaceChild( element ) | Wymienić element HTML |
| document.write( text ) | Napisz do strumienia wyjściowego HTML |
Dodawanie wydarzeń Manipulatory
| metoda | Opis |
|---|---|
| document.getElementById( id ).onclick = function(){ code } | Dodając kod obsługi zdarzenia do onclick zdarzenia |
Znalezienie obiektów HTML
Pierwszy HTML DOM Level 1 (1998), zdefiniowane obiekty 11 HTML, zbiory obiektów i właściwości. Są nadal aktualne w HTML5.
Później, w HTML DOM Level 3, dodano więcej obiektów, zbiorów i właściwości.
| Nieruchomość | Opis | DOM |
|---|---|---|
| document.anchors | Zwraca wszystkie <a> elementów, które mają atrybut nazwy | 1 |
| document.applets | Zwraca wszystkie <applet> elementy (Przestarzałe w HTML5) | 1 |
| document.baseURI | Zwraca absolutne podstawy URI dokumentu | 3 |
| document.body | Zwraca <body> elementu | 1 |
| document.cookie | Zwraca ciasteczko dokumentu | 1 |
| document.doctype | Zwraca doctype dokumentu | 3 |
| document.documentElement | Zwraca <html> Element | 3 |
| document.documentMode | Zwraca tryb używany przez przeglądarkę | 3 |
| document.documentURI | Zwraca URI dokumentu | 3 |
| document.domain | Zwraca nazwę domeny serwera dokumentów | 1 |
| document.domConfig | Nieaktualny. Zwraca konfiguracji DOM | 3 |
| document.embeds | Zwraca wszystkie <embed> elementy | 3 |
| document.forms | Zwraca wszystkie <form> elementy | 1 |
| document.head | Zwraca <head> Element | 3 |
| document.images | Zwraca wszystkie <img> elementy | 1 |
| document.implementation | Zwraca implementacji DOM | 3 |
| document.inputEncoding | Zwraca kodowanie dokumentu (zestawu znaków) | 3 |
| document.lastModified | Zwraca czas, datę, a dokument został zaktualizowany | 3 |
| document.links | Zwraca wszystkie <area> i <a> elementy, które mają atrybut href | 1 |
| document.readyState | Zwraca status (ładowanie) dokumentu | 3 |
| document.referrer | Zwraca URI polecający (dokument łączący) | 1 |
| document.scripts | Zwraca wszystkie <script> elementy | 3 |
| document.strictErrorChecking | Zwraca jeśli sprawdzanie błędów jest egzekwowane | 3 |
| document.title | Zwraca <title> elementu | 1 |
| document.URL | Zwraca pełny adres URL dokumentu | 1 |