Mis on html-dokumendi elementide puu. WDH: DHTML – dokumendiobjekti mudel

Dokumendipuu(dokumendipuu) on HTML-dokumendi koostamise skeem, mis näitab lehe erinevate elementide vahelisi seoseid: elementide järjestust ja pesastamist. See diagramm aitab teil selles näiliselt kaootilises HTML-märgendite segaduses navigeerida.

Veebiarendajana aitab dokumendipuu CSS-reeglite ja Javascripti skriptide kirjutamisel.

Märkus

Ärge ajage dokumendipuud segamini dokumendiobjekti mudeliga (DOM). DOM on keerulisem mõiste (sellest kirjutatakse veidi hiljem).

Et mitte laskuda pikkadesse ja tüütutesse selgitustesse, miks dokumentide puud puuks kutsutakse, vaatame näidet – võtame lihtsa HTML-koodi:

Nii näevad HTML-koodi valgustamata põliselanikud, kes kogemata klõpsasid, et vaadata lehe koodi. Kuid veebiarendaja koolitatud silm võtab selle lahti, näeb kõiki pesastumise ja vastastikuse sidumise tasemeid. See loob kaosest selge hierarhilise struktuuri puu kujul (kuna skeem on sarnane puu piirjoontega):

Perekondlikud sidemed

Dokumendipuu elementide vahel on teatud seosed. Vaatleme neid.

Esivanemad ja järeltulijad

Puu skemaatilisest esitusest ja HTML-koodist endast on selge, et mõned elemendid on pesastatud teistesse. Elemendid, mis sisaldavad teisi, on esivanemad(esivanem) kõige sellesse panustatud suhtes. Pesastunud on omakorda tema järeltulijad(järglane).

Selguse huvides kaaluge ühte meie puu haru:

Igal esivanemal võib olla piiramatu arv järglasi. Igal lapsel on olenevalt puu struktuurist ja sellest, millises oksas see asub, mitu esivanemat, kuid igal juhul on vähemalt üks esivanem.

Vanemad ja tütred

Lapsevanem(vanem) on elemendi vahetu esivanem (esimese taseme esivanem). Ja vastupidi, nimetatakse vahetut last (esimese astme laps). laps element(laps).

Igal vanemal võib olla piiramatu arv lapsi. Alamelemendil on ainult üks vanem.

Vanemelementi nimetatakse ka otsene esivanem, ja alamelement on otsene järglane. See on midagi semantiliste nimede sarnast.

sõsarelemendid

Õed-vennad on kahe või enama elemendi rühm, millel on ühine vanem. Elemendid ei pea olema sama tüüpi, neil peab lihtsalt olema ühine vanem.

Kõrvuti asetsevad elemendid

Kõrvuti asetsevad elemendid(kõrvuti) on sõsarelemendid, mis asuvad "kõrval".

Eelmine õde ja järgmine õde

Terminite nimedest peaks kõik selge olema. Eelmine õde (eelnev õde) – eelmine õdeelement koodis. Meie näites haru jaoks

See tahe

Sest

—

, ja jaoks

varasemat õdedust ei tule.

Samamoodi järgmine õde (järgneb õde-venda): for

—

Sest

—

, jaoks
- Ei.

Eelmine ja järgmine

Eelmine element (eelnev) on koodi järgi sama eelmine element, ainult ilma sõsarsuhtepiiranguteta. Meie filiaali jaoks: eest

See tahe

Sest

—

, jaoks

—

.

Samamoodi ei ole järgmisel elemendil (eelmisel) sõsarsuhtepiiranguid: for

—

Sest

Esimene laps ja viimane

Esimene laps (esimene laps) on dokumendipuus vanema esimene laps ja viimane (viimane laps) on viimane.



Juurelement

Juureelement (juur) on kõigi esivanemate esivanem, see on meie dokumendipuu "juur", see on ainus element, millel pole vanemat, see on .

HTML-i põhitõed sisaldavad HTML-keele põhireegleid, HTML-lehe struktuuri kirjeldust, seoseid HTML-dokumendi struktuuris HTML-elementide vahel.

HTML-dokument on lihttekstidokument, seda saab luua samamoodi nagu tavalises tekstiredaktoris. (Märkmik) ja spetsiaalses koodi esiletõstmisega (Notepad++, Visual Studio kood jne). HTML-dokumendil on laiend html.

HTML-dokument koosneb HTML-i elementide ja teksti puust. Iga element on algdokumendis identifitseeritud algus- (avamis-) ja lõpu- (sulgemis-) märgendiga (harvade eranditega).

Alusta silt näitab, kus element algab, lõpp - kus see lõpeb. Sulgev silt moodustatakse sildi nime ette kaldkriipsu / lisamisega:<имя тега> … . Algus- ja lõpumärgendite vahel on sildi sisu – sisu.

Üksikud sildid ei saa sisu otse salvestada, see kirjutatakse atribuudi väärtusena, näiteks silt loob tekstiga nupu Nupp sees.

Sildid võivad olla üksteise sisse pesastatud, näiteks

Tekst

. Investeerimisel tuleb järgida nende sulgemise järjekorda ("matrjoška" põhimõte) Näiteks järgmine kirje oleks vale:

Tekst

.

HTML-i elementidel võivad olla atribuudid (globaalsed, kõigile HTML-elementidele rakendatavad ja omad). Atribuudid kirjutatakse elemendi avamärgendisse ja sisaldavad nime ja väärtust, mis on määratud vormingus atribuut name="value" . Atribuudid võimaldavad muuta selle elemendi omadusi ja käitumist, mille jaoks need on määratud.

Igal elemendil võib olla mitu klassi väärtust ja ainult üks ID-väärtus. Mitu klassi väärtust kirjutatakse tühikuga,

. Klassi ja ID väärtused peavad sisaldama ainult tähti, numbreid, sidekriipse ja allkriipse ning algama ainult tähtede või numbritega.

Brauser vaatab (tõlgendab) HTML-dokumenti, koostades selle struktuuri (DOM) ja kuvades seda vastavalt selles failis sisalduvatele juhistele (laaditabelid, skriptid). Kui märgistus on õige, kuvatakse brauseriaknas HTML-leht, mis sisaldab HTML-elemente – pealkirju, tabeleid, pilte jne.

Tõlgendamise protsess (parsimine) käivitub enne, kui veebileht on täielikult brauserisse laaditud. Brauserid töötlevad HTML-dokumente algusest peale järjestikku, samal ajal töötlevad CSS-i ja seostavad laadilehti lehe elementidega.

HTML-dokument koosneb kahest osast – pealkirjast – siltide vahel … ja sisu – siltide vahel … .

Veebilehe struktuur

1. HTML-dokumendi struktuur

HTML-keel järgib dokumenditüübi deklaratsiooni failis sisalduvaid reegleid. (Dokumendi tüübi määratlus ehk DTD). DTD on XML-dokument, mis määratleb, millised sildid, atribuudid ja nende väärtused konkreetse HTML-i tüübi jaoks kehtivad. Igal HTML-i versioonil on oma DTD.

DOCTYPE vastutab veebilehe õige kuvamise eest brauseris. DOCTYPE määratleb mitte ainult HTML-i versiooni (nt html), vaid ka vastava DTD-faili veebis.

Märgendis olevad elemendid , moodustavad dokumendipuu, nn dokumendiobjekti mudel, DOM (dokumendiobjekti mudel). Samal ajal element on juurelement.


Riis. 1. Veebilehe lihtsaim struktuur

Veebilehe elementide interaktsiooni mõistmiseks tuleb arvestada nn "peresuhe" elementide vahel. Mitme pesastatud elemendi vahelised seosed liigitatakse vanem-, alam- ja õde-seoseks.

Esivanem Element, mis sisaldab muid elemente. Joonisel 1 on kõigi elementide esivanem . Samal ajal element on kõigi selles sisalduvate siltide esivanem:

,

, ,