Obiekt Document reprezentuje dokument, który jest wyświetlany w tym oknie. Obiekt Document ma różne właściwości odnoszące się do innych obiektów, które umożliwiają dostęp do treści dokumentu i modyfikację. W tym artykule zrozumiemy HTML DOM.
- Koncepcja HTML DOM
- Czym jest HTML DOM
- Czym NIE JEST HTML DOM
- Skąd pochodzi DOM
- Właściwości HTML DOM
- Znajdowanie elementów HTML
Koncepcja HTML DOM
Sposób uzyskiwania dostępu do udokumentowanej treści i jej modyfikowania nazywany jest Model obiektu dokumentu lub DOM. Obiekty są zorganizowane w hierarchię. Ta hierarchiczna struktura dotyczy organizacji obiektów w dokumencie sieci Web.
- Obiekt okna i minus Początek hierarchii. To najwyższy element hierarchii obiektów.
- Obiekt dokumentu & minus Każdy dokument HTML, który jest ładowany do okna, staje się obiektem dokumentu. Dokument zawiera zawartość strony.
- Obiekt formularza & minus Wszystko zawarte w znacznikach… ustawia obiekt formularza.
- Elementy kontrolne formularza & minus Obiekt formularza zawiera wszystkie elementy zdefiniowane dla tego obiektu, takie jak pola tekstowe, przyciski, przyciski opcji i pola wyboru.
Czym jest HTML DOM
Document Object Model to programistyczny interfejs API dla dokumentów. Sam model obiektowy bardzo przypomina strukturę dokumentów, które modeluje. Weźmy na przykład pod uwagę poniższą tabelę, zaczerpniętą z dokumentu HTML:
| Shady Grove | eoliczny |
| Za rzeką, Charlie | dorycki |
Czym NIE JEST HTML DOM
Ta sekcja ma na celu dokładniejsze zrozumienie modelu obiektu dokumentu poprzez odróżnienie go od innych systemów, które mogą się do niego podobać.
Chociaż model obiektu dokumentu był pod silnym wpływem dynamicznego kodu HTML, na poziomie 1 nie implementuje on całego dynamicznego kodu HTML. W szczególności wydarzenia nie zostały jeszcze zdefiniowane. Poziom 1 został zaprojektowany, aby położyć solidne podstawy dla tego rodzaju funkcjonalności, zapewniając solidny, elastyczny model samego dokumentu.
Model obiektu dokumentu nie jest specyfikacją binarną. Programy Document Object Model napisane w tym samym języku będą kompatybilne z kodem źródłowym na różnych platformach, ale Document Object Model nie definiuje żadnej formy binarnej interoperacyjności.
Model obiektu dokumentu nie jest sposobem na utrwalanie obiektów w formacie XML lub HTML. Zamiast określać, w jaki sposób obiekty mogą być reprezentowane w formacie XML, model obiektów dokumentu określa, w jaki sposób dokumenty XML i HTML są reprezentowane jako obiekty, dzięki czemu mogą być używane w programach zorientowanych obiektowo.
Model obiektu dokumentu nie jest zbiorem struktur danych, jest to model obiektowy, który określa interfejsy. Chociaż ten dokument zawiera diagramy pokazujące relacje rodzic / potomek, są to relacje logiczne zdefiniowane przez interfejsy programistyczne, a nie reprezentacje jakichkolwiek konkretnych wewnętrznych struktur danych.
Model obiektu dokumentu nie definiuje „prawdziwej wewnętrznej semantyki” XML lub HTML. Semantyka tych języków jest definiowana przez same języki.
Model obiektów dokumentu to model programowania zaprojektowany z uwzględnieniem tej semantyki. Model obiektu dokumentu nie ma żadnych konsekwencji dla sposobu pisania dokumentów XML i HTML. Każdy dokument, który można napisać w tych językach, może być reprezentowany w modelu obiektu dokumentu.
Document Object Model, pomimo swojej nazwy, nie jest konkurentem Component Object Model (COM). COM, podobnie jak CORBA, jest niezależnym od języka sposobem określania interfejsów i obiektów. Document Object Model to zestaw interfejsów i obiektów zaprojektowanych do zarządzania dokumentami HTML i XML. DOM może byćzaimplementowane przy użyciu systemów niezależnych od języka, takich jak COM lub CORBA, może być również zaimplementowane przy użyciu powiązań specyficznych dla języka, takich jak powiązania Java lub ECMAScript określone w tym dokumencie.
Skąd pochodzi model obiektu dokumentu
Model obiektów dokumentu powstał jako specyfikacja umożliwiająca przenoszenie skryptów JavaScript i programów Java między przeglądarkami internetowymi. Dynamiczny HTML był bezpośrednim przodkiem Document Object Model i pierwotnie był pomyślany głównie w kategoriach przeglądarek.
Jednak gdy utworzono grupę roboczą Document Object Model, dołączyli do niej również dostawcy z innych dziedzin, w tym edytory HTML lub XML i repozytoria dokumentów. Kilku z tych dostawców pracowało z SGML zanim XML został opracowany, w wyniku czego na Model Obiektu Dokumentu wpłynął SGML Groves i standard HyTime. Niektórzy z tych dostawców opracowali również własne modele obiektów dla dokumentów w celu ich udostępnianiaprogramowania interfejsów API dla edytorów SGML / XML lub repozytoriów dokumentów, a te modele obiektowe miały również wpływ na model obiektowy dokumentu.
Właściwości HTML DOM
Zobaczmy właściwości obiektów dokumentu, do których można uzyskać dostęp i które mogą być modyfikowane przez obiekt dokumentu.
- Obiekt okna: Obiekt okna zawsze znajduje się na szczycie hierarchii.
- Obiekt dokumentu: Kiedy dokument HTML jest ładowany do okna, staje się obiektem dokumentu.
- Obiekt formularza: Jest reprezentowany przez Formularz tagi.
- Połącz obiekty: Jest reprezentowany przez połączyć tagi.
- Obiekty zakotwiczone: Jest reprezentowany przez a href tagi.
- Elementy sterujące formularzem: Formularz może mieć wiele elementów sterujących, takich jak pola tekstowe, przyciski, przyciski opcji, pola wyboru itp.
Metody obiektu dokumentu :
- write („string”): zapisuje podany ciąg w dokumencie.
- getElementById (): zwraca element o podanej wartości id.
- getElementsByName (): zwraca wszystkie elementy mające podaną wartość nazwy.
- getElementsByTagName (): zwraca wszystkie elementy mające podaną nazwę znacznika.
- getElementsByClassName (): zwraca wszystkie elementy mające podaną nazwę klasy.
Znajdowanie elementów HTML
Jeśli chcesz uzyskać dostęp do elementów HTML za pomocą JavaScript, musisz najpierw znaleźć elementy.
Można to zrobić na kilka sposobów:
- Znajdowanie elementów HTML według identyfikatora
- Znajdowanie elementów HTML według nazwy znacznika
- Znajdowanie elementów HTML według nazwy klasy
Znajdowanie elementu HTML według identyfikatora
Najłatwiejszym sposobem znalezienia elementu HTML w DOM jest użycie identyfikatora elementu.
Przykład
Znajdowanie elementów HTML według nazwy znacznika
W tym przykładzie znajduje element z id = ”main”, a następnie znajduje all
elementy wewnątrz „main”:
W ten sposób dochodzimy do końca tego artykułu HTML DOM. Mam nadzieję, że rozumiesz różne aspekty HTML DOM, Document Object Model.
Sprawdź nasze który obejmuje szkolenie na żywo prowadzone przez instruktora i rzeczywiste doświadczenie projektowe. To szkolenie zapewni Ci biegłość w pracy z technologiami internetowymi zaplecza i front-endu. Obejmuje szkolenia w zakresie tworzenia stron internetowych, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
co robi .format w Pythonie
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy na blogu „Obrazy HTML”, a skontaktujemy się z Tobą.