Care este arborele de elemente al unui document html. WDH: DHTML - Document Object Model

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ă a etichetelor HTML.

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

Nota

Nu confundați arborele documentului cu Document Object Model (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. Invers, 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 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 .

Bazele HTML conțin regulile de bază ale limbajului HTML, o descriere a structurii unei pagini HTML, relațiile în structura unui document HTML între elementele HTML.

Un document HTML este un document cu text simplu, acesta poate fi creat în același mod ca într-un editor de text obișnuit. (Caiet), iar într-una de specialitate, cu evidențiere de cod (Notepad++, Cod Visual Studio etc.). Un document HTML are extensia .html.

Un document HTML constă dintr-un arbore de elemente HTML și text. Fiecare element este identificat în documentul sursă printr-o etichetă de început (deschidere) și de final (închidere) (cu rare excepții).

Eticheta de pornire arată unde începe elementul, unde se termină. Etichetă de închidere format prin adăugarea unei bare oblice / înainte de numele etichetei:<имя тега> … . Între etichetele de început și de sfârșit se află conținutul etichetei - conținut.

Etichetele unice nu pot stoca conținut direct, este scris ca valoare de atribut, de exemplu, o etichetă va crea un buton cu text Buton interior.

Etichetele pot fi imbricate unele în altele, de exemplu,

Text

. Când investiți, trebuie să urmați ordinea închiderii acestora (principiul „matryoshka”), de exemplu, următoarea intrare ar fi incorectă:

Text

.

Elementele HTML pot avea atribute (globale, aplicate tuturor elementelor HTML și propriile lor). Atributele sunt scrise în eticheta de deschidere a unui element și conțin un nume și o valoare specificate în atributul format name="value" . Atributele vă permit să modificați proprietățile și comportamentul elementului pentru care sunt setate.

Fiecare element poate avea mai multe valori de clasă și o singură valoare de id. Mai multe valori de clasă sunt scrise cu un spațiu,

. Valorile de clasă și id trebuie să conțină numai litere, cifre, cratime și litere de subliniere și trebuie să înceapă numai cu litere sau cifre.

Browserul vizualizează (interpretează) un document HTML, construindu-i structura (DOM) și afișându-l în conformitate cu instrucțiunile incluse în acest fișier (fișe de stil, scripturi). Dacă marcajul este corect, atunci fereastra browserului va afișa o pagină HTML care conține elemente HTML - titluri, tabele, imagini și așa mai departe.

Procesul de interpretare (analizare)începe înainte ca pagina web să fie complet încărcată în browser. Browserele procesează secvențial documentele HTML de la bun început, în timp ce procesează CSS și leagă foile de stil cu elementele paginii.

Un document HTML este format din două secțiuni - titlul - între etichete … și conținut - între etichete … .

Structura paginii web

1. Structura documentului HTML

Limbajul HTML urmează regulile conținute în fișierul de declarare a tipului de document. (Definiția tipului de document sau DTD). Un DTD este un document XML care definește ce etichete, atribute și valorile acestora sunt valabile pentru un anumit tip HTML. Fiecare versiune de HTML are propriul DTD.

DOCTYPE responsabil pentru afișarea corectă a paginii web de către browser. DOCTYPE definește nu numai versiunea HTML (de exemplu, html), ci și fișierul DTD corespunzător de pe web.

Elemente dintr-o etichetă , formează un arbore de documente, așa-numitul model obiect document, DOM (model obiect document). În același timp, elementul este elementul rădăcină.


Orez. 1. Cea mai simplă structură a unei pagini web

Pentru a înțelege interacțiunea elementelor unei pagini web, este necesar să luăm în considerare așa-numitele "relatii de familie"între elemente. Relațiile dintre mai multe elemente imbricate sunt clasificate în relații cu părinți, copii și frați.

Strămoş Un element care conține alte elemente. În figura 1, strămoșul pentru toate elementele este . În același timp, elementul este strămoșul tuturor etichetelor pe care le conține:

,

, ,