Co to jest DOM HTML?
HTML DOM jest modelem obiektowym dla HTML . Określa:
- Elementy HTML jako obiekty
- Właściwości wszystkich elementów HTML
- Metody dla wszystkich elementów HTML
- Zdarzenia dla wszystkich elementów HTML
HTML DOM to API ( interfejs programowania) dla JavaScript :
- JavaScript może dodawać/zmieniać/usuwać elementy HTML
- JavaScript może dodawać/zmieniać/usuwać atrybuty HTML
- JavaScript może dodawać/zmieniać/usuwać style CSS
- JavaScript może reagować na zdarzenia HTML
- JavaScript może dodawać/zmieniać/usuwać zdarzenia HTML
DOM HTML (Document Object Model)
Po załadowaniu strony internetowej przeglądarka tworzy Model obiektu dokumentu strony .
Model HTML DOM jest skonstruowany jako drzewo obiektów :
Drzewo obiektów HTML DOM
Znajdowanie elementów HTML
Jeśli chcesz uzyskać dostęp do elementów HTML za pomocą JavaScript, musisz najpierw znaleźć te elementy.
Można to zrobić na kilka sposobów:
- Znajdowanie elementów HTML według id
- Znajdowanie elementów HTML według nazwy tagu
- Znajdowanie elementów HTML według nazwy klasy
- Znajdowanie elementów HTML za pomocą selektorów CSS
- Znajdowanie elementów HTML według kolekcji obiektów HTML
Znajdowanie elementu HTML według identyfikatora
Najłatwiejszym sposobem znalezienia elementu HTML w DOM jest użycie identyfikatora elementu.
Ten przykład znajduje element z id="intro":
Przykład
var myElement = document.getElementById("intro");
Jeśli element zostanie znaleziony, metoda zwróci element jako obiekt (w myElement).
Jeśli element nie zostanie znaleziony, myElement będzie zawierać null.
Znajdowanie elementów HTML według nazwy tagu
Ten przykład wyszukuje wszystkie elementy <p>:
Przykład
var x = document.getElementsByTagName("p");
Ten przykład wyszukuje element z id="main", a następnie wyszukuje wszystkie elementy <p> wewnątrz "main":
Przykład
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Znajdowanie elementów HTML według nazwy klasy
Jeśli chcesz znaleźć wszystkie elementy HTML o tej samej nazwie klasy, użyj metody getElementsByClassName().
Ten przykład zwraca listę wszystkich elementów z class="intro".
Przykład
var x = document.getElementsByClassName("intro");
Znajdowanie elementów według nazwy klasy nie działa w programie Internet Explorer 8 i wcześniejszych wersjach.
Znajdowanie elementów HTML za pomocą selektorów CSS
Jeśli chcesz znaleźć wszystkie elementy HTML, które pasują do określonego selektora CSS (id, nazwy klas, typy, atrybuty, wartości atrybutów itp.), użyj metody querySelectorAll().
Ten przykład zwraca listę wszystkich elementów <p> z class="intro".
Przykład
var x = document.querySelectorAll("p.intro");
Metoda querySelectorAll() nie działa w programie Internet Explorer 8 i wcześniejszych wersjach.
Znajdowanie elementów HTML według kolekcji obiektów HTML
Dostępne są również kolekcje obiektów HTML:
Samouczek HTML DOM
Pełny samouczek HTMLDOM
To było krótkie wprowadzenie do HTMLDOM.
Aby zapoznać się z pełnym samouczkiem HTMLDOM, przejdź do Samouczka HTMLDOM W3Schools .