Acasă > Decorație interioară

Ce este un arbore de elemente ale unui document html. Structurarea datelor folosind JavaScript: arbore. Selectați articolele după tip

— mai tânără). Toate elementele arborelui sunt descendenţi rădăcină, și asta este a lor strămoş. În acest caz, 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 etichete, conținut și un set de atribute. Pentru a trece la modelul de obiect de document, mai rămâne un singur pas de făcut: apelați toate obiectele elementelor arborelui și faceți atributele acestora lizibile și modificabile din scripturi și applet-uri. Ca rezultat, arborele elementelor documentului HTML devine gestionat dinamic; Mai mult, acum putem adăuga cu ușurință noi proprietăți fiecărui element, în plus față de atributele standard HTML.

Această abordare a fost folosită ca bază pentru modelul HTML dinamic al browserelor Microsoft și apoi 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 capabilități suplimentare. Astfel, DOM este un model de document HTML și XML independent de platformă și limbă 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 reacțiile lor 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 este în stadiul de proiect de lucru Aceste acronime 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, luăm în considerare doar DOM 2 (și DOM 1 pe care îl conține) aici.
  • DOM 2 constă din următoarele grupuri de interfețe interconectate:
  • Interfețe de evenimente care determină ordinea generării și procesării evenimentelor;
  • Interfețe de stil care definesc aplicarea foilor de stil la documente;
  • Interfețe Traversal & Range care definesc traversarea arborelui documentului și manipularea zonelor conținutului acestuia;
  • Interfețe HTML care definesc o vizualizare arborescentă a unui document HTML.

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

4.2.2. Concepte de bază

DOM 2 Core reprezintă documentele XML ca arbori formați din 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 subarbori, în timp ce altele sunt frunze, adică nu au copii. Următorul tabel rezumă toate tipurile de noduri de document abstract posibile;

Pentru fiecare tip de nod sunt listate acele noduri care pot fi copii ale acestuia. Pentru conceptele corespunzătoare nodurilor enumerate, consultați descrierea structurii documentului XML.Tabelul 4.1. Structura arborescentă a documentului
Descrierea interfeței Copii Document
Element (max. unul), ProcessingInstruction , Comment , DocumentType (max. unul) Fragment de document
Element, ProcessingInstruction, Comentariu, Text, CDATASection, EntityReference DocumentType Tip document
nu are copii EntityReference Fragment de document
Link secțiune Element Fragment de document
Element Attr Atribut
Text, EntityReference Instrucțiuni de procesare Tip document
Directiva XML Comentariu Tip document
Comentariu Text Tip document
Text Secțiunea CDATA Tip document
secțiunea CDATA Entitate Fragment de document
Capitol Notaţie Tip document

Notaţie În plus, DOM 2 Core conține specificația interfețelor NodeList (liste ordonate de noduri accesibile după număr din listă) și NamedNodeMap (liste neordonate de noduri accesibile după numele lor). Aceste obiecte suntîn viaţă

, adică orice modificare a unui document 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. Când luăm în considerare arborele de documente în acest fel, vorbim despre ierarhia obiectelor . A doua abordare se bazează pe principiul „totul este noduri (Noduri)”.. Astfel, DOM 2 este în mod inerent redundant, dar ne oferă posibilitatea de a vizualiza documentul într-un fel sau altul, în funcție de sarcină.

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 HTML DOM 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 acceptabil pentru limba respectivă. De exemplu, în JavaScript acesta ar fi un obiect Date, iar în Java ar fi un întreg de tip lung care conține numărul de milisecunde.

Mai jos este o scurtă 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 limbajul IDL independent de platformă. Le prezentăm în conformitate cu sintaxa JavaScript, care este principalul limbaj de scripting astăzi.

Împreună cu o descriere a standardului, oferim o scurtă descriere a implementării acestuia în modelele de obiecte Microsoft și Gecko. Trebuie remarcat faptul 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. Următoarea discuție se concentrează pe DOM pentru HTML; XML DOM va fi discutat în detaliu în Partea VIII.

4.2.3. Excepții: interfața DOMExceptionObiectul DOMException este prototipul tuturor excepțiilor care pot apărea în timpul procesării unui document. Are un singur cod de proprietate de tip Număr, care conține numărul excepției conform următorului tabel:
Tabelul 4.2. Excepții DOM standard 1 Nume Valoare Descriere Model INDEX_SIZE_ERR
Indicele este în afara intervalului. 2 DOM 1 INDEX_SIZE_ERR
DOMSTRING_SIZE_ERR 3 Textul dat nu poate fi transmis la tip . INDEX_SIZE_ERR
HIERARCHY_REQUEST_ERR 4 Tip de document nevalid. INDEX_SIZE_ERR
INVALID_CHARACTER_ERR 5 A fost întâlnit un caracter nevalid. INDEX_SIZE_ERR
NO_DATA_ALLOWED_ERR 6 Nodul nu conține date. INDEX_SIZE_ERR
NO_MODIFICATION_ALLOWED_ERR 7 S-a încercat modificarea unui obiect în mod ilegal. INDEX_SIZE_ERR
NOT_FOUND_ERR 8 Accesarea unui nod inexistent. INDEX_SIZE_ERR
NOT_SUPPORTED_ERR 9 Parametrul sau operația nu este implementată. INDEX_SIZE_ERR
INUSE_ATTRIBUTE_ERR 10 S-a încercat să se adauge un atribut care există deja. INDEX_SIZE_ERR
INVALID_STATE_ERR 11 Referindu-se la un obiect inexistent. INDEX_SIZE_ERR
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 este conform cu spațiul de nume XML. DOM 2
INVALID_ACCESS_ERR 15 Parametrul sau operația nu este acceptată de obiect. DOM 2
Suport: implementare non-standard.

Unele coduri de eroare sunt acceptate.

4.2.4. Descrierea implementării: Interfață DOMImplementation Suport: Numai pentru documente XML (XMLDOMImplementation). Conform DOM 1. : Interfața DOMImplementation conține metode a căror execuție nu depinde de un anumit model de obiect de document. Este accesibil prin intermediul obiectului . metoda createCSSStyleSheet

Sintaxă

obiect Conform DOM 1. : Interfața DOMImplementation conține metode a căror execuție nu depinde de un anumit model de obiect de document. Este accesibil prin intermediul obiectului ..createCSSStyleSheet(title, media) Argumente: titlu, expresii tip media Rezultat: nou obiect CSSStyleSheet Excepții: SYNTAX_ERR Suport

Metoda createCSSStyleSheet 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. Conform DOM 1. : Interfața DOMImplementation conține metode a căror execuție nu depinde de un anumit model de obiect de document. Este accesibil prin intermediul obiectului ..createDocumentType(qualifiedName, publicId, systemId) Argumente: expresii de tip qualifiedName, publicId, systemId Rezultat: nou nod DocumentType Excepții Suport: Neacceptat.

Nu este acceptat.

Metoda createDocumentType creează un nod DocumentType gol ș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. Conform DOM 1. : Interfața DOMImplementation conține metode a căror execuție nu depinde de un anumit model de obiect de document. Este accesibil prin intermediul obiectului . metoda hasFeature

.hasFeature(feature, version) Argumente: caracteristică, expresii tip versiune Rezultat: boolean Excepții: niciuna Suport

Metoda hasFeature returnează true dacă implementarea DOM acceptă caracteristica specificată și false în caz contrar. Numele proprietății (în orice caz) este specificat de argumentul caracteristicii; trebuie să respecte convențiile de denumire XML. Argumentul versiune specifică numele versiunii proprietății care este verificată. Dacă nu este specificat, true este returnat dacă cel puțin o versiune a acestei proprietăți este acceptată.

În Gecko, valorile caracteristicilor pot fi șirurile „XML” și „HTML”, iar valoarea versiunii poate 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 scoate șirul true , iar a treia va scoate false .

În Microsoft XMLDOM, valorile caracteristicilor pot fi șirurile „XML”, „DOM” și „MS-DOM”, iar valoarea versiunii 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 scoate șirul true , iar a doua va scoate false .

4.2.5. Fragment de document: Interfață DocumentFragment Suport: Numai pentru documente XML (XMLDOMDocumentFragment). Conform 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 conceput pentru operațiuni cu

4.2.6. Document: Interfață pentru documente Suport: Suportat pentru documente XML (XMLDOMDocument);

pentru documentele HTML este parțial acceptat.

DOM 1 complet, 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.
INDEX_SIZE_ERR Metode de interfață pentru documente
DOM 2 Descrierea modelului de proprietate
INDEX_SIZE_ERR Creează un atribut.
INDEX_SIZE_ERR Creează un atribut dat un spațiu de nume.
INDEX_SIZE_ERR Creează o secțiune CDATA.
INDEX_SIZE_ERR Creează un comentariu.
DOM 2 Creează un nou fragment de document.
INDEX_SIZE_ERR Creează un nou element.
DOM 2 Creează un element cu un spațiu de nume dat.
INDEX_SIZE_ERR Creează un link către o secțiune.
INDEX_SIZE_ERR Creează un nou obiect Eveniment.
DOM 2 Creează o directivă.
INDEX_SIZE_ERR Creează un nou nod de text.
DOM 2 Returnează elementul cu ID-ul dat.
DOM 2 Returnează o colecție de toate elementele care au eticheta dată.
Returnează o colecție a tuturor elementelor care au eticheta dată, dat fiind spațiul de nume. Conform DOM 1. : Importă un nod dintr-un alt document. proprietatea doctype

document

.doctype Editabil: fără suport Conform DOM 1. : Importă un nod dintr-un alt document. Proprietatea doctype returnează tipul acestui document (tip DocumentType).

Pentru documentele HTML și pentru documentele XML care nu au o declarație de tip de document, este returnat null.

proprietatea documentElement

.documentElement Mutabil: nu Suport: Conform standardului.

Îndeplinește standardul. Conform DOM 1. : Importă un nod dintr-un alt document. Proprietatea documentElement returnează elementul rădăcină al acestui document (de tip Element). Pentru documentele HTML, elementul HTML este returnat.

Exemplu: operator

Alert(document.documentElement.tagName); Conform DOM 1. : Importă un nod dintr-un alt document. va afișa un șir HTML pe ecran.

Proprietatea de implementare

.implementare Editabil: nu Suport: Numai pentru documente XML. Conform DOM 1. : Importă un nod dintr-un alt document. Respectă DOM 1.

Metoda 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 un atribut nodeName de nume și un localName, prefix și atribute namespaceURI de null. Ulterior, atributul creat poate fi atribuit oricărui element folosind metoda Element.setAttributeNode.

Exemplu de creare a unui atribut pentru un element HTML:

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

Operatorul de alertă va imprima ș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 = "temporar"; root.setAttributeNode(attr); alert(root.getAttribute("temp"));!}

Aici operatorul de alertă va tipări și șirul temporar.

metoda createAttributeNS Conform DOM 1. : Importă un nod dintr-un alt document..createAttributeNS(namespaceURI, qualifiedName) Argumente: namespaceURI, qualifiedName tip expresii Rezultat: nou obiect Attr Excepții: INVALID_CHARACTER_ERR, NAMESPACE_ERR Suport: Neacceptat.

Nu este acceptat.

Metoda createAttributeNS creează un nou obiect 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 care urmează să fie creat în acel spațiu de nume. Obiectul creat de tip Attr are următoarele atribute: Conform DOM 1. : Importă un nod dintr-un alt document. Ulterior, atributul creat poate fi atribuit oricărui element folosind metoda Element.setAttributeNode.

metoda createCDATASection

.createCDATASection(data) Argumente : expresie tip de date Rezultat : obiect CDATASection nou Excepții : NOT_SUPPORTED_ERR Suport : Conform standardului.

Îndeplinește standardul. Conform DOM 1. : Importă un nod dintr-un alt document..createComment(data) Argumente : expresie tip de date Rezultat : nou obiect Comentariu Excepții : niciuna Suport : numai pentru documente XML.

Îndeplinește standardul.

Metoda createComment creează un nou obiect Comment ș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); Conform DOM 1. : Importă un nod dintr-un alt document. metoda createDocumentFragment

.createDocumentFragment() Rezultat: obiect nou Excepții: niciuna Suport: Numai pentru documente XML.

Îndeplinește standardul.

Metoda 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: Conform DOM 1. : Importă un nod dintr-un alt document. Var elem = document.documentElement.firstChild; var o = document.createDocumentFragment(); elem.appendChild(o);

metoda createElement

.createElement(tagName) Argumente : expresie tip tagName Rezultat : obiect element nou Excepții : INVALID_CHARACTER_ERR Suport : Conform standardului (vezi nota 2).

  • Îndeplinește standardul.
  • Metoda createElement creează un nou obiect de tip Element și returnează un pointer către acesta. Argumentul tagName specifică eticheta elementului creat. Atributul nodeName al noului obiect este tagName , iar atributele sale localName , prefixul și namespaceURI sunt nul . Dacă un obiect are atribute cu valori implicite, atunci nodurile Attr corespunzătoare sunt create automat și atașate elementului.
    • Note:
    Pentru XML, numele etichetelor de elemente sunt sensibile la majuscule. Pentru HTML, acestea pot fi setate în orice caz, dar sunt convertite în majuscule atunci când elementul este creat. Încercarea de a crea un element FRAME sau IFRAME în Internet Explorer are ca rezultat fie o eroare fatală a browserului, fie, cel puțin, distrugerea completă a arborelui obiect document.
    Comportamentul tipului de nod ATTRIBUTE_NODE
    Atributul ownerElement este nul , specificat este adevărat . Toți copiii nodului original sunt copiați recursiv în noul nod Attr, indiferent de valoarea deep. DOCUMENT_FRAGMENT_NODE
    Dacă deep este true , atunci fragmentul de document specificat este importat; în caz contrar, se creează un nod gol. Toate atributele nodului original sunt copiate în noul nod Element, cu excepția celor specificate implicit în documentul sursă. Sunt create apoi atributele implicite acceptate în acest document pentru elementele cu acest nume. Dacă deep este adevărat, atunci întregul subarboresc al elementului original este importat.
    ENTITY_NODE Entitate DocumentType Noduri
    ENTITY_REFERENCE_NODE Doar nodul EntityReference în sine este copiat, indiferent de valoarea deep.
    Dacă documentul nostru are o definiție de secțiune cu un nume dat, atunci este introdus într-un nou nod. NOTATION_NODE
    Nodurile de notație pot fi importate, dar în DOM 2 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ă.

    Î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 (va fi scris 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 dezasambla, 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 a tot ceea ce este conținut în el. Cei cuibăriți, la rândul lor, sunt descendenții acestuia (descendenții).

    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 pe 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.

    Un element părinte este numit și strămoș direct, iar un element copil este descendent direct. Acestea sunt 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

    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

    Încărcare...Încărcare...