Obiektowy model dokumentu

Obiektowy model dokumentu (DOM)
DOM-model.svg
Przykład hierarchii DOM w dokumencie HTML
Skrót DOM
Opublikowane po raz pierwszy 1 października 1998 ; 24 lata temu ( 01.10.1998 )
Ostatnia wersja
DOM4 19 listopada 2015 ; 7 lat temu ( 19.11.2015 )
Organizacja Konsorcjum World Wide Web , WHATWG
Normy bazowe
WHATWG DOM Standard życia W3C DOM4
HTML
Porównania

Document Object Model ( DOM ) to wieloplatformowy i niezależny od języka interfejs, który traktuje dokument XML lub HTML jako strukturę drzewa , w której każdy węzeł jest obiektem reprezentującym część dokumentu. DOM reprezentuje dokument z drzewem logicznym. Każda gałąź drzewa kończy się węzłem, a każdy węzeł zawiera obiekty. Metody DOM umożliwiają programowy dostęp do drzewa; za ich pomocą można zmienić strukturę, styl czy treść dokumentu. Węzły mogą mieć dołączone procedury obsługi zdarzeń . Po uruchomieniu zdarzenia procedury obsługi zdarzeń są wykonywane.

Główną standaryzacją DOM zajmowało się konsorcjum World Wide Web Consortium (W3C), które ostatnio opracowało rekomendację w 2004 roku. WHATWG przejęło rozwój standardu, publikując go jako żywy dokument . W3C publikuje teraz stabilne migawki standardu WHATWG.

W HTML DOM (Document Object Model) każdy element jest węzłem:

  • Dokument jest węzłem dokumentu.
  • Wszystkie elementy HTML są węzłami elementów.
  • Wszystkie atrybuty HTML są węzłami atrybutów.
  • Tekst wstawiany do elementów HTML to węzły tekstowe.
  • Komentarze to węzły komentarzy.

Historia

Historia Document Object Model przeplata się z historią „ wojn przeglądarek ” późnych lat 90. między Netscape Navigator i Microsoft Internet Explorer , a także z historią JavaScript i JScript , pierwszych języków skryptowych , które zostały szeroko zaimplementowane w Silniki JavaScript przeglądarek internetowych .

JavaScript został wydany przez firmę Netscape Communications w 1995 roku w ramach przeglądarki Netscape Navigator 2.0. Konkurent Netscape'a, Microsoft , wypuścił w następnym roku Internet Explorera 3.0 z reimplementacją JavaScriptu o nazwie JScript. JavaScript i JScript pozwalają twórcom stron internetowych tworzyć strony internetowe z interaktywnością po stronie klienta . Ograniczone możliwości wykrywania zdarzeń generowanych przez użytkowników i modyfikowania dokumentu HTML w pierwszej generacji tych języków ostatecznie stały się znane jako „DOM Level 0” lub „Legacy DOM”. Nie opracowano niezależnego standardu dla DOM Level 0, ale został on częściowo opisany w specyfikacjach dla HTML 4 .

Starszy DOM był ograniczony pod względem rodzajów elementów , do których można było uzyskać dostęp. Do elementów form , link i image można odwoływać się za pomocą hierarchicznej nazwy rozpoczynającej się od głównego obiektu dokumentu. Hierarchiczna nazwa może wykorzystywać albo nazwy, albo sekwencyjny indeks przechodzących elementów. Na przykład element input formularza może być dostępny jako document.formName.inputName lub document.forms[0].elements[0] .

Starszy model DOM umożliwiał sprawdzanie poprawności formularzy po stronie klienta i prostą interaktywność interfejsu, taką jak tworzenie podpowiedzi .

W 1997 roku Netscape i Microsoft wydały odpowiednio wersję 4.0 Netscape Navigator i Internet Explorer, dodając obsługę funkcji Dynamic HTML (DHTML) umożliwiającej zmiany w załadowanym dokumencie HTML. DHTML wymagał rozszerzeń podstawowego obiektu dokumentu, który był dostępny w starszych implementacjach DOM. Chociaż starsze implementacje DOM były w dużej mierze kompatybilne, ponieważ JScript był oparty na JavaScript, rozszerzenia DHTML DOM były opracowywane równolegle przez każdego producenta przeglądarki i pozostawały niekompatybilne. Te wersje DOM stały się znane jako „Pośredni DOM”.

Po standaryzacji ECMAScript , Grupa Robocza W3C DOM rozpoczęła opracowywanie standardowej specyfikacji DOM. Ukończona specyfikacja, znana jako „DOM Level 1”, stała się rekomendacją W3C pod koniec 1998 r. Do 2005 r. duża część DOM W3C była dobrze obsługiwana przez popularne przeglądarki obsługujące ECMAScript, w tym Internet Explorer 6 (od 2001 r. ) , Opera , Przeglądarki oparte na Safari i Gecko (takie jak Mozilla , Firefox , SeaMonkey i Camino ).

Normy

CO DOM

Grupa Robocza W3C DOM opublikowała swoją ostateczną rekomendację, a następnie rozwiązała się w 2004 roku. Wysiłki rozwojowe przeniosły się do WHATWG , która nadal utrzymuje standard życia. W 2009 roku grupa Web Applications zreorganizowała działania DOM w W3C. W 2013 roku, z powodu braku postępów i zbliżającej się premiery HTML5 , specyfikacja DOM Level 4 została przeniesiona do HTML Working Group , aby przyspieszyć jej ukończenie. Tymczasem w 2015 roku grupa Web Applications została rozwiązana, a zarządzanie DOMem przeszło na grupę Web Platform. Począwszy od publikacji DOM Level 4 w 2015 roku, W3C tworzy nowe rekomendacje na podstawie migawek standardu WHATWG.

  • DOM Level 1 zapewniał kompletny model całego dokumentu HTML lub XML , w tym środki do zmiany dowolnej części dokumentu.
  • DOM Level 2 został opublikowany pod koniec 2000 roku. Wprowadził funkcję getElementById , a także model zdarzeń oraz obsługę przestrzeni nazw XML i CSS.
  • DOM Level 3, opublikowany w kwietniu 2004, dodał obsługę XPath i obsługi zdarzeń klawiatury , a także interfejs do serializacji dokumentów jako XML.
  • DOM Level 4 został opublikowany w 2015 roku. Jest to migawka standardu życia WHATWG.

Aplikacje

Przeglądarki internetowe

Aby renderować dokument, taki jak strona HTML, większość przeglądarek internetowych używa wewnętrznego modelu podobnego do modelu DOM . Węzły każdego dokumentu są zorganizowane w strukturę drzewa , zwaną drzewem DOM , z najwyższym węzłem o nazwie „Obiekt dokumentu”. Gdy strona HTML jest renderowana w przeglądarkach, przeglądarka pobiera kod HTML do pamięci lokalnej i automatycznie analizuje go, aby wyświetlić stronę na ekranie. Jednak DOM niekoniecznie musi być reprezentowany jako drzewo, a niektóre przeglądarki używają innych modeli wewnętrznych.

JavaScript

Po załadowaniu strony internetowej przeglądarka tworzy obiektowy model dokumentu strony, który jest zorientowaną obiektowo reprezentacją dokumentu HTML, który działa jako interfejs między JavaScript a samym dokumentem. Pozwala to na tworzenie dynamicznych stron internetowych , ponieważ w ramach strony JavaScript może:

  • dodawać, zmieniać i usuwać dowolne elementy i atrybuty HTML
  • zmienić dowolny styl CSS
  • reagować na wszystkie istniejące zdarzenia
  • tworzyć nowe wydarzenia

Struktura drzewa DOM

Drzewo Document Object Model (DOM) jest hierarchiczną reprezentacją dokumentu HTML lub XML . Składa się z węzła głównego, którym jest sam dokument, oraz serii węzłów podrzędnych, które reprezentują elementy, atrybuty i zawartość tekstową dokumentu. Każdy węzeł w drzewie ma węzeł nadrzędny, z wyjątkiem węzła głównego i może mieć wiele węzłów podrzędnych.

Elementy jako węzły

Elementy w dokumencie HTML lub XML są reprezentowane jako węzły w drzewie DOM. Każdy węzeł elementu ma nazwę znacznika, atrybuty i może zawierać inne węzły elementów lub węzły tekstowe jako elementy podrzędne. Na przykład dokument HTML o następującej strukturze:


  
    
  
  
    
    
  
 <  html  >  <  head  >  <  title  >  Moja strona internetowa  </  title  >  </  head  >  <  body  >  <  h1  >  Witam  </  h1  >  <  p  >  To jest moja strona internetowa.  </  p  >  </  treść  >  </  html  >

będzie reprezentowany w drzewie DOM jako:

- Document (root) - html - head - title - "Moja witryna" - body - h1 - "Witamy" - p - "To jest moja witryna".

Węzły tekstowe

Treść tekstowa w elemencie jest reprezentowana jako węzeł tekstowy w drzewie DOM. Węzły tekstowe nie mają atrybutów ani węzłów podrzędnych i zawsze są węzłami typu liść w drzewie. Na przykład treść tekstowa „Moja witryna” w elemencie tytułowym i „Witamy” w elemencie h1 w powyższym przykładzie są reprezentowane jako węzły tekstowe.

Atrybuty jako właściwości

Atrybuty elementu są reprezentowane jako właściwości węzła elementu w drzewie DOM. Na przykład element z następującym kodem HTML:

  <  a  href  =  "https://example.com"  >  Link  </  a  >

będzie reprezentowany w drzewie DOM jako:

- a - href: "https://example.com" - "Link"

Manipulowanie drzewem DOM

Drzewem DOM można manipulować za pomocą JavaScript lub innych języków programowania. Typowe zadania obejmują poruszanie się po drzewie, dodawanie, usuwanie i modyfikowanie węzłów oraz pobieranie i ustawianie właściwości węzłów. DOM API udostępnia zestaw metod i właściwości do wykonywania tych operacji, takich jak getElementById , createElement , appendChild i innerHTML . 


   


   


 // Utwórz element główny  var  root  =  document  .  utwórz element  (  "root"  );  // Utwórz element podrzędny  var  child  =  document  .  utwórz element  (  "dziecko"  );  // Dodaj element potomny do elementu głównego  root  .  dołącz Dziecko  (  dziecko  );

Innym sposobem na utworzenie struktury DOM jest użycie właściwości innerHTML do wstawienia kodu HTML jako ciągu znaków, tworząc w ten sposób elementy i elementy podrzędne. Na przykład:

   dokument  .  getElementById  (  "root"  ).  innerHTML  =  "<dziecko></dziecko>"  ;

Inną metodą jest użycie biblioteki lub struktury JavaScript, takiej jak jQuery , AngularJS , React , Vue.js itp. Biblioteki te zapewniają wygodniejszy i wydajniejszy sposób tworzenia, manipulowania i interakcji z modelem DOM.

Możliwe jest również utworzenie struktury DOM z danych XML lub JSON przy użyciu metod JavaScript w celu przeanalizowania danych i odpowiedniego utworzenia węzłów.

Należy zauważyć, że utworzenie struktury DOM niekoniecznie oznacza, że ​​będzie ona wyświetlana na stronie internetowej, istnieje tylko w pamięci i powinna być dołączona do treści dokumentu lub określonego kontenera, który ma być renderowany.

Podsumowując, tworzenie struktury DOM polega na tworzeniu pojedynczych węzłów i organizowaniu ich w strukturę hierarchiczną za pomocą JavaScript lub innych języków programowania i można to zrobić za pomocą kilku metod, w zależności od przypadku użycia i preferencji programisty.

Implementacje

Ponieważ DOM obsługuje nawigację w dowolnym kierunku (np. rodzic i poprzednie rodzeństwo) i pozwala na dowolne modyfikacje, implementacja musi przynajmniej buforować dokument, który został przeczytany do tej pory (lub jakąś jego przeanalizowaną formę).

Silniki układu

Przeglądarki internetowe polegają na silnikach układu , które przetwarzają HTML na DOM. Niektóre silniki układu, takie jak Trident/MSHTML , są powiązane głównie lub wyłącznie z określoną przeglądarką, taką jak Internet Explorer. Inne, w tym Blink , WebKit i Gecko , są udostępniane przez wiele przeglądarek, takich jak Google Chrome , Opera , Safari i Firefox . Różne silniki układu wdrażają standardy DOM w różnym stopniu zgodności.

Biblioteki

Implementacje DOM:

  • libxml2
  • MSXML
  • Xerces to zbiór implementacji DOM napisanych w C++, Javie i Perlu
  • xml.dom dla Pythona
  • XML dla<SCRIPT> is a JavaScript-based DOM implementation
  • PHP.Gt DOM to implementacja DOM po stronie serwera oparta na libxml2 i zapewnia zgodność z DOM poziomu 4 w języku programowania PHP
  • Domino to implementacja DOM po stronie serwera (Node.js) oparta na dom.js Mozilli. Domino jest używane w MediaWiki z edytorem wizualnym.
  • SimpleHtmlDom to prosty obiektowy model dokumentu HTML w języku C#, który może programowo generować ciąg HTML.

API udostępniające implementacje DOM:

  • JAXP (Java API for XML Processing) to interfejs API umożliwiający dostęp do dostawców DOM
  • Lazarus ( Free Pascal IDE) zawiera dwa warianty DOM - z formatem UTF-8 i ANSI

Narzędzia inspekcyjne:

Zobacz też

Ogólne odniesienia

Linki zewnętrzne

Pobrano z „ https://en.wikipedia.org/w/index.php?title=Document_Object_Model&oldid=1141103844 ”