În această lecție, ne vom uita la ce este DOM-ul, de ce este necesar și cum este construit.

Când un browser solicită o pagină și primește codul HTML sursă ca răspuns de la server, trebuie mai întâi să o analizeze. În procesul de analiză și analiză a codului HTML, browserul construiește un arbore DOM pe baza acestuia.

După finalizarea acestei acțiuni și a altora, browserul începe să redeze pagina. În acest proces, el, desigur, folosește deja arborele DOM pe care l-a creat, și nu codul HTML original.

DOM este un model de obiect de document pe care browserul îl creează în memoria computerului pe baza codului HTML pe care îl primește de la server.

Pentru a spune simplu, codul HTML este textul unei pagini, iar DOM este un set de obiecte asociate create de browser la analizarea textului acesteia.

În Chrome, codul sursă al paginii pe care o primește browserul poate fi vizualizat în fila „Sursă” din panoul „Instrumente pentru dezvoltatori web”.

Chrome nu are un instrument cu care să puteți vizualiza arborele DOM pe care îl creează. Dar există o reprezentare a acestui arbore DOM sub formă de cod HTML, este disponibil în fila „Elemente”. Această reprezentare DOM este, desigur, mult mai convenabilă pentru a lucra cu un dezvoltator web. Prin urmare, nu există niciun instrument care ar reprezenta DOM-ul ca structură arborescentă.

Obiectele din acest model sunt formate din aproape tot ceea ce este în HTML (etichete, conținut text, comentarii etc.), inclusiv documentul în sine. Relațiile dintre aceste obiecte din model se formează pe baza modului în care elementele HTML sunt poziționate unul față de celălalt în cod.

În acest caz, DOM-ul documentului după formarea acestuia poate fi modificat. Când DOM-ul se schimbă, browserul redesenează aproape instantaneu imaginea paginii. Ca rezultat, redarea paginii noastre corespunde întotdeauna DOM-ului.

Pentru a citi și modifica DOM-ul în mod programatic, browser-ul ne oferă un API DOM sau, cu alte cuvinte, o interfață de programare. Mai simplu spus, API-ul DOM este o colecție de un număr mare de obiecte diferite, proprietățile și metodele lor pe care le putem folosi pentru a citi și modifica DOM.

Pentru a lucra cu DOM, JavaScript este folosit în majoritatea cazurilor, deoarece... Astăzi este singurul limbaj de programare în care scripturile pot fi executate într-un browser.

De ce avem nevoie de API-ul DOM?

Avem nevoie de el pentru a putea folosi JavaScript pentru a schimba pagina din mers, de exemplu. fă-l dinamic și interactiv.

API-ul DOM ne pune la dispoziție (dezvoltatorilor) un număr mare de metode prin care putem schimba totul din pagină, precum și interacționa cu utilizatorul. Aceste. Această interfață software ne permite să creăm interfețe complexe, formulare, să procesăm acțiunile utilizatorului, să adăugăm și să eliminăm diverse elemente de pe pagină, să le modificăm conținutul, proprietățile (atributele) și multe altele.

În ce constă codul HTML al unei pagini?

Înainte de a trece la studiul modelului obiect document, trebuie mai întâi să vă amintiți care este codul sursă al unei pagini web (document HTML). Codul sursă al unei pagini web este format din etichete, atribute, comentarii și text. Etichetele sunt constructul sintactic de bază al HTML. Majoritatea sunt pereche. În acest caz, unul dintre ele se deschide, iar celălalt se închide. O astfel de pereche de etichete formează un element HTML. Elementele HTML pot avea opțiuni suplimentare

– atribute.

Într-un document, pentru a crea anumite markupuri, unele elemente sunt situate în interiorul altora. Ca rezultat, un document HTML poate fi reprezentat ca un set de elemente HTML imbricate unul în celălalt.

Ca exemplu, luați în considerare următorul cod HTML:

Titlul paginii Titlul articolului Secțiunea articolului

Conținutul articolului

În acest cod, elementul rădăcină este html. Conține elemente ale capului și corpului. Elementul head conține un titlu, iar corpul conține un h1 și un div. Elementul div la rândul său conține h2 și p .

După cum s-a descris deja mai sus, browserul construiește un arbore bazat pe elemente HTML și alte entități cod sursă pagini. Atunci când se efectuează acest proces, se ia în considerare imbricarea elementelor unul în celălalt.

Drept urmare, browserul folosește arborele DOM rezultat nu numai în activitatea sa, ci ne oferă și un API pentru lucrul convenabil cu acesta prin JavaScript.

La construirea DOM-ului, browserul creează obiecte (noduri de arbore DOM) din elemente HTML, text, comentarii și alte entități ale acestui limbaj.

În cele mai multe cazuri, dezvoltatorii web sunt interesați doar de obiecte (noduri) formate din elemente HTML.

În același timp, browserul nu numai că creează obiecte din elemente HTML, ci și le conectează între ele prin anumite conexiuni, în funcție de modul în care fiecare dintre ele se raportează la celălalt în cod.

Elementele care se află direct într-un element sunt copii în relație cu acesta. Și este un părinte pentru fiecare dintre ei. În plus, toate aceste elemente sunt frați (frați) în relație unul cu celălalt.

Mai mult, în HTML, orice element are întotdeauna un părinte (elementul HTML în care se află direct). În HTML, un element nu poate avea mai mulți părinți. Singura excepție este elementul html. Nu are părinte.

Pentru a obține un arbore DOM pe măsură ce browserul îl construiește, trebuie doar să „aranjați” toate elementele în funcție de relația lor între ele.

Crearea arborelui DOM se face de sus în jos.

În acest caz, rădăcina arborelui DOM este întotdeauna documentul însuși (nodul documentului). Apoi, arborele este construit în funcție de structura codului HTML.

De exemplu, codul HTML la care ne-am uitat mai sus ar avea următorul arbore DOM:

În partea de sus a acestui arbore se află nodul document. Acest nod asociat cu html, este copilul lui. Nodul html este creat element html(...). Nodurile cap(...) și corp(...) au o relație de părinte cu html. În relație unul cu celălalt, sunt frați, pentru că ai un singur parinte. Nodul principal este asociat cu titlul (lt;titlu>...), este copilul său. Nodurile h1 și div sunt asociate cu body , care este părintele lor. Nodul div este conectat la h2(...) și p(), ele sunt copiii acestuia.

Arborele începe, după cum sa menționat mai sus, cu obiectul document (nodul). La rândul său, are un nod copil format din elementul html (...). Elementele cap(...) și corp(...) sunt în html și, prin urmare, sunt copiii săi. În continuare, nodul principal este părintele titlului (lt;titlu>...). Elementele h1 și div sunt imbricate în corp, adică sunt copiii acestuia. Div-ul conține direct elementele h2 (...) și p (). Aceasta înseamnă că nodul div pentru fiecare dintre ele este părintele.

Acesta este cât de ușor este să construiți un arbore DOM într-un browser bazat pe cod HTML.

De ce trebuie să știți cum este construit arborele DOM?

Exercita

Pe baza arborelui DOM prezentat în figură, creați cod HTML. Această secțiune prezintă scurtă introducere cu Document Object Model (DOM) - ce este DOM, cum sunt furnizate structurile documentelor HTML și XML și cum să interacționați cu acestea. Această secțiune conține informații de fundal

Ce este un Document Object Model (DOM)?

Document Object Model (DOM) este o interfață de programare (API) pentru documente HTML și XML. DOM oferă o reprezentare structurată a unui document și definește modul în care acea structură poate fi accesată de programe care pot schimba conținutul, stilul și structura documentului. Vederea DOM constă dintr-un grup structurat de noduri și obiecte care au proprietăți și metode. În esență, DOM conectează o pagină web la limbaje de scripting sau limbaje de programare.

Nu trebuie să faci nimic special pentru a manipula DOM. Diferitele browsere au implementări diferite ale DOM, iar aceste implementări arată grade diferite de conformitate cu standardul DOM real (un subiect pe care am încercat să evităm să intrăm în această documentație), dar fiecare browser folosește un DOM diferit pentru a face paginile web interoperabile. cu limbaje de scripting.

Prin crearea unui script folosind elementul sau prin includerea instrucțiunilor într-o pagină web pentru a încărca scriptul, puteți începe imediat să utilizați interfața de programare a aplicației (API), folosind elementele fie pentru a interacționa cu documentul în sine, fie pentru a obține descendenți de acel document, adică diverse elemente de pe pagină. Programarea dvs. DOM poate fi ceva la fel de simplă ca imprimarea unui mesaj folosind o funcție de obiect sau poate utiliza metode DOM mai complexe care creează conținut nou, așa cum se arată în exemplul următor:

Următorul exemplu are cod JavaScript definit în interiorul unui element, acest cod setează funcția când documentul este încărcat (când întregul DOM este disponibil pentru utilizare). Această funcție creează un nou element H1, adaugă text la acest elementși apoi adaugă H1 la arborele documentului:

rubrica. appendChild( heading_text) ; document. corp. appendChild(titlu);)

Tipuri importante de date Această secțiune are scopul de a oferi o scurtă descriere diverse tipuri

Acesta este un tutorial despre obiecte și lucruri reale pe care le puteți folosi pentru a manipula ierarhia DOM. Există multe locuri în care înțelegerea modului în care funcționează poate fi surprinzătoare. De exemplu, un obiect care reprezintă un element de formular HTML își ia proprietatea name din interfața HTMLFormElement și proprietatea className din interfața HTMLElement. În ambele cazuri, proprietatea dorită este în acel obiect de formă.

În plus, relația dintre obiecte și interfețele pe care le implementează în DOM poate fi surprinzătoare și această secțiune încearcă să spună puțin despre interfețele existente în DOM și despre cum pot fi accesate.

Multe obiecte implementează acțiuni din mai multe interfețe. Obiectul tabel, de exemplu, implementează unul special care include metode precum createCaption și insertRow . Dar, deoarece acesta este un tabel, este și un element HTML, table implementează interfața Element, descrisă în secțiune. În cele din urmă, deoarece un element HTML (în sensul DOM) este un nod din arborele care alcătuiește modelul obiect pentru o pagină HTML sau XML, un element de tabel implementează și interfața Node mai generală din care este derivat Element.

Var table = document.getElementById("tabel"); var tableAttrs = table.attributes; // Interfață nod/element pentru (var i = 0; i< tableAttrs.length; i++) { // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // HTMLTableElement interface: summary attribute table.summary = "note: increased border";

Această secțiune listează câteva dintre cele mai comune interfețe din DOM. Ideea nu este de a descrie ceea ce fac aceste metode API, ci de a vă oferi câteva gânduri despre tipurile de metode și proprietăți pe care le veți vedea adesea când utilizați DOM. Aceste părți comune ale API-ului sunt folosite în majoritatea exemplelor din secțiunea de la sfârșitul acestui ajutor.

Documentul, fereastra sunt obiecte ale căror interfețe ai tendința de a folosi foarte des în programarea DOM. Vorbitor în cuvinte simple, obiect fereastră reprezintă ceva asemănător unui browser, iar obiectul document este rădăcina documentului în sine. Element moștenește din interfața comună Node, iar aceste interfețe împreună oferă multe metode și proprietăți care pot fi aplicate elementelor individuale. Aceste elemente pot avea și interfețe separate pentru lucrul cu tipurile de date pe care le conțin aceste elemente, ca în exemplul de obiect tabel din cazul precedent.

Mai jos este o listă scurtă de membri API obișnuiți utilizați în programarea paginilor web și XML folosind DOM:

• parentNode.appendChild(nod)

Acest document conține exemple pentru fiecare interfață pe care o puteți utiliza în dezvoltarea dvs. În unele cazuri, exemplele sunt pagini web cu drepturi depline cu acces la DOM-ul din element, listând, de asemenea, elementele necesare rulării script-ului pe formular și elementele HTML pe care vor fi efectuate operațiunile DOM. Când se întâmplă acest lucru, puteți pur și simplu să copiați și să lipiți exemplul într-un nou document HTML, să îl salvați și să îl rulați în browser.

Există însă cazuri în care exemplele sunt mai concise. Pentru a rula exemple care doar demonstrează elementele de bază ale modului în care interfețele interacționează cu elementele HTML, puteți pregăti o pagină de test în care veți plasa funcții în interiorul scripturilor. Următoarea pagină web foarte simplă conține un element antet în care puteți plasa funcții pentru a testa interfața. Pagina conține mai multe elemente cu atribute care pot fi returnate, setate sau, cu alte cuvinte, manipulate și conține interfața de utilizator necesară pentru a apela funcțiile necesare din browser.

Puteți folosi această pagină de testare sau una similară pentru a testa interfețele DOM care vă interesează și pentru a vedea cum funcționează acestea în browsere. Puteți actualiza conținutul funcției test() după cum este necesar, puteți crea mai multe butoane sau puteți adăuga elemente după cum este necesar.

Pentru a testa multe interfețe pe o singură pagină, un set de proprietăți care schimbă culorile paginii web, puteți crea o pagină web similară cu o întreagă „consolă” de butoane, câmpuri de text și alte elemente. Următoarea captură de ecran oferă o idee despre cum interfețele pot fi grupate pentru testare

În acest exemplu, meniul drop-down actualizează dinamic părți ale paginii web accesibile din DOM (de exemplu, culoarea fundalului, culoarea linkului și culoarea textului). Cu toate acestea, atunci când dezvoltați pagini de testare, testarea interfețelor, așa cum ați citit despre aceasta, este o parte importantă a învățării munca eficienta cu DOM.

Subiectul este chiar complex. Dar, după cum se spune, diavolul nu este atât de groaznic pe cât este pictat. Aici primesc cea mai dură nucă: această super sarcină de a o „vopsi” cât mai digerabilă, dar nu în întregime primitivă. Până acum, toate materialele pe care le-am citit tind să fie fie abstruse, fie primitive.

Abrevierea DOM înseamnă Model obiect document(model de obiect document).

DOM este o interfață de programare pentru accesarea conținutului documentelor HTML, XHTML și XML, adică reprezentarea etichetelor și Atributele HTML, XHTML și XML și stilurile CSS ca obiecte de programare. Atât JavaScript, cât și alte limbaje de programare web funcționează cu acest model.

Puțină istorie

Există 4 niveluri DOM (0, 1, 2 și 3).

Nivelul 0 (1996) a inclus modele DOM care existau înainte de Nivelul 1. Acestea sunt în principal colecții: document.images, document.forms, document.layers și document.all. Aceste modele nu sunt în mod oficial specificații DOM publicate de W3C. Mai degrabă, ele reprezintă informații despre ceea ce a existat înainte de începerea procesului de standardizare.

Nivelul 1 (1997) a inclus și elementul de bază funcţionalitate privind procesarea documentelor XML: numeroase moduri de a lucra cu noduri individuale, de a lucra cu instrucțiuni de procesare XML etc.

În plus, nivelul 1 DOM conține o serie de interfețe speciale care pot gestiona elemente HTML individuale. De exemplu, puteți lucra cu tabele HTML, formulare, liste de selecție etc.

DOM Level 2 (2002) a adăugat câteva funcții noi.

În timp ce nivelul 1 DOM nu avea suport pentru spațiile de nume, interfețele DOM Nivelul 2 conțin metode de gestionare a spațiilor de nume asociate cu cerințele pentru compunerea și procesarea documentelor XML.

În plus, nivelul 2 DOM acceptă evenimente.

Nivelul 2 este nivelul actual al specificației DOM, dar W3C recomandă unele secțiuni ale specificației de nivel 3.

DOM Level 3 este un proiect de specificație de lucru care extinde funcționalitatea DOM Level 2. Una dintre cele mai caracteristici importante Această versiune a specificației este capacitatea de a lucra cu numeroase extensii DOM.

Ce înseamnă „interfață software”?

Interfața cuvântului englezesc poate fi tradus ca „zonă de contact”. Un computer, aproximativ vorbind, înțelege doar două lucruri: un bit gol și un bit umplut. Limbajul pe care îl „vorbește” un computer poate fi gândit ca un șir nesfârșit de zerouri și unu, dând un număr infinit de combinații diferite.

Orice cod de program este o interpretare, pe înțelesul programatorului, a acestor „zerouri și unități” cu care lucrează computerul. Astfel, orice limbaj de programare este o interfață om-mașină.

Browserele funcționează la fel ca și altele aplicatii informatice. Ei interpretează în „zerouri și unu” coduri HTML, XML, CSS, JavaScript, PHP, Perl etc. Pentru a face față acestui multilingvism, este nevoie de o platformă comună. Această platformă este DOM - o specificație care nu depinde de un anumit limbaj de programare sau de marcare. Este o interfață care poate fi utilizată în multe limbaje de programare populare asociate cu crearea de pagini web și capabilă să înțeleagă și să interpreteze obiecte DOM.

DOM și browsere

DOM și JavaScript

În JavaScript, partea de sus a scării ierarhice a obiectelor DOM, un fel de „conductor” al acestei interfețe, este obiectul document, iar obiectele DOM devin proprietățile sale, proprietățile proprietăților sale etc. Ele sunt numite și noduri DOM.

Există 12 tipuri de noduri în DOM nivelul 2. Fiecărui tip de nod DOM i se atribuie o constantă cu nume unic. Majoritatea nodurilor sunt proiectate să funcționeze cu XML. În ansamblul HTML - JavaScript pe care îl facem, pot fi folosite doar 5 tipuri. Dar chiar și acest „vârf al aisbergului” este un „copac foarte răspândit” care nu poate fi acoperit în una sau două lecții.

Setul complet de constante de tip de nod definite în specificația W3C DOM (nodurile disponibile pentru HTML - JavaScript sunt evidențiate cu albastru):

* Notațiile sunt nume care identifică formatul secțiunilor neparsate, formatul elementelor care au un atribut de notație sau programul de aplicație căruia îi este adresată directiva.

(Nu este clar? Nici eu nu sunt prea sigur încă.)

Structura documentului în DOM

Antet DOM

Textul paragrafului

Iată o diagramă a arborelui său DOM:

Fiecare nod poate avea noduri copil (săgețile conduc la ele în diagramă). Obiectul document - baza arborelui document - este, de asemenea, un nod, dar nu are un nod părinte și are o serie de proprietăți și metode pe care alte noduri nu le au. Are un nod copil: element.

Un element are două noduri copil: și , pentru care toate elementele conținute în ele devin copii.

„Element” și „etichetă” nu sunt sinonime. O etichetă este un semn de marcare: - acestea sunt două etichete diferite. Și un element este un obiect marcat cu aceste etichete:

Antet DOM

Elemente și

Conține text în interior. Acestea sunt nodurile lor de text copil. Elementul are și un atribut: align="center" . Nodurile de atribut sunt și noduri copii ale elementelor care le conțin.

Când lucrați cu nodurile arborelui DOM, sunt utilizate proprietățile și metodele acestora.

Mică introducere

Repet încă o dată: atunci când accesăm elemente de pagină în scripturi, avem de-a face nu numai cu limbajul Javascript, ci și cu interfața DOM încorporată în acesta. Uneori trebuie să fii conștient de acest lucru, uneori poți uita „că vorbim în proză”.

Am folosit deja unele proprietăți și metode din modelul de obiecte DOM în acest fel. Prin urmare, din când în când voi oferi link-uri către lecțiile anterioare.

În această lecție, nu vom merge pe calea „academică”, luând în considerare toate proprietățile tuturor nodurilor din toate browserele. În primul rând, să facem cunoștință cu cele mai practice și „fără conflicte” dintre ele.

De aceea nu vom începe, așa cum este de obicei, cu „proprietățile principale”: nodeName și nodeValue.

tagName

Returnează un șir care conține numele etichetei elementului. Toate valorile tagName conțin numai caractere majuscule.

Sintaxă

Exemplu

Testarea proprietății tagName

document.write(document.getElementById( „testTagName”).tagName)

Rezultat

Testarea proprietății tagName

innerHTML

Am întâlnit deja această proprietate (vezi. Lecția 10). Și acum înțelegem de unde vine: „de acasă”.

Oferă acces la conținutul elementului. Specifică nu numai conținutul textului, ci și toate etichetele HTML situate în interiorul elementului.

Această proprietate nu este doar pentru citire, ci și pentru modificarea conținutului.

Nota

În IE, innerHTML este doar în citire pentru un număr de elemente: toate elementele de tabel, cu excepția

De exemplu, am creat un tabel gol fără un element