Vedere arborescentă HTML. HTML5 - Reprezentarea DOM și managementul documentelor. Documentele ca arbori de noduri

Întocmit de: Evgeny Ryzhkov Data publicării: 15.11.2010

Un arbore de document este o diagramă pentru construirea unui document HTML care arată relațiile dintre diferitele elemente ale paginii: ordinea și imbricarea elementelor. Această diagramă ajută la navigarea în această mizerie aparent haotică a etichetelor HTML.

Arborele documentelor ajută un dezvoltator web atunci când scrie reguli CSS și scripturi Javascript.

Nota

Nu confundați arborele documentului cu modelul obiect document (DOM). DOM este un concept mai complex (vom scrie despre el puțin mai târziu).

Pentru a nu intra în explicații lungi și plictisitoare despre motivul pentru care un arbore de document a fost numit arbore, să ne uităm la un exemplu - luați un cod HTML simplu:

Titlul paginii Titlul principal

paragraf de text.

  • punctul 1
  • punctul 2
Al doilea titlu

Așa este văzut codul HTML de către nativii neluminați care au făcut clic accidental pentru a vedea codul paginii. Dar ochiul instruit al unui dezvoltator web îl va dezamăgi, va vedea toate nivelurile de imbricare și interconectare. Va construi din haos o structură ierarhică clară sub forma unui arbore (deoarece diagrama este similară cu conturul unui arbore):

Legături de familie

Există anumite conexiuni între elementele arborelui documentului. Să ne uităm la ele.

Strămoși și descendenți

Din imaginea schematică a arborelui și din codul HTML în sine, este clar că unele elemente sunt imbricate în altele. Elementele care conțin altele sunt strămoșii (strămoșii) a tot ceea ce este încorporat în el. Cei cuibăriți, la rândul lor, sunt descendenții acestuia (descendenții).

Pentru claritate, luați în considerare o ramură a copacului nostru:

Fiecare strămoș poate avea un număr nelimitat de descendenți. Fiecare descendent va avea un număr de strămoși în funcție de structura arborelui și în ce ramură va fi amplasat, dar în orice caz va exista cel puțin un strămoș.

Părinți și fiice

Părintele este strămoșul imediat (strămoșul de prim nivel) al unui element. În schimb, copilul imediat (copilul de primul nivel) se numește copil.

Fiecare părinte poate avea un număr nelimitat de fiice. Un element copil va avea un singur părinte.

Elementul părinte se mai numește strămoș direct, iar elementul copil este numit descendent direct. Acestea sunt ceva ca nume semantice.

Elemente surori

Frații sunt un grup de două sau mai multe elemente care au un părinte comun. Elementele nu trebuie să fie de același tip, trebuie doar să aibă un părinte comun.

Elemente adiacente

Elementele adiacente sunt elemente surori care sunt situate în „cartier”.

Sora anterioară și sora următoare

Totul aici ar trebui să fie clar din numele termenilor înșiși. Frate anterior - elementul soră anterior prin cod. Folosind exemplul nostru de ramură pentru

    va fi

    Pentru

    - și căci nu va exista nici o frăție anterioară.

    În mod similar, următoarea soră (următoarea frate): pentru -

    Pentru

    —

      , Pentru
        - Nu.

        Anterior și următorul

        Elementul anterior (precedent) - același element anterior conform codului, numai fără restricții ale relațiilor cu sora. Pentru filiala noastră: pt

          va fi

          Pentru

          - , Pentru - .

          API-ul DOM nu este deosebit de complex, dar înainte de a discuta despre programare cu DOM, există câteva probleme de arhitectură DOM de înțeles.

          Reprezentarea documentelor ca arbori
          Documentele HTML au o structură ierarhică, reprezentată în DOM sub formă de arbore. Nodurile de arbore reprezintă diferite tipuri de conținut de document. În primul rând, vizualizarea arborescentă a unui document HTML conține noduri reprezentând elemente sau etichete precum și

          Și noduri reprezentând linii de text. Un document HTML poate conține și noduri reprezentând comentarii HTML.1 Luați în considerare următoarele
          un simplu document HTML.

          Exemplu de document

          Un document HTML

          Acesta este un simplu document.

          Pentru cei care nu sunt încă familiarizați cu structurile arborescente în programarea computerelor, este util să știe că împrumută terminologia din arborii genealogici. Nodul situat direct deasupra unui nod dat este numit părintele acelui nod. Nodurile care sunt la un nivel sub alt nod sunt copii ale acelui nod.

          Nodurile care sunt la același nivel și au același părinte se numesc frați. Noduri situate la orice
          numărul de niveluri de sub alt nod sunt copiii acestuia. Părinte, bunicul și orice alte noduri situate deasupra unui nod dat sunt strămoșii acestuia.

          Noduri
          Structura arborelui DOM este un arbore de obiecte Node de diferite tipuri. Interfața Node1 definește proprietăți și metode pentru navigarea și manipularea arborelui. Proprietatea childNodes a unui obiect Node returnează o listă de noduri copil, proprietățile firstChild, lastChild, nextSibling, previousSibling și parentNode oferă o modalitate de a traversa nodurile arborelui. Metode precum appendChild(), removeChild(), replaceChild() și insertBefore() vă permit să adăugați noduri în arborele documentului și să le eliminați.

          Tipuri de noduri
          Tipurile de noduri din arborele de documente sunt reprezentate de subinterfețe speciale ale interfeței Node. Orice obiect Node are o proprietate nodeType care determină tipul nodului. Dacă proprietatea nodeType a unui nod este egală, de exemplu, cu constanta Node.ELEMENT_NODE, atunci obiectul Node este, de asemenea, un obiect Element și puteți utiliza toate metodele și proprietățile definite de interfața Element cu acesta.

          Proprietatea document-Element a acestui obiect se referă la un obiect Element care reprezintă elementul rădăcină al documentului. Pentru documentele HTML, aceasta este o etichetă care este prezentă în mod explicit sau implicit în document. (Pe lângă elementul rădăcină, un nod Document poate avea și alte elemente copil, cum ar fi obiecte Comment.)

          Cea mai mare parte a arborelui DOM constă din obiecte Element reprezentând etichete precum și și obiecte Text care reprezintă linii de text. Dacă analizatorul de documente stochează comentarii, aceste comentarii sunt reprezentate în arbore ca obiecte Comentariu DOM.

          Atribute
          Atributele elementului (de exemplu, atributele src și width ale unei etichete ) poate fi citit, setat și eliminat folosind metodele getAttribute(), set-Attribute() și removeAttribute() ale interfeței Element.

          Altele, mai puțin mod convenabil lucrul cu atribute este metoda getAttribute-Node(), care returnează un obiect Attr reprezentând atributul și valoarea acestuia. (Un motiv pentru alegerea acestei tehnologii mai puțin convenabile este că interfața Attr are o proprietate specificată, care vă permite să determinați dacă un anumit atribut este specificat în mod explicit în document sau are o valoare implicită.) Rețineți, totuși, că obiectele Attr nu sunt prezente în matricea childNodes a elementului și nu fac parte direct din arborele documentului, cum ar fi nodurile Element și Text.

          Specificația DOM permite accesarea nodurilor Attr prin intermediul matricei de atribute a interfeței Node, dar Microsoft Internet Explorer definește o matrice de atribute diferită, incompatibilă, ceea ce face imposibilă utilizarea acestei matrice într-o manieră portabilă.

          API HTML DOM
          Standardul DOM este proiectat să funcționeze atât cu XML, cât și cu HTML. API-ul DOM de bază — Nodul, Elementul, Documentul și alte interfețe — este relativ universal și se aplică ambelor tipuri de documente. Standardul DOM include și interfețe specifice documentelor HTML. HTMLDocument este o subinterfață specifică HTML a interfeței Document, iar HTMLElement este o subinterfață specifică HTML a interfeței Element. În plus, DOM definește interfețe specifice etichetelor pentru multe elemente HTML. Aceste interfețe, cum ar fi HTMLBodyElement și HTMLTitleElement, definesc de obicei un set de proprietăți care reflectă atributele unei etichete HTML date. Interfața HTMLDocument definește diverse proprietăți și metode ale documentului care au fost acceptate de browsere înainte de standardul W3C. Acestea includ proprietatea locație, matricea de formulare și metoda write().

          Interfața HTMLElement definește proprietățile id, style, title, lang, dir și className, care oferă acces convenabil la valorile atributelor id, style, title, lang, dir și class care pot fi utilizate cu toate HTML. etichete.

          Etichetele HTML nu acceptă alte atribute decât cele șase listate și, prin urmare, sunt reprezentate în întregime de interfața HTMLElement.

          Pentru toate celelalte etichete HTML din partea specificației DOM referitoare la
          la HTML, sunt definite interfețe speciale. Pentru multe etichete HTML
          aceste interfețe nu fac altceva decât să ofere un set de proprietăți corespunzătoare atributelor HTML. De exemplu, tegu

            există o interfață HTMLU ListElement corespunzătoare, iar eticheta are o interfață HTMLBodyElement corespunzătoare. Deoarece aceste interfețe definesc pur și simplu proprietăți care sunt standardizate în HTML, ele nu sunt documentate în detaliu în această carte.

            Puteți presupune cu siguranță că obiectul HTMLElement care reprezintă o anumită etichetă HTML are proprietăți pentru fiecare dintre atributele standard ale acelei etichete (consultați convențiile de denumire în secțiunea următoare). Rețineți că standardul DOM definește proprietăți pentru atributele HTML pentru confortul scriitorilor de scripturi. O modalitate comună (și poate preferată) de a citi și a seta valorile atributelor este oferită de metodele getAttribute() și setAttribute() ale obiectului Element. Unele dintre interfețele descrise în DOM HTML definesc proprietăți sau metode suplimentare, altele decât cele corespunzătoare valorilor atributelor HTML. De exemplu, interfața HTMLInputElement definește metodele focus() și blur(), iar interfața HTMLFormElement definește metodele submit() și reset() și proprietatea length. Astfel de metode și proprietăți au fost în general prezente înainte de standardizarea DOM și au fost făcute parte din standardul de compatibilitate cu practica de programare acceptată. Astfel de interfețe sunt documentate în Referința W3C DOM (Partea V). În plus, informații despre porțiunile de „cele mai bune practici” ale acestor interfețe pot fi găsite în partea a IV-a a Referinței JavaScript pentru client, deși aceste informații sunt adesea enumerate sub numele folosit înainte de standardizarea DOM, cum ar fi HTMLFormElement și HTMLInputElement în Referința pentru JavaScript pe partea clientului” sunt descrise în secțiunile „Formular” și „Introducere”.

            Convenții de denumire pentru HTML
            Când lucrați cu părți specifice HTML ale standardului DOM, trebuie să aveți în vedere câteva convenții simple de denumire. Numele proprietăților specifice interfeței HTML încep cu litere mici. Dacă numele proprietății constă din mai mult de un cuvânt, primele litere ale celui de-al doilea și ale cuvintelor următoare sunt scrise cu majuscule. Astfel, atributul maxlength al etichetei este tradus în proprietatea maxLength a interfeței HTMLInputElement.

            Când numele unui atribut HTML intră în conflict cu un cuvânt cheie JavaScript, numele este prefixat cu „html” pentru a rezolva conflictul. De exemplu, atributul for al unei etichete este tradus în proprietatea htmlFor a interfeței HTMLLabelElement. Excepția de la această regulă este atributul class (care poate fi specificat pentru orice element HTML) - este tradus în proprietatea className1 a interfeței HTMLElement.

            Niveluri și capabilități DOM
            Există două versiuni, sau două „nivele”, ale standardului DOM. Nivelul 1 DOM a fost standardizat în octombrie 1998. Acesta definește interfețele de bază DOM, cum ar fi Node, Element, Attr și Document, precum și diverse interfețe specifice HTML. Nivelul 2 DOM a fost standardizat în noiembrie 2000.2 Pe lângă unele modificări aduse interfețelor de bază, această versiune a DOM a fost extinsă foarte mult prin definirea API-urilor standard pentru lucrul cu evenimente de document și foi de stil în cascadă (CSS), precum și prin furnizarea de instrumente suplimentare pentru lucrul cu zone continue de documente. În momentul scrierii acestui articol, Grupul de lucru DOM de la W3C standardizează la nivelul DOM 3. În plus, este posibil să vedeți ocazional referințe la nivelul DOM 0. Acest termen nu se referă la niciun standard formal, dar servește ca referință informală la modelul obiect comun. document de facilități implementat în Netscape și Internet Explorer înainte de standardizarea de către consorțiul W3C. Cu DOM Level 2, standardul a devenit modular. Modulul de bază, care definește structura arborescentă de bază a unui document folosind (printre altele) interfețele Document, Node, Element și Next, este singurul modul necesar. Toate celelalte module sunt opționale și pot fi sau nu acceptate, în funcție de implementare. Implementarea DOM a unui browser web trebuie să accepte modulul HTML, deoarece documentele web sunt scrise în HTML. Browserele care acceptă foi de stil CSS acceptă de obicei modulele StyleSheets și CSS, deoarece stilurile CSS joacă un rol cheie în programarea HTML dinamică. De asemenea, deoarece majoritatea programelor JavaScript interesante necesită gestionarea evenimentelor, ne putem aștepta ca browserele web să accepte modulul Evenimente din specificația DOM.

            Din păcate, modulul Evenimente a fost definit doar recent de specificația DOM Level 2 și nu a fost acceptat pe scară largă la momentul scrierii acestui articol.

            Conformitatea DOM
            La momentul scrierii acestui articol, nu există niciun browser care să respecte pe deplin standardul DOM. Lansările recente ale Mozilla s-au apropiat cel mai mult de acest lucru, iar compatibilitatea completă cu DOM Nivelul 2 este un obiectiv al proiectului Mozilla. Browserul Netscape 6.1 respectă majoritatea modulelor importante de Nivel 2, în timp ce Netscape 6.0 are o compatibilitate destul de bună, dar cu unele lacune. Internrt Explorer 6 este în mare parte compatibil (cu cel puțin o excepție nefericită) cu DOM Nivelul 1, dar nu acceptă multe module de Nivelul 2, în special modulul Evenimente. Internet Explorer 5 și 5.5 au lacune semnificative de compatibilitate, dar acceptă metode cheie de nivel 1 DOM suficient de bine pentru a rula majoritatea exemplelor din acest capitol. Versiunea pentru Macintosh a IE are suport DOM mult mai cuprinzător decât IE 5 pentru Windows. Pe lângă Mozilla, Netscape, Internet Explorer și alte câteva browsere oferă suport cel puțin parțial DOM. Numărul de browsere disponibile a devenit prea mare, iar schimbările în suportul standardelor au loc prea repede, pentru ca această carte să încerce să precizeze definitiv ce caracteristici DOM acceptă un anumit browser. Prin urmare, va trebui să vă bazați pe alte surse de informații pentru a determina compatibilitatea implementării DOM în orice browser dat. O sursă de informații despre compatibilitate este implementarea în sine. Într-o implementare conformă, proprietatea de implementare a obiectului Document se referă la un obiect DOMImplementation care definește o metodă numită hasFeature(). Această metodă (dacă există) poate fi utilizată pentru a obține informații despre dacă un anumit modul standard DOM (sau caracteristici) este acceptat. De exemplu, puteți determina dacă implementarea DOM a unui browser web acceptă interfețele de bază DOM de nivel 1 pentru lucrul cu documente HTML folosind următorul cod:

            Dacă (document.implementation &&
            document.implementation.hasFeature &&
            document.implementation.hasFeature("html", "1.0")) (
            // Browserul pretinde că acceptă interfețele de bază de Nivel 1
            // și interfețe HTML
            }

            Metoda hasFeature() are două argumente: primul este numele modulului care este verificat, iar al doilea este numărul versiunii sub formă de șir. Returnează true dacă versiunea specificată a modulului specificat este acceptată.

            De exemplu, dacă hasFeature() indică faptul că modulul MouseEvents este acceptat, aceasta înseamnă că este acceptat și modulul UIEvents, ceea ce implică, la rândul său, suport pentru modulele Evenimente, Vizualizări și Core În Internet Explorer 6 (pe Windows), hasFeature () returnează adevărat numai pentru modulul „HTML” și versiunea „1.0”. Nu raportează compatibilitatea cu alte module

            În Netscape 6.1, hasFeature() returnează true pentru majoritatea numelor de module și numerelor de versiune, cu excepția modulelor Traversal și Mutation-Events. Metoda returnează false pentru modulele Core și CSS2 versiunea 2.0, indicând compatibilitate incompletă (chiar dacă suportul pentru aceste module este foarte bun).

            Această carte documentează interfețele care compun toate modulele DOM. Modulele Core, HTML, Traversal și Range sunt acoperite în acest capitol. Modulele StyleSheets, CSS și CSS2 sunt acoperite în Capitolul 18, iar diferitele module legate de evenimente (cu excepția MutationEvents) sunt tratate în Capitolul 19. Partea V, Referința W3C DOM, conține o descriere completă a tuturor modulelor.

            Metoda hasFeature() nu este complet de încredere. După cum sa menționat mai sus, IE 6 raportează compatibilitatea de Nivel 1 cu instrumentele HTML, chiar dacă există unele probleme de compatibilitate. Pe de altă parte, Netscape 6.1 raportează incompatibilitate cu Level 2 Core, chiar dacă acest browser este aproape compatibil cu acest modul. În ambele cazuri, sunt necesare informații mai detaliate despre ce anume este compatibil și ce nu este. Dar volumul acestor informații este prea mare și prea variabil pentru a fi inclus într-o publicație tipărită.

            Cei care sunt activi în dezvoltarea web, fără îndoială, știu deja sau vor afla în curând despre multe detalii de compatibilitate specifice browserului. Există și resurse pe Internet care pot fi de ajutor. Cel mai important, W3C (în colaborare cu Institutul Național de Standarde și Tehnologie din SUA) lucrează la crearea unui set de instrumente open source pentru testarea implementărilor DOM. Pe
            În momentul scrierii acestui articol, dezvoltarea suitei de teste este abia la început, dar ar trebui să ofere un mijloc neprețuit de testare fină a compatibilității implementării DOM. Detalii pot fi găsite la http://www.w3c.org/DOM/Test/.

            Organizația Mozilla are mai multe suite de testare pentru diferite standarde, inclusiv DOM Level 1 (disponibil la http://www.mozilla.org/qualitybrowser_sc.html). Netscape a publicat o suită de teste care include câteva teste pentru DOM Level 2 (disponibilă la http://developer.netscape.com/evangelism/tools/testsuites/). Netscape a publicat, de asemenea, o comparație părtinitoare (și depășită) a compatibilității DOM a versiunilor Mozilla timpurii și IE 5.5 (disponibilă la http://home.netscape.com/browsers/future/standards.html). În cele din urmă, puteți găsi și informații de compatibilitate și conformitate pe site-uri independente de pe Internet. Un site demn de menționat este publicat de Peter-Paul Koch. Un link către tabelul de compatibilitate DOM poate fi găsit pe pagina principală JavaScript (http://www.xs4all.nl/~ppk/js/).

            Compatibilitate cu Internet Explorer DOM
            Întrucât IE este cel mai utilizat browser web, câteva note speciale despre compatibilitatea sa cu specificațiile DOM sunt necesare aici. IE 5 și versiunile ulterioare acceptă funcțiile de bază de nivel 1 și HTML suficient de bine pentru a rula exemplele din acest capitol și acceptă funcțiile cheie CSS de nivel 2 suficient de bine pentru a rula majoritatea exemplelor8. Din păcate, IE 5, 5.5 și 6 nu acceptă modulul Evenimente de la DOM Level 2, chiar dacă Microsoft a fost implicat în definirea acestui modul și a avut suficient timp pentru a-l implementa în IE 6. După cum vom vedea în capitolul 19, procesarea evenimentelor joacă un rol cheie în JavaScript la nivel de client, iar lipsa de suport din partea IE pentru un model standard de gestionare a evenimentelor face dificilă dezvoltarea aplicațiilor web bogate la nivelul clientului. Deși IE 6 pretinde (prin metoda hasFeature()) că acceptă interfețele de bază DOM Level 1 și HTML, de fapt, acest suport nu este complet. Cea mai flagrantă problemă pe care probabil o veți întâlni este una mică, dar enervantă: IE nu acceptă constante de tip nod definite în interfața Node. Amintiți-vă că fiecare nod dintr-un document are o proprietate nodeType care specifică tipul nodului respectiv. Specificația DOM afirmă, de asemenea, că interfața Node definește constante care reprezintă fiecare dintre tipurile de noduri pe care le definește. De exemplu, constanta Node.ELEMENT_NODE reprezintă un nod Element. În IE (cel puțin până la versiunea 6 inclusiv) aceste constante pur și simplu nu există.

            Exemplele din acest capitol au fost modificate pentru a evita acest obstacol și conțin literali întregi în loc de constantele simbolice corespunzătoare.

            De exemplu:
            dacă (n.nodeType == 1 /*Node.ELEMENT_NODE*/)
            // Verificați dacă n este un obiect Element

            Un stil de programare bun necesită ca constantele să fie plasate în cod, mai degrabă decât literalele întregi codificate, iar cei care doresc să facă codul portabil pot include următorul cod în program pentru a defini constantele dacă acestea lipsesc:

            Dacă (!window.Node) (
            var Node = ( // Dacă nu există niciun obiect Node, definiți
            ELEMENT_NODE: 1, // acesta cu următoarele proprietăți și valori.
            ATTRIBUTE_NODE: 2, // Rețineți că acestea sunt numai tipuri de noduri
            TEXT_NODE: 3, // HTML. Pentru nodurile XML trebuie să definiți
            COMMENT_NODE: 8, // alte constante aici.
            DOCUMENT_NODE: 9,
            DOCUMENT_FRAGMENT_NODE: 11
            }
            }

            Interfețe DOM independente de limbă
            Deși standardul DOM a luat naștere din dorința de a avea un API comun pentru programarea HTML dinamic, DOM nu este de interes doar pentru programatorii web. De fapt, standardul este acum cel mai mult utilizat de programele de server Java și C++ pentru analizarea și manipularea documentelor XML. Datorită numeroaselor sale cazuri de utilizare, standardul DOM a fost definit ca fiind independent de limbă. Această carte acoperă doar legarea API-ului DOM la JavaScript, dar mai sunt câteva lucruri de reținut. În primul rând, rețineți că proprietățile obiectului din legăturile JavaScript corespund de obicei cu perechea metodei get/set în alte limbi. Prin urmare, atunci când un programator Java vă întreabă despre metoda getFirstChild() a interfeței Node, trebuie să înțelegeți că în JavaScript legarea API Node nu definește o metodă getFirst-Child(). În schimb, definește pur și simplu proprietatea firstChild, iar citirea acestei proprietăți în JavaScript este echivalentă cu apelarea metodei getFirstChild() în Java. O altă caracteristică importantă a legării API-ului DOM la JavaScript este că unele obiecte DOM se comportă ca matrice JavaScript. Dacă o interfață definește o metodă numită item(), obiectele care implementează acea interfață se comportă la fel ca și matrice de doar citire cu un index numeric. Să presupunem că, în urma citirii proprietății childNodes a unui nod, se obține un obiect NodeList. Obiectele Node individuale dintr-o listă pot fi obținute, în primul rând, prin trecerea numărului nodului dorit la metoda item() și, în al doilea rând, prin tratarea obiectului NodeList ca pe o matrice și accesarea acestuia prin index. Următorul cod ilustrează aceste două posibilități:

            Var n = document.documentElement; // Acesta este un obiect Node.
            var copii = n.childNodes; // Acesta este un obiect NodeList.
            var head = children.item(0); // Acesta este un singur mod
            // folosiți NodeList.
            var body = copii; // Dar există o cale mai ușoară!

            De asemenea, dacă un obiect DOM are o metodă namedItem(), transmiterea unui șir la acea metodă este la fel cu utilizarea șirului ca index de matrice. De exemplu, următoarele linii de cod reprezintă modalități echivalente de a accesa un element de formular:

            Var f = document.forms.namedItem("myform");
            var g = document.forms["myform"];
            var h = document.forms.myform;

            Standardul DOM poate fi utilizat într-o varietate de moduri, astfel încât dezvoltatorii standardului au definit cu atenție API-ul DOM într-un mod care nu limitează capacitatea altor dezvoltatori de a implementa API-ul. În special, standardul DOM definește interfețe în loc de clase. În programarea orientată pe obiecte, o clasă este un tip de date fix care trebuie implementat exact așa cum este definit. Pe de altă parte, o interfață este o colecție de metode și proprietăți care trebuie implementate împreună. Prin urmare, o implementare DOM poate defini orice clase pe care le consideră potrivite, dar acele clase trebuie să definească metode și proprietăți ale diferitelor interfețe DOM. Această arhitectură are câteva consecințe importante. În primul rând, este posibil ca numele claselor utilizate în implementare să nu corespundă direct cu numele interfeței utilizate în standardul DOM (și în această carte). În al doilea rând, o clasă poate implementa mai mult de o interfață. Luați în considerare, de exemplu, un obiect Document. Acest obiect este o instanță a unei clase definite de implementarea browserului web. Nu știm ce clasă este, dar știm că implementează interfața Document; adică toate metodele și proprietățile definite de interfața Document ne sunt disponibile prin obiectul Document. Deoarece browserele web funcționează cu documente HTML, știm, de asemenea, că obiectul Document implementează interfața
            HTMLDocument și că avem și acces la toate metodele și proprietățile definite de această interfață. În plus, dacă browserul web acceptă foi de stil CSS și implementează modulul CSS DOM, obiectul Document implementează și interfețele DocumentStyle și DocumentCSS DOM. Și dacă browserul web acceptă modulele Evenimente și Vizualizări, Document implementează și interfețele DocumentEvent și DocumentView.

            DOM-ul este împărțit în module independente, astfel încât definește mai multe interfețe minore suplimentare, cum ar fi DocumentStyle, DocumentEvent și DocumentView, fiecare dintre acestea definind doar una sau două metode. Astfel de interfețe nu sunt niciodată implementate independent de interfața Document de bază și din acest motiv nu le descriu separat. Dacă citiți descrierea interfeței Document în Referința W3C DOM, veți descoperi că aceasta listează și metodele și proprietățile diferitelor interfețe suplimentare. De asemenea, privind descrierea interfețelor suplimentare, veți găsi pur și simplu o referință încrucișată la interfața de bază cu care sunt asociate. Excepția de la această regulă este atunci când interfața suplimentară este complexă. De exemplu, interfața HTMLDocument este întotdeauna implementată de același obiect care implementează interfața Document, dar deoarece HTMLDocument
            adaugă o cantitate semnificativă de funcționalități noi, i-am dat propria pagină de manual.

            De asemenea, este important să înțelegeți că, deoarece standardul DOM definește interfețe și nu clase, nu definește nicio metodă de constructor. Dacă, de exemplu, doriți să creați un nou obiect Text de inserat într-un document, nu puteți scrie doar:

            Var t = text nou ("acesta este un nod text nou"); // Nu există un astfel de constructor!

            Standardul DOM nu poate defini constructori, dar definește mai multe metode utile din fabrică în interfața Document pentru crearea de obiecte. Prin urmare, pentru a crea un nou nod Text în document, trebuie să scrieți:

            Var t = document.createTextNode("acesta este un nou nod text");

            Metodele din fabrică definite în DOM au nume care încep cu cuvântul „crea”. Pe lângă metodele din fabrică definite de interfața Document, mai multe astfel de metode din fabrică sunt definite de interfața DOMImplementation și sunt accesibile prin document.implementation.

          Un arbore este una dintre cele mai frecvent utilizate structuri de date în dezvoltarea web. Fiecare dezvoltator web care a scris cod HTML și l-a încărcat în browser a creat un arbore numit Document Object Model (DOM).

          De exemplu, articolul pe care îl citiți în prezent este afișat în browser sub formă de arbore. Paragrafele sunt prezentate ca elemente

          ; elemente

          Imbricat într-un ; și este imbricat în element.

          Imbricarea datelor este ca un arbore genealogic. Elementul este părinte, este un copil al acestuia, iar elementul este un copil al elementului.

          În acest articol, folosim două metode diferite de traversare a arborelui: căutarea în adâncime (DFS) și căutarea în lățime (BFS). Ambele tipuri de traversare implică moduri diferite de interacțiune cu arborele și implică utilizarea structurilor de date pe care le-am acoperit în această serie de articole. DFS folosește o stivă, iar BFS folosește o coadă.

          Arborele (adâncimea prima căutare și lățimea prima căutare)

          În informatică, un arbore este o structură care definește date ierarhice cu noduri. Fiecare nod de arbore conține propriile sale date și pointeri către alte noduri.

          Să comparăm arborele cu structura unei organizații. Această structură are o poziție de nivel superior (nodul rădăcină), cum ar fi CEO. Sub această poziție se află și alte funcții, cum ar fi vicepreședinte (VP).

          Pentru a reprezenta liniile lor de raportare, folosim săgeți care indică de la CEO la Vicepreședinte. Pozițiile precum CEO sunt noduri; Legăturile pe care le-am subliniat de la CEO la VP sunt indicii. Pentru a crea alte conexiuni în structura noastră organizațională, repetăm ​​acest proces - adăugând pointeri către alte noduri.

          Să ne uităm la DOM. DOM conține un element, care este elementul de nivel superior (nodul rădăcină). Acest nod indică elementele și . Acest proces se repetă pentru toate nodurile din DOM.

          Unul dintre avantajele acestui design este capacitatea de a cuibări noduri: element