Model de obiect document

Arborele nodului DOM al unui site web fictiv

Modelul de obiect document ( DOM ., Engl pentru Document Object Model ) este o specificație a unei interfețe de programare pe care HTML - sau XML - o documentează ca o structură de copac în care este fiecare nod un obiect , care reprezintă o parte a documentului, de ex. . B. un paragraf, un titlu, un videoclip sau o celulă de tabel. Interfața este independentă de platformă și limbaj de programare și permite astfel modificări standardizate ale structurii și aspectului unui document. În browserul web , aceasta reprezintă o componentă importantă pentru site-urile web dinamice.

DOM este definit de World Wide Web Consortium . O implementare care respectă specificația DOM, în sensul programării orientate pe obiecte, constă dintr-un set de clase împreună cu metodele și atributele acestora.

desemnare

Termenul „ Model de obiect document ” este de fapt un nume greșit, deoarece DOM nu este definit ca un model, ci ca o interfață pentru accesul la date și este, de asemenea, menționat ca atare de către W3C. Desemnarea ca model , pe de altă parte, subliniază modelul de obiect bine definit pe care se bazează interfața, a cărui validitate este o condiție prealabilă pentru validitatea interfeței construite pe ea. La un nivel mai ridicat de abstractizare, o interfață este, de asemenea, un model, și anume pentru modul în care sunt accesate obiecte sau date.

poveste

DOM a fost creat inițial sub influența a cel puțin două evoluții care au modelat în mod semnificativ lumea computerelor în trecutul recent. Ambele se bazează pe necesitatea de a putea accesa cu ușurință și uniform datele structurate din documentele HTML și XML .

La mijlocul anilor 1990, pe măsură ce World Wide Web a crescut în popularitate, a fost inventat limbajul de script JavaScript, iar browserele web populare au inclus de atunci interpreți care execută astfel de scripturi . JavaScript a definit opțiuni rudimentare pentru accesarea documentului HTML și pentru gestionarea evenimentelor . Mai târziu, diferiți producători de browser-uri au inventat diferite modele HTML dinamice (DHTML) care permiteau modificări mai ample ale structurii și aspectului documentului în timp ce documentul era afișat în browser. Cu toate acestea, aceste diferențe au făcut ca lucrătorii pentru dezvoltatorii web care doreau să utilizeze HTML dinamic să fie o problemă extrem de plictisitoare, deoarece aceștia erau deseori obligați să scrie o versiune separată pentru fiecare browser care să fie acceptat. Primele standarde DOM ale W3C sunt, prin urmare, încercări de a fuziona, standardiza și înlocui în cele din urmă diferitele tehnologii proprietare JavaScript și DHTML care au apărut în timpul războaielor browserelor . Acest lucru a reușit până acum că DOM are o importanță centrală în programarea JavaScript de astăzi.

În același timp, XML a apărut ca un format general de schimb pentru reprezentarea lizibilă de către oameni a datelor structurate, care a fost legată de succesul HTML. Pentru procesarea documentelor XML, a fost necesară o interfață inteligibilă, de înaltă performanță, care acoperea toate limbajele de programare. DOM oferă acest lucru și definește, de asemenea, interfețe suplimentare pentru manipularea convenabilă a documentelor XML.

Noțiuni de bază bazate pe un exemplu

Următorul cod HTML definește un tabel cu elementul tableși diverse subelemente:

<table>
  <thead>
    <tr>
      <th>Vorname</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Donald</td>
      <td>Duck</td>
    </tr>
  </tbody>
</table>

Așa arată în browser:

Așa arată în browser

DOM reprezintă tableelementul și subelementele sale în următoarea structură de arbore:

Structura arborelui DOM pentru subelemente

Structura de bază a modelului obiect poate fi discutată folosind acest exemplu: Documentele sunt reprezentate logic ca un arbore genealogic. Nodurile ( nodurile ) sunt despre „relații” între ele în legătură.

Tipuri de relații

Structura actuală este caracterizată în modelul obiectului prin următoarele relații:

  • Nodul rădăcină ( rădăcină ) tableare ca copii ( copii ) nodurile elementului theadși tbody.
  • tableNodul element este inversat un părinte ( părinte ) a theadși tbody.
  • Au fost menționați noduri cu un părinte comun (de exemplu, thnodul celor două elemente) (sunt frați ).

Pornind de la orice nod, orice alt nod poate fi atins prin aceste relații.

Tipuri de noduri

Cele mai importante tipuri de noduri din DOM sunt:

  • Un nod document reprezintă întreaga structură a arborelui.
  • Un nod de fragment de document reprezintă o parte a structurii arborelui.
  • Un nod de element corespunde exact unui element din HTML sau XML .
  • Un nod de atribut corespunde exact unui atribut în HTML sau XML.
  • Un nod text reprezintă conținutul text al unui element.

Nodurile de atribute sunt un tip special de nod, deoarece nu apar ca noduri în structura arborelui, care este formată în principal din noduri de elemente. Prin urmare, nodurile atributelor nu sunt „copii” ale nodurilor elementelor, ci proprietăți ale acestora.

Prelucrarea unui document

În primul pas, un document existent este citit de program și este generat un obiect document. Acest obiect poate fi utilizat pentru a accesa conținutul, structura și afișarea utilizând metodele API .

În special, DOM

  • navigarea între nodurile individuale ale unui document,
  • crearea, mutarea și ștergerea nodurilor, precum și
  • citirea, schimbarea și ștergerea conținutului text.

La sfârșitul procesării, un nou document XML sau HTML poate fi generat din obiectul documentului prin așa-numita serializare .

standardizare

DOM a fost un standard al W3C din 1998 și a fost actualizat și extins de mai multe ori de atunci. Există mai multe versiuni (niveluri) fiecare cu module diferite:

DOM nivel 0

Acest nivel nu a fost niciodată specificat formal. Nivelul 0 descrie tehnicile care pot fi utilizate prin intermediul JavaScript pentru a accesa documentele HTML. Acestea au fost introduse de browsere web precum Internet Explorer și Netscape Navigator înainte de standardizarea DOM.

DOM nivel 1

Lansat la sfârșitul anului 1998.

  • DOM Core (nucleul DOM) definește mișcarea în arborele DOM, manipularea nodurilor, inclusiv inserarea de elemente noi și setarea atributelor.
  • DOM HTML este extensia pentru accesarea documentelor HTML. Standardizează și completează practica deja răspândită, care se bazează pe specificațiile JavaScript de la Netscape și Microsoft JScript .

DOM nivel 2

Publicat la sfârșitul anului 2000.

  • DOM Core : i.a. Extensie pentru a include suport pentru spațiul de nume XML
  • DOM HTML : printre altele Extensie la documente XHTML , adaptare la DOM 2 Core
  • Stilul DOM și CSS DOM permit citirea dinamică, adăugarea și schimbarea formatării sau a aspectului documentului prin foi de stil , în special Foi de stil în cascadă (CSS).
  • Vizualizările DOM permit accesul la informații despre tipuri specifice de reproducere a documentului (de exemplu, afișarea grafică în browserul web). Acest lucru este utilizat în principal împreună cu DOM CSS pentru a afla valorile reale ale proprietății CSS ale anumitor elemente (de ex. „Care este culoarea de fundal a acestui titlu?”).
  • DOM Events standardizează procesarea evenimentelor din document, de exemplu acțiunile utilizatorului. Utilizat în principal în legătură cu JavaScript la afișarea documentelor HTML în browserele web. Bazat pe modelele de gestionare a evenimentelor Netscape Navigator și Internet Explorer pentru documente HTML.
  • DOM Traversal și DOM Range : Parcurgerea arborelui nodului pe baza anumitor criterii de selecție, lucrând cu zone din document care includ anumite elemente și noduri de text

DOM nivel 3

Publicat în aprilie 2004.

  • DOM 3 Core : extindere cuprinzătoare, inclusiv gestionarea îmbunătățită a excepțiilor și gestionarea codificărilor de caractere
  • DOM 3 Load and Save permite serializarea documentelor sau părților documentelor, precum și analiza documentelor XML în șiruri de caractere din obiectele documentului. În plus, documentele XML pot fi trimise și recuperate prin HTTP , așa cum este posibil cu tehnica XMLHttpRequest mai cunoscută .
  • DOM 3 XPath permite selectarea nodurilor pe baza expresiilor XPath .
  • DOM 3 Events extinde DOM 2 Events, printre altele. la evenimente de la tastatură.
  • Validarea DOM 3 vă permite să verificați dacă documentul DOM rămâne valabil după o modificare dinamică (adăugarea sau eliminarea nodurilor) .
  • Vizualizările și formatarea DOM 3 fac posibilă accesarea și schimbarea dinamică a conținutului, structurii și stilului.
  • DOM 3 Scheme abstracte

Vezi si

Link-uri web

Dovezi individuale

  1. JavaScript CRE146 (Podcast; de la 01:00:45)