Arborele documentelor(arbore de documente) este o schemă de construire a unui document HTML care arată relațiile dintre diferitele elemente ale unei pagini: ordinea și imbricarea elementelor. Această diagramă vă ajută să navigați în această mizerie aparent haotică de etichete HTML.

În calitate de dezvoltator web, arborele documentelor ajută la scrierea regulilor CSS și a scripturilor Javascript.

Nota

Nu confundați arborele documentului cu Modelul obiect document (DOM). DOM este un concept mai complex (se va scrie ceva mai târziu).

Pentru a nu intra în explicații lungi și plictisitoare de ce arborele documentelor se numește arbore, să ne uităm la un exemplu - să luăm un cod HTML simplu:

Așa văd nativii neluminați codul HTML, care din greșeală au dat clic pe vizualiza codul paginii. Dar ochiul instruit al unui dezvoltator web îl va dezasambla, va vedea toate nivelurile de imbricare și interconectare. Va construi o structură ierarhică clară din haos sub forma unui copac (deoarece schema este similară cu conturul unui copac):

Legaturi de familie

Există anumite relații între elementele arborelui documentului. Să le luăm în considerare.

Strămoși și descendenți

Din reprezentarea 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ș) în raport cu tot ce s-a investit în el. Cuibărite la rândul lor sunt ale lui urmasi(descendent).

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

Fiecare strămoș poate avea un număr nelimitat de descendenți. Fiecare copil 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

Mamă(părinte) este strămoșul imediat (strămoșul de prim nivel) al elementului. În schimb, copilul imediat (copilul de primul nivel) este numit element copil(copil).

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

Elementul părinte este de asemenea numit strămoș direct, iar elementul copil este descendent direct. Este ceva de genul numelor 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

Elemente adiacente(adiacent) sunt elemente surori care sunt situate "alaturi".

Sora anterioară și sora următoare

Totul ar trebui să fie clar din numele termenilor înșiși. Sora anterioară (fratele precedent) - elementul soră anterior din cod. În exemplul nostru filiala pentru

Asta va

Pentru

—

, si pentru

nu va exista nici o fărătate anterioară.

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

—

Pentru

—

, pentru
- Nu.

Anterior și următorul

Elementul anterior (precedent) este același element anterior prin cod, doar fără restricțiile relației de soră. Pentru filiala noastră: pt

Asta va

Pentru

—

, pentru

—

.

În mod similar, următorul element (precedent) nu are constrângeri de relație de soră: pentru

—

Pentru

Primul copil și ultimul

Primul copil (primul copil) este primul copil al părintelui din arborele documentelor, iar ultimul (ultimul copil) este ultimul.



Element rădăcină

Elementul rădăcină (rădăcină) este strămoșul tuturor strămoșilor, este „rădăcina” arborelui nostru de documente, este singurul element care nu are părinte, acesta este .

API-ul DOM nu este deosebit de complex, dar înainte de a trece în discuția 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 care reprezintă elemente sau etichete, cum ar fi ș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
document HTML simplu.

document exemplu

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 aflat direct deasupra nodului dat este numit părintele nodului dat. Nodurile care se află 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 pe oricare
numărul de niveluri de sub alt nod sunt copiii acestuia. Părinte, bunicul și orice alte noduri de deasupra acestui nod sunt strămoșii săi.

Noduri
Structura arborelui DOM este un arbore de obiecte Node de diferite tipuri. Interfața Node1 definește proprietăți și metode pentru parcurgerea și manipularea arborelui. Proprietatea childNodes a Nodului returnează o listă de noduri copil, iar 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 și să eliminați noduri din arborele documentului.

Tipuri de noduri
Tipurile de noduri din arborele de documente sunt reprezentate de subinterfețe speciale ale interfeței Node. Fiecare obiect Node are o proprietate nodeType care specifică tipul nodului dat. Dacă proprietatea nodeType a unui nod este, de exemplu, constanta Node.ELEMENT_NODE, atunci obiectul Node este, de asemenea, un obiect Element și toate metodele și proprietățile definite de interfața Element pot fi utilizate 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ă fie explicit, fie implicit în document. (Pe lângă elementul rădăcină, un nod Document poate avea și alte elemente copil, cum ar fi obiecte Comentariu.)

Cea mai mare parte a arborelui DOM constă din obiecte Element reprezentând etichete precum ș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 (cum ar fi atributele src și width ale unei etichete ) poate fi citit, setat și eliminat folosind metodele getAttribute(), set-Attribute() și removeAttribute() ale interfeței Element.

Un alt mod mai puțin convenabil de a lucra cu atribute este metoda getAttribute-Node(), care returnează un obiect Attr reprezentând atributul și valoarea acestuia. (Unul dintre motivele pentru care alegeți această tehnologie mai puțin convenabilă 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 este acceptat de valoarea implicită.) Rețineți, totuși, că Obiectele Attr nu sunt prezente în matricea childNodes ale elementului și nu fac parte direct din arborele documentului, precum 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 altă matrice de atribute incompatibile, ceea ce face imposibilă utilizarea acestei matrice într-un mod 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ă — Node, Element, Document și altele — este relativ universal și se aplică ambelor tipuri de documente. Standardul DOM include și interfețe specifice documentelor HTML. HTMLDocument este subinterfața specifică HTML a interfeței Document, iar HTMLElement este subinterfața specifică HTML a interfeței Element. În plus, DOM definește interfețe pentru multe elemente HTML legate de etichete specifice. 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 pe care browserele le acceptau î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 etichetele HTML.

Etichetele HTML nu au alte atribute decât cele șase enumerate și, prin urmare, sunt pe deplin reprezentabile de interfața HTMLElement.

Pentru toate celelalte etichete HTML din partea DOM a specificației
la HTML, sunt definite interfețe specifice. 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, etichetați

corespunde interfeței HTMLU ListElement, 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.

Este sigur să presupunem 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 HTML DOM 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(), în timp ce interfața HTMLFormElement definește metodele submit() și reset() și proprietatea length. Astfel de metode și proprietăți au fost prezente în mod obișnuit î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 „practice acceptate” ale acestor interfețe pot fi găsite în partea a IV-a a Referinței JavaScript pe partea clientului, deși aceste informații sunt adesea date sub numele standard pre-DOM, cum ar fi HTMLFormElement și HTMLInputElement în Referință 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țile specifice HTML ale standardului DOM, trebuie să aveți în vedere câteva convenții simple de denumire. Numele proprietăților specifice interfețelor 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. Deci, atributul maxlength al etichetei este tradus în proprietatea maxLength a interfeței HTMLInputElement.

Când un nume de atribut HTML intră în conflict cu cuvânt cheie JavaScript, pentru a rezolva conflictul, prefixul „html” este adăugat la nume. 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 pe orice element HTML), care 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 mult îmbunătățită prin definirea API-urilor standard pentru lucrul cu evenimentele documentului și Foile 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ă DOM Nivelul 3. De asemenea, este posibil să vedeți ocazional menționat nivelul DOM 0. Acest termen nu se referă la niciun standard formal, ci servește ca referință informală la facilitățile comune ale modelului obiect. document implementat în Netscape și Internet Explorer înainte de standardizarea de către W3C. În DOM Nivelul 2, standardul a devenit modular. Modulul de bază, care definește structura arborescentă de bază a documentului 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 browserului web trebuie să accepte modulul HTML, deoarece documentele web sunt scrise în HTML. Browserele care acceptă foi de stil CSS acceptă, de obicei, foile de stil și modulele CSS, deoarece stilurile CSS joacă un rol cheie în programarea HTML dinamic. În mod similar, deoarece majoritatea programelor JavaScript interesante necesită gestionarea evenimentelor, puteți presupune că browserele web acceptă modulul Evenimente al specificației DOM.

Din păcate, modulul Evenimente a fost definit doar recent de specificația DOM Level 2 și nu este 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 a realiza acest lucru, iar compatibilitatea completă cu DOM Nivelul 2 este scopul 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 urâtă) 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. IE pentru Macintosh are suport DOM semnificativ mai bun 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 suportul standardelor se schimbă prea repede pentru ca această carte să încerce chiar 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 compatibilă, proprietatea de implementare a obiectului Document se referă la un obiect DOMImplementation care definește o metodă numită hasFeature(). Folosind această metodă (dacă există), puteți obține informații despre suportul unui anumit modul (sau caracteristici) standardului DOM. De exemplu, pentru a determina dacă implementarea DOM a unui browser web acceptă interfețele de bază DOM de nivel 1 pentru lucrul cu documente HTML, puteți utiliza următorul cod:

Dacă(document.implementare &&
document.implementation.hasFeature &&
document.implementation.hasFeature("html", "1.0")) (
// Browserul declară suport pentru interfețele de bază de Nivel 1
// și interfețe HTML
}

Metoda hasFeature() are două argumente: primul este numele caracteristicii 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, la rândul său, implică suport pentru modulele Evenimente, Vizualizări și Core. În Internet Explorer 6 (sub 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 tratate î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 Descriere completa toate modulele.

Metoda hasFeature() nu este complet de încredere. După cum sa menționat mai sus, IE 6 raportează compatibilitatea de nivel 1 cu caracteristicile HTML, chiar dacă există unele probleme cu această 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 este compatibil și ce nu. Dar volumul acestor informații este prea mare și prea variabil pentru a fi inclus într-o publicație tipărită.

Cei activi în dezvoltarea web, fără îndoială, cunosc deja sau vor învăța în curând multe detalii de compatibilitate specifice browserului. În plus, există resurse pe Internet pe care le puteți găsi utile. Cel mai important, W3C (în colaborare cu Institutul Național de Standarde și Tehnologie din SUA) lucrează la un set de instrumente open source pentru testarea implementărilor DOM. Pe
În momentul scrierii acestui articol, dezvoltarea suitei de teste abia a început, dar ar trebui să fie un instrument neprețuit pentru reglarea fină a compatibilității implementării DOM. Detalii pot fi găsite la http://www.w3c.org/DOM/Test/.

Organizația Mozilla menține mai multe suite de testare pentru diferite standarde, inclusiv cele pentru DOM Level 1 (disponibile 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 între versiunile timpurii Mozilla ș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 acesta pagina principala dedicat JavaScript (http://www.xs4all.nl/~ppk/js/).

Compatibilitate DOM în Internet Explorer
Deoarece IE este cel mai utilizat browser web, câteva note speciale despre compatibilitatea sa cu specificațiile DOM sunt de dorit aici. IE 5 și versiunile ulterioare acceptă funcțiile de bază și HTML de nivel 1 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 evenimentele joacă un rol esențial în JavaScript la nivelul clientului, iar lipsa suportului IE pentru un model standard de gestionare a evenimentelor face dificilă dezvoltarea aplicațiilor web bogate la nivelul clientului. În timp ce IE 6 pretinde (prin metoda hasFeature()) că acceptă interfețele de bază DOM Level 1 și HTML, acest suport nu este de fapt complet. Cea mai flagrantă problemă cu care este posibil să întâmpinați este una mică, dar enervantă: IE nu acceptă constantele tip nod definite în Node. Amintiți-vă că fiecare nod dintr-un document are o proprietate nodeType care specifică tipul acelui nod. 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 ocoli 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 în cod să fie plasate constante, nu literale întregi codificate greu, 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 doar 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 s-a născut din dorința de a avea un API comun pentru programarea HTML dinamic, DOM nu este de interes doar pentru programatorii web. De fapt, acest standard este acum cel mai mult utilizat de programele Java și C++ de pe partea de server pentru analizarea și manipularea documentelor XML. Datorită prezenței multor 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 obiectelor din legăturile JavaScript corespund de obicei perechilor get/set în legăturile altor 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ă citirea proprietății childNodes a unui nod are ca rezultat un obiect NodeList. Obiectele Node individuale din listă pot fi obținute mai întâi prin trecerea numărului nodului dorit la metoda item(), iar î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.
varhead = copii.item(0); // Acesta este un singur mod
// folosiți NodeList.
varbody = copii; // Dar există o cale mai ușoară!

În mod similar, dacă obiectul DOM are o metodă namedItem(), trecerea unui șir la acea metodă este la fel cu utilizarea șirului ca index de matrice. De exemplu, următoarele linii de cod sunt modalități echivalente de a accesa un element de formular:

varf = document.forms.namedItem("myform");
var g = document.forms["myform"];
varh = 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 să nu restricționeze 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 implicații importante. În primul rând, este posibil ca numele claselor utilizate într-o 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, obiectul 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ă toate metodele și proprietățile definite de această interfață sunt, de asemenea, disponibile pentru noi. Î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 secundare 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ă examinaț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. În mod similar, uitând la descrierile interfețelor suplimentare, veți găsi pur și simplu o referință încrucișată la interfața de bază cu care sunt asociate. Excepțiile de la această regulă sunt atunci când interfața opțională 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 dedicat o pagină de manual separată.

De asemenea, este important să înțelegeți că, deoarece standardul DOM definește interfețele, nu clasele, nu definește nicio metodă de constructor. Dacă, de exemplu, doriți să creați obiect nou Text de inserat în 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 câteva metode utile din fabrică în interfața Document pentru crearea de obiecte. Prin urmare, pentru a crea un nou nod Text într-un document, ați scrie:

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, câteva dintre aceste metode sunt definite de interfața DOMImplementation și sunt disponibile prin document.implementation.

— Junior). Toate elementele arborelui sunt urmasi rădăcină, iar aceea este a lor strămoş. În același timp, toate elementele și textele care formează conținutul lor sunt noduri arborele documentelor.

Fiecare element din acest arbore corespunde unui element HTML și, prin urmare, are o etichetă(e), conținut și un set de atribute. Pentru a trece la modelul de obiect al documentului, singurul pas rămas este să numiți toate elementele arborelui ca obiecte și să faceți atributele acestora lizibile și editabile din scripturi și applet-uri. Ca rezultat, arborele de elemente al unui document HTML devine gestionat dinamic; mai mult, acum putem adăuga cu ușurință noi proprietăți fiecărui element, pe lângă atributele standard HTML.

Această abordare a stat la baza modelului HTML dinamic al browserelor Microsoft și apoi a fost adoptată ca bază pentru standardele W3C, numite model obiect document(Document Object Model sau DOM). În același timp, W3C a extins conceptul de DOM la orice document XML, considerând DOM-ul HTML ca un caz special specializat, cu caracteristici suplimentare. Astfel, DOM este un model de documente HTML și XML, independent de platformă și limbaj de programare, care definește:

• interfețe și obiecte care sunt utilizate pentru a reprezenta și manipula un document;
• semantica acestor interfețe și obiecte, inclusiv atributele și răspunsurile la evenimente;
• relaţiile dintre aceste interfeţe şi obiecte.

Până în prezent, W3C a standardizat nivelurile DOM unu și doi (DOM 1 și DOM 2); DOM 3 se află în stadiul de proiect de lucru. Aceste abrevieri reprezintă, respectiv, următoarele:

• DOM 1 descrie reprezentarea de bază a documentelor XML și HTML ca arbori de obiecte;
• DOM 2 extinde interfețele de bază DOM 1 și adaugă suport pentru evenimente și stiluri;
• DOM 3 descrie încărcarea și analizarea documentelor, precum și afișarea și formatarea acestora.

Având în vedere starea actuală a lucrurilor, ne uităm doar la DOM 2 (și la DOM 1 pe care îl conține) aici. DOM 2 constă din următoarele grupuri de interfețe înrudite:

• Interfețe de bază de bază care definesc reprezentarea oricărui document XML sub formă de arbore;
• Vizualizați interfețele care descriu posibilele afișări ale documentelor;
• Interfețe de evenimente care definesc ordinea în care evenimentele sunt generate și procesate;
• Interfețe de stil care determină aplicarea foilor de stil la documente;
• Interfețe Traversal & Range care definesc traversarea arborelui documentului și manipularea zonelor de conținut ale acestuia;
• Interfețe HTML care definesc reprezentarea unui document HTML ca arbore.

Să începem prin a defini interfețele de bază care stau la baza tuturor specificațiilor ulterioare.

4.2.2. Noțiuni de bază

DOM 2 Core reprezintă documentele XML ca arbori, care sunt noduri, care la rândul lor sunt și obiecte și implementează interfețe mai specializate. Unele tipuri de noduri pot avea copii, adică ei înșiși sunt subcopii, altele sunt frunze, adică nu au copii. Următorul tabel rezumă toate tipurile posibile de noduri de document abstract; pentru fiecare tip de nod sunt listate nodurile care pot fi copii ale acestuia. Pentru conceptele corespunzătoare nodurilor listate, consultați descrierea structurii documentului XML.

Tabelul 4.1. Structura arborescentă a documentului

Interfață	Descriere	Copii
	Document	Element (nu mai mult de unul), ProcessingInstruction , Comment , DocumentType (nu mai mult de unul)
	Fragment de document	Element , ProcessingInstruction , Comment , Text , CDATASection , EntityReference
Tipul documentului	Tipul documentului	nu are copii
EntityReference	Link secțiune	Element , ProcessingInstruction , Comment , Text , CDATASection , EntityReference
element	Element	Element , ProcessingInstruction , Comment , Text , CDATASection , EntityReference
Attr	Atribut	Text , EntityReference
Instrucțiuni de procesare	directivă XML	nu are copii
cometariu	cometariu	nu are copii
Text	Text	nu are copii
Secțiunea CDATA	secțiunea CDATA	nu are copii
entitate	Capitol	Element , ProcessingInstruction , Comment , Text , CDATASection , EntityReference
notaţie	Notaţie	nu are copii

În plus, DOM 2 Core conține specificația interfețelor NodeList (liste ordonate de noduri accesibile după numărul de listă) și NamedNodeMap (liste neordonate de noduri accesibile după numele lor). Aceste obiecte sunt în viaţă, adică orice modificare a documentului implică automat o modificare a tuturor listelor asociate acestuia.

Trebuie subliniat faptul că DOM 2 Core conține două seturi de interfețe, fiecare dintre acestea oferind acces deplin la toate elementele documentului. Primul set reprezintă o abordare orientată pe obiecte cu următoarea ierarhie de moștenire: documentați elementele constitutive ale acestora atributele și conținutul textului. Cu această luare în considerare a arborelui documentelor, vorbim despre ierarhii de obiecte. A doua abordare se bazează pe principiul „totul este noduri (Noduri)”. Aici toate componentele documentului sunt considerate noduri egale ale arborelui său și despre care putem vorbi doar ierarhiile nodurilor. Astfel, DOM 2 este în mod inerent redundant, dar ne oferă posibilitatea, în funcție de sarcină, să luăm în considerare documentul într-un fel sau altul.

Toate interfețele DOM 2 Core sunt împărțite în de bază (fundamentale) și suplimentare (extinse). Principalele interfețe sunt , , , , Node , NodeList , NamedNodeMap , CharacterData , Attr , Element , Text și Comment . Aceste interfețe trebuie să fie acceptate de toate implementările DOM, atât pentru documentele XML, cât și pentru HTML. Interfețele suplimentare vizează documente XML, așa că este posibil ca implementările DOM pentru HTML să nu le accepte. Acestea includ CDATASection , DocumentType , Notation , Entity , EntityReference și ProcessingInstruction .

Pentru independența limbii și a platformei, DOM definește următoarele tipuri:

DOMstring Un șir de text format din caractere Unicode în format UTF-16. În JavaScript și Java, este implementat de tipul String. DOMTimeStamp Data și ora într-un format specific limbii. De exemplu, în JavaScript ar fi un obiect Data, iar în Java un întreg de tip lung care conține numărul de milisecunde.

Mai jos este scurta descriere a tuturor interfețelor DOM, indicând nivelul modelului (DOM 1 sau DOM 2) în care este definită această sau acea proprietate a interfeței. Specificațiile W3C sunt scrise în IDL independent de platformă. Le aducem în conformitate cu sintaxa JavaScript, care este principalul limbaj de scripting astăzi.

Împreună cu descrierea standardului, oferim o scurtă descriere a implementării acestuia în modelele de obiecte Microsoft și Gecko. Rețineți că implementările Microsoft pentru XML și HTML sunt complet independente (sunt implementate de componentele software XMLDOM și, respectiv, MSHTML), în timp ce în Gecko modelul obiect este același pentru documentele HTML și XML. Accentul următoarei discuții este pe DOM pentru HTML; XML DOM va fi discutat în detaliu în Partea VIII.

4.2.3. Excepții: interfața DOMException

Obiectul DOMException este prototipul pentru toate excepțiile care pot apărea în timpul procesării documentului. Are o singură proprietate de cod de tip număr, care conține numărul excepției conform următorului tabel:

Tabelul 4.2. Excepții DOM standard

Nume	Sens	Descriere	Model
INDEX_SIZE_ERR	1	Index în afara intervalului.	DOM 1
DOMSTRING_SIZE_ERR	2	Textul specificat nu poate fi transmis la tip .	DOM 1
HIERARCHY_REQUEST_ERR	3	S-a încercat să se insereze un nod în locul greșit din arbore.	DOM 1
WRONG_DOCUMENT_ERR	4	Tip de document nevalid.	DOM 1
INVALID_CHARACTER_ERR	5	A fost întâlnit un caracter nevalid.	DOM 1
NO_DATA_ALLOWED_ERR	6	Nodul nu conține date.	DOM 1
NO_MODIFICATION_ALLOWED_ERR	7	A fost făcută o încercare de a modifica în mod nevalid un obiect.	DOM 1
NOT_FOUND_ERR	8	Referirea la un nod inexistent.	DOM 1
NOT_SUPPORTED_ERR	9	Parametrul sau operația nu a fost implementată.	DOM 1
INUSE_ATTRIBUTE_ERR	10	S-a încercat să se adauge un atribut care există deja.	DOM 1
INVALID_STATE_ERR	11	Referirea la un obiect inexistent.	DOM 1
SYNTAX_ERR	12	Eroare de sintaxă.	DOM 2
INVALID_MODIFICATION_ERR	13	S-a încercat să se schimbe tipul unui obiect.	DOM 2
NAMESPACE_ERR	14	S-a încercat crearea sau modificarea unui obiect care nu se potrivește cu spațiul de nume XML.	DOM 2
INVALID_ACCESS_ERR	15	Parametrul sau operația nu este acceptată de obiect.	DOM 2

A sustine: Implementare non-standard. Unele coduri de eroare sunt acceptate.

4.2.4. Descrierea implementării: interfața DOMImplementation

A sustine: Numai pentru documente XML (XMLDOMImplementation). Conform DOM 1.

Interfața DOMImplementation conține metode care sunt independente de modelul obiect al documentului specific. Este disponibil printr-o proprietate a obiectului.

metoda createCSSStyleSheet

Sintaxă : un obiect.createCSSStyleSheet(titlu, media) Argumente: titlu, expresii de tip media Rezultat: nou obiect CSSStyleSheet Excepții: SYNTAX_ERR A sustine

Metodă createCSSSstyleSheet creează un nou obiect CSSStyleSheet și returnează un pointer către acesta. Această metodă ar trebui să fie acceptată numai de implementările DOM care acceptă CSS. Obiectul este creat în afara contextului documentului; DOM 2 nu vă permite să includeți o foaie de stil nou creată într-un document. Argumentul titlu specifică titlul foii de stil, iar media este o listă de dispozitive de afișare separate prin virgulă.

metoda createDocument

Sintaxă : un obiect.createDocument(namespaceURI, qualifiedName, doctype) Argumente: namespaceURI, qualifiedName doctype expresie DocumentType expresie Rezultat: obiect nou Excepții: INVALID_CHARACTER_ERR, NAMESPACE_ERR, WRONG_DOCUMENT_ERR A sustine: Nu sunt acceptate. Nu sunt acceptate.

Metodă createDocument creează un nou obiect și returnează un pointer către acesta. Este destinat creării de documente XML și este posibil să nu fie acceptat pentru documente HTML. Argumentul namespaceURI specifică URI-ul namespace al elementului rădăcină al documentului, qualifiedName este numele său calificat și doctype este tipul documentului care trebuie creat (poate fi nul).

metoda createDocumentType

Sintaxă : un obiect.createDocumentType(qualifiedName, publicId, systemId) Argumente: expresii de tip qualifiedName, publicId, systemId Rezultat: nou nod DocumentType Excepții A sustine: Nu sunt acceptate. Nu sunt acceptate.

Metodă createDocumentType creează un nod gol de tip DocumentType și returnează un pointer către acesta. Este destinat documentelor XML și este posibil să nu fie acceptat pentru documente HTML. Argumentul qualifiedName specifică numele calificat al tipului de document care urmează să fie creat, publicId este identificatorul public al secțiunii externe și systemId este identificatorul de sistem al secțiunii externe.

metoda hasFeature

Sintaxă : un obiect.hasFeature(funcție, versiune) Argumente: caracteristică, expresii tip versiune Rezultat: boolean Excepții: Nu A sustine

Metodă are Caracteristică se intoarce Adevărat dacă implementarea DOM acceptă proprietatea specificată și fals in caz contrar. Numele proprietății (în orice caz) este dat de argumentul caracteristică; trebuie să se conformeze convențiilor de denumire XML. Argumentul versiune specifică numele versiunii proprietății care este verificată. Dacă nu este setat, atunci revine Adevărat dacă cel puțin o versiune a acestei proprietăți este acceptată.

În Gecko, valorile caracteristicilor pot fi șirurile „XML” și „HTML”, iar versiunea pot fi șirurile „1.0” și „2.0”. Exemplu:

Alert(document.implementation.hasFeature("HTML", "1.0")); alert(document.implementation.hasFeature("HTML", "2.0")); alert(document.implementation.hasFeature("HTML", "3.0"));

Primele două instrucțiuni de alertă vor tipări șirul true , iar a treia false .

În Microsoft XMLDOM, valorile caracteristicilor pot fi șirurile „XML”, „DOM” și „MS-DOM”, iar versiunea poate fi șirul „1.0”. Exemplu:

Var objDoc = new ActiveXObject ("Microsoft.XMLDOM"); alert(objDoc.implementation.hasFeature("XML", "1.0")); alert(objDoc.implementation.hasFeature("XML", "2.0"));

Prima declarație de alertă va tipări șirul true , iar a doua false .

4.2.5. Document Fragment: Interfață DocumentFragment

A sustine: Numai pentru documente XML (XMLDOMDocumentFragment). Conform cu DOM 1.

Interfața DocumentFragment este un descendent al interfeței Node și moștenește toate proprietățile și metodele acesteia. După cum sugerează și numele, este destinat operațiunilor cu fragmente de documente(recuperarea unei părți din arborele documentului, crearea unui nou fragment de document, inserarea unui fragment ca copil al unui nod etc.). Rețineți că atunci când inserați un obiect de tip DocumentFragment într-un Nod care poate avea copii, toți copiii acelui obiect sunt inserați, dar nu și obiectul în sine. Consultați descrierea interfeței Node pentru exemple.

4.2.6. Document: Interfață de document

A sustine: Suportat pentru documente XML (XMLDOMDocument); pentru documentele HTML, este parțial acceptat. DOM 1 integral, DOM 2 parțial.

Interfața Document corespunde unui document XML sau HTML. Este baza pentru accesarea conținutului documentului și pentru crearea componentelor acestuia.

Metode de interfață pentru documente

Proprietate	Model	Descriere
	DOM 1	Creează un atribut.
	DOM 2	Creează un atribut dat un spațiu de nume.
	DOM 1	Creează o secțiune CDATA.
	DOM 1	Creează un comentariu.
	DOM 1	Creează un nou fragment de document.
	DOM 1	Creează un nou element.
	DOM 2	Creează un element cu un spațiu de nume dat.
	DOM 1	Creează un link către o secțiune.
	DOM 2	Creează un nou obiect Eveniment.
	DOM 1	Creează o directivă.
	DOM 1	Creează un nou nod de text.
	DOM 2	Returnează elementul cu id-ul dat.
	DOM 1	Returnează o colecție de toate elementele care au eticheta dată.
	DOM 2	Returnează o colecție a tuturor elementelor care au eticheta dată, dat fiind spațiul de nume.
	DOM 2	Importă un nod dintr-un alt document.

proprietatea doctype

Sintaxă : document.doctype schimbătoare: Nu A sustine

Proprietate doctype returnează tipul documentului dat (de tip DocumentType). Pentru documentele HTML și pentru documentele XML care nu au o declarație de tip de document, returnează nul.

proprietatea documentElement

Sintaxă : document.documentElement schimbătoare: Nu A sustine: Conform standardului. Conform standardului.

Proprietate documentElement returnează elementul rădăcină al documentului dat (de tip Element). Pentru documentele HTML, elementul este returnat HTML. Exemplu: operator

Alert(document.documentElement.tagName);

va afișa un șir HTML.

proprietatea de implementare

Sintaxă : document.implementare schimbătoare: Nu A sustine: Numai pentru documente XML. Conform cu DOM 1.

Proprietate implementare returnează un obiect de tip care descrie implementarea DOM dată.

proprietatea styleSheets

Sintaxă : document.Foaie de stil schimbătoare: Nu A sustine: Numai pentru documente HTML. Conform standardului.

Proprietate foi de stil returnează un obiect de tip StyleSheetList corespunzător unei liste de foi de stil externe și interne ale documentului. Această proprietate este acceptată numai de implementările DOM care acceptă foi de stil dinamice.

metoda createAttribute

Sintaxă : document.createAttribute(nume) Argumente: expresie tip nume Rezultat: nou obiect Attr Excepții: INVALID_CHARACTER_ERR A sustine: Numai pentru documente XML. Conform standardului.

Metodă createAttribute creează un nou obiect de tip Attr și returnează un pointer către acesta. Argumentul nume specifică numele atributului de creat. Noul obiect are atributul nodeName setat la nume, iar atributele localName, prefix și namespaceURI sunt egale nul. Ulterior, atributul creat poate fi atribuit oricărui element folosind metoda Element.setAttributeNode.

Un exemplu de creare a unui atribut pentru un element HTML:

Var myDiv = document.getElementById("idDiv"); var attr = document.createAttribute("temp"); attr.value = "(!LANG:temporar"; myDiv.setAttributeNode(attr); alert(myDiv.getAttribute("temp"));!}

Declarația de alertă va scoate șirul temporar.

Un exemplu de creare a unui atribut în Microsoft XMLDOM:

Var xmlDoc = new ActiveXObject ("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.load("c:\Documentele mele\books.xml"); var root = xmlDoc.documentElement; var newAttr = xmlDoc.createAttribute("temp"); newAttr.value = "(!LANG:temporar"; root.setAttributeNode(attr); alert(root.getAttribute("temp"));!}

Aici, declarația de alertă va tipări și șirul temporar .

metoda createAttributeNS

Sintaxă : document.createAttributeNS(namespaceURI, qualifiedName) Argumente: namespaceURI, expresii de tip calificatName Rezultat: nou obiect Attr Excepții: INVALID_CHARACTER_ERR, NAMESPACE_ERR A sustine: Nu sunt acceptate. Nu sunt acceptate.

Metodă createAttributeNS creează un nou obiect de tip Attr și returnează un pointer către acesta. Este destinat documentelor XML și este posibil să nu fie acceptat pentru documente HTML. Argumentul namespaceURI specifică URI-ul spațiului de nume, iar qualifiedName este numele calificat al atributului generat în acel spațiu de nume. Obiectul creat de tip Attr are următoarele atribute:

Ulterior, atributul creat poate fi atribuit oricărui element folosind metoda Element.setAttributeNode.

metoda createCDATASection

Sintaxă : document.createCDATASection(date) Argumente: expresie tip de date Rezultat: nou obiect CDATASection Excepții: NOT_SUPPORTED_ERR A sustine: Conform standardului. Conform standardului.

Metodă createCDATASection creează un nou obiect de tip CDATASection și returnează un pointer către acesta. Este destinat doar documentelor XML; încercarea de a-l apela în DOM HTML aruncă o excepție NOT_SUPPORTED_ERR. Argumentul de date specifică conținutul generat. Un exemplu de creare a unei secțiuni CDATA în Microsoft XMLDOM:

Var xmlDoc = new ActiveXObject ("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.load("c:\Documentele mele\books.xml"); var root = xmlDoc.documentElement; var newSection = xmlDoc.createCDATASection("Bună lume!"); root.appendChild(newSection);

metoda createComment

Sintaxă : document.createComment(date) Argumente: expresie tip de date Rezultat: obiect Comentariu nou Excepții: Nu A sustine: Numai pentru documente XML. Conform standardului.

Metodă createComment creează un nou obiect de tip Comentariu și returnează un pointer către acesta. Argumentul de date specifică conținutul comentariului care urmează să fie creat. Un exemplu de creare a unui comentariu în Gecko:

Var root = document.documentElement.firstChild; var comm = document.createComment("Acesta este un comentariu."); root.appendChild(com);

metoda createDocumentFragment

Sintaxă : document.createDocumentFragment() Rezultat: obiect nou Excepții: Nu A sustine: Numai pentru documente XML. Conform standardului.

Metodă createDocumentFragment creează un nou obiect gol de tip și returnează un pointer către acesta. Un exemplu de creare a unui fragment de document în Gecko:

Var elem = document.documentElement.firstChild; varo = document.createDocumentFragment(); elem.appendChild(o);

metoda createElement

Sintaxă : document.createElement(tagName) Argumente: expresie de tip tagName Rezultat: nou obiect Element Excepții: INVALID_CHARACTER_ERR A sustine: Conform standardului (vezi nota 2). Conform standardului.

Metodă createElement creează un nou obiect de tip Element și returnează un pointer către acesta. Argumentul tagName specifică eticheta elementului care urmează să fie creat. Noul obiect are atributul nodeName setat la tagName , iar atributele localName , prefixul și namespaceURI sunt egale nul. Dacă obiectul are atribute cu valori implicite, atunci nodurile Attr corespunzătoare sunt create automat și atașate elementului.

Note:

1. Pentru XML, numele etichetelor de elemente sunt sensibile la majuscule. Pentru HTML, acestea pot fi specificate în orice caz, dar sunt convertite în majuscule atunci când elementul este creat.
2. Încercarea de a crea un element în Internet Explorer CADRU sau IFRAME duce fie la o eroare fatală a browserului, fie, cel puțin, la distrugerea completă a arborelui obiect document.

Tipul nodului	Comportament
ATTRIBUTE_NODE	Atributul ownerElement este nul, specificat este Adevărat. Toți descendenții nodului original sunt copiați recursiv în noul nod Attr, indiferent de valoarea deep .
DOCUMENT_FRAGMENT_NODE	Dacă adânc este Adevărat, atunci fragmentul specificat al documentului este importat; în caz contrar, se creează un nod gol.
DOCUMENT_NODE , DOCUMENT_TYPE_NODE	Nu poate fi importat.
ELEMENT_NODE	Toate atributele nodului sursă sunt copiate în noul nod Element, cu excepția celor setate implicit în documentul sursă. Apoi, sunt create atributele implicite acceptate în acest document pentru elementele cu acest nume. Dacă adânc este Adevărat, apoi întregul subarboresc al elementului original este importat.
ENTITY_NODE	Entitate DocumentType Noduri
ENTITY_REFERENCE_NODE	Numai nodul EntityReference în sine este copiat, indiferent de valoarea deep . Dacă documentul nostru are o definiție de secțiune cu numele dat, atunci este introdus într-un nou nod.
NOTATION_NODE	Nodurile de notație pot fi importate, dar în DOM 2 obiectul DocumentType este doar pentru citire, așa că importarea unor astfel de noduri nu are sens.
PROCESSING_INSTRUCTION_NODE	Sunt copiate valorile țintei și atributele de date ale nodului sursă.
TEXT_NODE, CDATA_SECTION_NODE, COMMENT_NODE	Sunt copiate valorile datelor și atributelor de lungime ale nodului sursă.

Un arbore este una dintre cele mai frecvent utilizate structuri de date în dezvoltarea web. Fiecare dezvoltator web care scrie HTML și îl încarcă într-un browser creează un arbore numit Document Object Model (DOM).

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

; elemente

Imbricat într-un element ; A imbricat în element .

Încorporarea datelor este ca un arbore genealogic. Element este părintele este un copil al lui, iar elementul<р>este un copil al elementului .

În acest articol, folosim două metode diferite de traversare a arborilor: căutarea în adâncime ( DFS) și căutare pe lățimea întâi ( 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 utilizează o stivă, în timp ce BFS utilizează o coadă.

Arborele (DFS și Breadth First Search)

Î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 un titlu de nivel superior (nodul rădăcină), cum ar fi un CEO. Sub această poziție se află și alte funcții, cum ar fi vicepreședinte ( VP).

Pentru a reprezenta lanțul lor de comandă, folosim săgeți care indică de la CEO la VP. Pozițiile precum CEO sunt noduri; legăturile pe care le-am marcat de la CEO la VP sunt indicii. Pentru a crea alte legături în structura noastră organizațională, repetăm ​​acest proces adăugând pointeri către alte noduri.

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

Un avantaj al acestui design este capacitatea de a imbrica noduri: element

, de exemplu, poate conține multe elemente
• , cuibărit în el; Mai mult, fiecare element
• poate avea noduri
• acelasi nivel.

  Operațiuni cu arborele

  Orice arbore conține noduri, care pot fi constructori de arbori separați și vom defini operații atât pentru constructorii de noduri, cât și pentru cei de arbore.

  nodul

  • date - valorile sunt stocate aici;
  • parent - indică către elementul părinte al nodului;
  • copii - indică către următorul nod din listă.

  copac

  • _root - indică către nodul rădăcină al arborelui;
  • traverseDF(callback)- traversează nodurile arborelui folosind metoda DFS;
  • traverseBF(callback) - traversează nodurile de arbore folosind metoda BFS;
  • conţine(date, traversare) - caută un nod arbore;
  • add(data, toData, traverse) - adaugă un nod la arbore;
  • remove(child, parent) - Îndepărtează un nod de arbore.

  Implementarea arborelui

  Acum să scriem codul arborelui.

  Proprietățile nodului

  Pentru implementare, vom defini mai întâi o funcție numită Node și apoi un constructor numit Arborele :

  funcția Nod(date) ( this.data = data; this.parent = null; this.children = ; )

  Fiecare instanță Node conține trei proprietăți: date , parent , and children . Prima proprietate este folosită pentru a stoca datele asociate nodului. A doua proprietate indică un nod. A treia proprietate indică nodurile copil.

  proprietățile arborelui

  Să definim constructorul nostru pentru Tree , care conține constructorul Node în corpul său:

  funcția Arbore(date) ( var node = nou Nod(date); this._root = nod; )

  Arborele conține două linii de cod. Prima linie creează o nouă instanță Node; a doua linie atribuie nodul ca element rădăcină al arborelui.

  Este nevoie de doar câteva linii de cod pentru a defini Arborele și Nodul. Dar acest lucru este suficient pentru a ne ajuta să definim datele ierarhice. Pentru a demonstra acest lucru, să folosim câteva exemple pentru a instanția un arbore:

  var tree = arbore nou ("CEO"); // (date: „CEO”, părinte: nul, copii: ) tree._root;

  Cu parent and children , putem adăuga noduri ca copii ai _root , și, de asemenea, atribui _root ca părinte al acelor noduri. Cu alte cuvinte, putem defini o ierarhie de date.

  Metode de arbore

  Vom crea următoarele cinci metode:

  • traverseDF(callback) ;
  • traverseBF(callback) ;
  • conţine(date, traversare) ;
  • adauga(copil, parinte);
  • elimina (nod, părinte) .

  Deoarece fiecare metodă necesită o traversare a arborilor, implementăm mai întâi metode care definesc diferite tipuri de traversare a arborilor.

  metoda traverseDF (callback).

  Metodă de parcurgere a unui copac utilizând căutarea pe adâncime:

  Tree.prototype.traverseDF = function(callback) ( // aceasta este o funcție recursivă și apelabilă instantaneu (funcția recurse(currentNode) ( // pasul 2 pentru (var i = 0, length = currentNode.children.length; i)< length; i++) { // шаг 3 recurse(currentNode.children[i]); } // шаг 4 callback(currentNode); // шаг 1 })(this._root); };

  traverseDF(callback) conține un parametru cu numele callback-ului. (callback) este o funcție care va fi apelată mai târziu în traverseDF(callback) .

  Corpul lui traverseDF(callback) include o altă funcție numită recurse. Aceasta este o funcție recursivă care se referă la ea însăși și se termină automat. Folosind pașii subliniați în comentarii pentru funcția recurse, voi descrie întregul proces pe care recursul îl folosește pentru a parcurge întregul arbore.

  Iată pașii:

  • Numim recurs cu nodul rădăcină al arborelui ca argument. CurrentNode curent indică nodul curent;
  • Intrăm în bucla for și o repetăm ​​o dată pentru fiecare nod copil pentru currentNode , începând cu primul;
  • În corpul buclei for, numim o funcție recursivă cu un nod copil pentru nodul currentNode . Ce nod este depinde de iterația curentă a buclei for;
  • Când currentNode nu mai are copii, ieșim din bucla for și apelăm ( sună din nou) pe care le-am transmis în timpul apelului către traverseDF(callback) .

  Pasii 2 ( auto-terminatoare), 3 (auto-apelant) și 4 (callback) sunt repetate până când fiecare nod arborescent este traversat.

  Recursiunea este un subiect foarte complex. Pentru a înțelege, puteți experimenta cu implementarea noastră actuală a traverseDF( sună din nou)și încercați să înțelegeți cum funcționează.

  Următorul exemplu demonstrează traversarea arborelui folosind traverseDF(callback) . Pentru acest exemplu, voi crea mai întâi un arbore. Abordarea pe care o voi folosi nu este ideală, dar funcționează. Ar fi mai bine să folosiți metoda adăugare (valoare), pe care o vom implementa în pasul 4:

  var tree = arbore nou ("unul"); tree._root.children.push(nodul nou ("doi")); tree._root.children.parent = copac; tree._root.children.push(nodul nou(„trei”)); tree._root.children.parent = copac; tree._root.children.push(nodul nou(„patru”)); tree._root.children.parent = copac; tree._root.children.children.push(nodul nou ("cinci")); tree._root.children.children.parent = copac._rădăcină.copii; tree._root.children.children.push(nodul nou(„șase”)); tree._root.children.children.parent = copac._rădăcină.copii; tree._root.children.children.push(nodul nou(„șapte”)); tree._root.children.children.parent = copac._rădăcină.copii; /* creează următorul arbore unu ├── doi │ ├── cinci │ └── șase ├── trei └── patru └── șapte */

  Acum, să apelăm traverseDF(callback):

  tree.traverseDF(function(node) ( console.log(node.data) )); /* imprimă următoarele rânduri pe consolă „cinci” „șase” „două” „trei” „șapte” „patru” „unu” */

  metoda traverseBF(callback).

  Metodă de parcurgere a unui copac după lățime. Diferența dintre căutarea depth-first și breadth-first search constă în ordinea în care sunt traversate nodurile arborelui. Pentru a ilustra acest lucru, să folosim arborele pe care l-am creat pentru a implementa metoda traverseDF(callback):

  /* arbore unu (adâncime: 0) ├── doi (adâncime: 1) │ ├── cinci (adâncime: 2) │ └── șase (adâncime: 2) ├── trei (adâncime: 1) ─ patru (adâncime: 1) └── șapte (adâncime: 2) */

  Acum să trecem la traverseBF(callback) același callback pe care l-am folosit pentru traverseDF(callback):

  tree.traverseBF(funcție(nod) ( console.log(nod.data) )); /* imprimă următoarele rânduri pe consolă „unu” „două” „trei” „patru” „cinci” „șase” „șapte” */

  Imprimăm șirurile pe consolă, iar diagrama noastră arborescentă ne va arăta o imagine care reflectă principiul căutării pe lățime. Începeți de la nodul rădăcină; apoi mergeți pe un nivel și vizitați fiecare nod al acelui nivel de la stânga la dreapta. Repetați acest proces până când toate nivelurile sunt finalizate. Să implementăm codul cu care va funcționa acest exemplu:

  Tree.prototype.traverseBF = function(callback) (var coada = new Queue(); queue.enqueue(this._root); currentTree = queue.dequeue(); while(currentTree)( pentru (var i = 0, lungime = curentTree.copii.lungime;i< length; i++) { queue.enqueue(currentTree.children[i]); } callback(currentTree); currentTree = queue.dequeue(); } };

  Definiția traverseBF (callback) o voi explica pas cu pas:

  • Creați o instanță de Queue ;
  • Adăugați un nod numit traverseBF(callback) pe instanța Queue;
  • Declaram variabila currentNode si o initializam pentru nodul pe care tocmai l-am adaugat in coada;
  • În timp ce currentNode indică către nod, executați codul în bucla while;
  • Folosiți o buclă for pentru a parcurge nodurile copil ale currentNode;
  • În corpul buclei for, adăugați fiecare nod copil la coadă;
  • Luăm currentNode și îl transmitem ca argument pentru callback;
  • Setați currentNode la nodul care urmează să fie eliminat din coadă;
  • Atâta timp cât currentNode indică un nod, fiecare nod din arbore trebuie traversat. Pentru a face acest lucru, repetați pașii de la 4 la 8.

  conţine (callback, traversal) metoda

  Să definim o metodă care ne va permite să găsim o anumită valoare în arbore. Pentru a folosi oricare dintre metodele de traversare a arborelui, am setat contains(callback, traversal) pentru a lua două argumente: datele pe care le căutăm și tipul de traversare:

  Tree.prototype.contains = function(callback, traversal) ( traversal.call(this, callback); );

  În corpul conținutului (callback, traversal) folosim o metodă numită call pentru a transmite acest lucru și callback. Primul argument leagă traversal de arborele pe care conţine(callback, traversal) este apelat; al doilea argument este o funcție care este apelată pe fiecare nod al arborelui.

  Imaginați-vă că vrem să imprimăm pe consolă toate nodurile care conțin date cu numere impar și să traversăm fiecare nod al arborelui folosind metoda BFS. Pentru a face acest lucru, scrieți următorul cod:

  // arborele este un exemplu de arbore de noduri rădăcină. contains(function(node)( if (nod. data === "două") ( console. log(node); ) ), tree. traverseBF);

  metoda add(date, toData, traversal)

  Acum avem o metodă pentru a găsi un nod în arbore. Să definim o metodă care ne va permite să adăugăm un nod la un anumit nod:

  Tree.prototype.add = function(data, toData, traversal) ( var child = new Node(data), parent = null, callback = function(node) ( if (node.data === toData) ( parent = nod; ) ); this.contains(callback, traversal); if (parent) (parent.children.push(child); child.parent = părinte; ) else (throw new Error("Nu se poate adăuga un nod la un părinte inexistent. "); ));

  add(data, toData, traversal) definește trei parametri. datele sunt folosite pentru a crea o nouă instanță de nod. toData este folosit pentru a compara fiecare nod din arbore. Al treilea parametru, traversarea, este tipul de traversare a arborilor utilizat în această metodă.

  În corpul add(data, toData, traversal) declarăm trei variabile. Prima variabilă, child , este inițializată ca o nouă instanță Node. A doua variabilă, părinte, este inițializată la null; dar mai târziu va indica orice nod din arbore care se potrivește cu valoarea toData . Realocarea părintelui se face în a treia variabilă, callback .

  callback este o funcție care compară toData cu proprietatea de date a fiecărui nod. Dacă nodul îndeplinește condiția instrucțiunii if, este atribuit ca părinte.

  Comparația reală a fiecărui nod cu toData se face în add(data, toData, traversal) . Tipul de traversare și apel invers trebuie să fie transmise ca argumente pentru add(data, toData, traversal) .

  Dacă parent nu există în arbore, punem child în parent.children ; atribuim, de asemenea, părinte la copil, în caz contrar este aruncată o eroare.

  Să folosim add(data, toData, traversal) în exemplul nostru:

  var tree = arbore nou ("CEO"); tree.add("VP al Fericirii", "CEO", tree.traverseBF); /* arborele nostru „CEO” └── „VP al Fericirii” */

  Iată mai multe exemplu complex folosind add(data, toData, traversal):

  var tree = arbore nou ("CEO"); tree.add("VP al Fericirii", "CEO", tree.traverseBF); tree.add("VP de Finanțe", "CEO", tree.traverseBF); tree.add("VP of Sadness", "CEO", tree.traverseBF); tree.add(„Directorul Puppis”, „VP of Finance”, tree.traverseBF); tree.add("Manager de catei", "Director de catei", tree.traverseBF); /* arbore „CEO” ├── „VP al Fericirii” ├── „VP al Finanțelor” │ ├── „Directorul Cățeilor” │ └── „Managerul Puppiilor” └── „VP al Tristeței”

  metoda remove(date, fromData, traversal).

  Pentru a implementa pe deplin Tree, trebuie să adăugăm o metodă numită eliminați (date, dinDate, traversare). Similar cu eliminarea unui nod din DOM, această metodă va elimina nodul și toate nodurile sale secundare:

  Tree.prototype.remove = function(data, fromData, traversal) ( var tree = this, parent = null, childToRemove = null, index; var callback = function(node) ( if (node.data === fromData) (parent = nod; )); this.contains(callback, traversal); if (parent) (index = findIndex(parent.children, data); if (index === nedefinit) (throw new Error ("Nodul de eliminat nu există."); ) else ( childToRemove = parent.children.splice(index, 1); ) ) else ( throw new Error("Părintele nu există."); ) return childToRemove; );

  La fel ca add(data, toData, traversal) , metoda remove parcurge întregul arbore pentru a găsi nodul care conține al doilea argument, care este în prezent egal cu fromData . Dacă acest nod este găsit, atunci părintele indică el în prima instrucțiune if.

  Conform modelului DOM:

  • Întregul document este reprezentat de un nod de document;
  • Fiecare tag HTML este un nod element;
  • Textul din elementele HTML este reprezentat prin noduri de text;
  • Fiecare atribut HTML are asociat un nod de atribut;
  • Comentariile sunt noduri de comentarii.

  antet

  Doar text

  Exemplul 6.2

  În acest exemplu, nodul rădăcină este eticheta . Toate celelalte noduri sunt conținute în interior . Acest nod are două noduri copil: și . Nod conţine nodul nodul elementului