Ebben a leckében megnézzük, mi az a DOM, miért van rá szükség, és hogyan épül fel.

Mi az a DOM?

A böngészőnek, amikor lekér egy oldalt, és válaszul megkapja a HTML forráskódját a szervertől, először elemeznie kell azt. A HTML-kód elemzése és elemzése során a böngésző DOM-fát épít ez alapján.

Ezen és számos egyéb művelet végrehajtása után a böngésző folytatja az oldal megjelenítését. Ebben a folyamatban természetesen már az általa létrehozott DOM-fát használja, nem az eredeti HTML-t.

A DOM az a dokumentumobjektum-modell, amelyet a böngésző a szervertől kapott HTML-kód alapján hoz létre a számítógép memóriájában.

Egyszerűen fogalmazva, a HTML kód egy oldal szövege, a DOM pedig a kapcsolódó objektumok halmaza, amelyet a böngésző hoz létre a szöveg elemzésekor.

A Chrome-ban a böngésző által fogadott oldal forráskódja a „Webfejlesztői eszközök” panel „Forrás” lapján tekinthető meg.

A Chrome-ban nincs olyan eszköz, amellyel meg lehetne tekinteni az általa létrehozott DOM-fát. De ennek a DOM-fának van egy HTML-kód formájában történő ábrázolása, amely az "Elemek" fülön érhető el. Ez a DOM-ábrázolás természetesen sokkal kényelmesebb a webfejlesztők számára. Ezért nincs olyan eszköz, amely a DOM-ot fastruktúra formájában ábrázolná.

Az objektumok ebben a modellben szinte mindenből jönnek létre, ami a HTML-ben található (címkék, szöveges tartalom, megjegyzések stb.), beleértve magát a dokumentumot is. A modellben szereplő objektumok közötti kapcsolatok a hogyan alapján alakulnak ki A HTML elemek egymáshoz képest helyezkednek el a kódban.

Ebben az esetben a dokumentum létrehozása utáni DOM-ja módosítható. Amikor a DOM megváltozik, a böngésző szinte azonnal újrarajzolja az oldal képét. Ennek eredményeként megvan Az oldal megjelenítése mindig megfelel a DOM-nak.

A DOM programozott olvasásához és módosításához a böngésző DOM API-t vagy más szóval programozói felületet biztosít számunkra. Egyszerű módon a DOM API rengeteg különböző objektum gyűjteménye, tulajdonságaik és metódusaik, amelyeket felhasználhatunk a DOM olvasása és módosítása.

A DOM-mal való együttműködéshez a legtöbb esetben JavaScriptet használnak, mert. a mai napig ez az egyetlen programozási nyelv, amelyen a szkriptek böngészőben futtathatók.

Miért van szükségünk DOM API-ra? Szükségünk van rá, hogy a JavaScript segítségével menet közben tudjuk változtatni az oldalt, azaz. dinamikussá és interaktívvá teszi.

A DOM API biztosítja számunkra (fejlesztők) nagy mennyiség módszerek, amelyekkel mindent megváltoztathatunk az oldalon, valamint interakcióba léphetünk a felhasználóval. Azok. ez a programozási felület lehetővé teszi összetett felületek, űrlapok létrehozását, felhasználói műveletek feldolgozását, hozzáadását és eltávolítását különféle elemek az oldalon módosíthatja azok tartalmát, tulajdonságait (attribútumait) és még sok mást.

A weben gyakorlatilag nincsenek olyan oldalak, amelyek szkriptjében ne működnének a DOM-mal.

Mi az oldal HTML kódja?

Mielőtt elkezdené a dokumentumobjektum-modell tanulmányozását, először emlékeznie kell arra, hogy mi a weboldal (HTML dokumentum) forráskódja.

A weboldal forráskódja címkékből, attribútumokból, megjegyzésekből és szövegekből áll. A címkék a HTML alapvető szintaxisa. Legtöbbjük párban. Ebben az esetben az egyik a nyitó, a másik a záró. Az egyik ilyen címkepár HTML elemet alkot. A HTML elemek rendelkezhetnek Extra lehetőségek- attribútumok.

Egy bizonyos jelölés létrehozására szolgáló dokumentumban egyes elemek másokon belül vannak. Ennek eredményeként egy HTML-dokumentum beágyazott HTML-elemek halmazának tekinthető.

Példaként vegye figyelembe a következő HTML-kódot:

Cikk címe

Ebben a kódban a gyökérelem a html . A fej és a test elemek benne vannak egymásba ágyazva. A head elem tartalmazza a címet , míg a body elem h1 és div . A div elem viszont tartalmazza a h2-t és a p-t.

Most nézzük meg, hogyan építi fel a böngésző a DOM-fát a HTML kód alapján.

Hogyan épül fel a dokumentum DOM fája?

Ahogy fentebb már leírtuk, a böngésző HTML-elemek és egyéb entitások alapján épít egy fát. forráskód oldalakat. Ennek a folyamatnak a végrehajtása során figyelembe veszi az elemek egymásba ágyazását.

Ennek eredményeként a böngésző nem csak a munkájában használja a kapott DOM-fát, hanem API-t is biztosít számunkra kényelmes működés azzal JavaScript-en keresztül.

A DOM felépítése során a böngésző objektumokat hoz létre HTML elemekből, szövegekből, megjegyzésekből és ennek a nyelvnek az egyéb entitásaiból ( DOM csomópontok-fák).

A webfejlesztőket a legtöbb esetben csak a HTML elemekből kialakított objektumok (csomópontok) érdeklik.

Ugyanakkor a böngésző nemcsak objektumokat hoz létre HTML-elemekből, hanem bizonyos kapcsolatokkal összekapcsolja azokat egymással, attól függően, hogy a kódban hogyan viszonyulnak a másikhoz.

Azok az elemek, amelyek közvetlenül az elemben vannak, annak gyermekei. És ő mindegyikük szülője. Ráadásul ezek az elemek egymáshoz képest testvérek (testvérek).

Ezenkívül a HTML-ben minden elemnek mindig van egy szülője (az a HTML-elem, amelyben közvetlenül található). A HTML-ben egy elemnek nem lehet több szülője. Az egyetlen kivétel a html elem. Nincs szülője.

Ahhoz, hogy a DOM-fát úgy kapjuk meg, ahogy a böngésző felállítja, csak „el kell rendezni” az összes elemet az egymáshoz való viszonyuk függvényében.

A DOM fa létrehozása fentről lefelé történik.

A DOM-fa gyökere mindig maga a dokumentum (a dokumentum csomópontja). Továbbá a fa a HTML kód szerkezetétől függően épül fel.

Például a fent megnézett HTML-kód a következő DOM-fával rendelkezik:

A fa legtetején található a dokumentum csomópont. Ez a csomópont a html-hez van társítva, ez a gyermeke. A html csomópontot a html elem ( ...). Fej csomópontok ( ...) és a test ( ...) szülője html . Egymáshoz képest testvérek, mert van egy szülője. A fejcsomópont a címhez van társítva (lt;title>...), ő az ő gyermeke. A h1 és div csomópontok a testhez kapcsolódnak, számukra ez a szülő. A div csomópont a h2 (

...

) és p(), ezek a gyermekei.

A fa, amint fentebb megjegyeztük, az objektum (csomópont) dokumentumból indul. Ennek viszont van egy gyermek csomópontja, amelyet a html elem ( ...). fejelemek ( ...) és a test ( ...) html-ben találhatók, és ezért a gyermekei. Ezután a fejcsomópont a cím szülője (lt;title>...). A h1 és div elemek a törzsben vannak beágyazva, ami azt jelenti, hogy a törzs gyermekei. A div közvetlenül tartalmazza a h2 elemeket (

...

) és p(). Ez azt jelenti, hogy mindegyik div csomópontja a szülő.

A DOM fa egyszerűen így épül fel a böngészőben a HTML kód alapján.

Miért kell tudnia, hogyan épül fel egy DOM-fa? Először is, ez annak a környezetnek a megértése, amelyben változtatni szeretne. Másodszor, a DOM-mal végzett munka során a legtöbb művelet a szükséges elemek megtalálásán (kiválasztásán) múlik. A DOM fa elrendezésének és a csomópontok közötti kapcsolatok ismerete nélkül meglehetősen nehéz lesz egy adott elemet megtalálni benne.

Gyakorlat

Az ábrán látható DOM fa alapján hozza létre a HTML kódot.

A hivatkozás tartalmazza a szabványos beépített JavaScript objektumok összes tulajdonságának és metódusának leírását.

Dokumentum objektum modell

Dokumentum objektum modell(Document Object Model, DOM) egy alkalmazásprogramozási felület (API) az XML-hez, amelyet kibővítettek a HTML-lel is.

A DOM-ban az összes oldaltartalom (elemek és szöveg) csomópontok hierarchiájaként jelenik meg. Vegye figyelembe a következő kódot:

Helló Világ!

Ez a kód a DOM-mal mint csomópontok hierarchiájával ábrázolható:

Azáltal, hogy egy dokumentumot csomópontok faként ábrázol, a DOM API teljes ellenőrzést biztosít a fejlesztőknek a weboldal tartalma és szerkezete felett.

A DOM fastruktúrájának leírásakor a családfákból kölcsönzött terminológiát használjuk.

Így az adott csomópont felett közvetlenül elhelyezkedő csomópontot az adott csomópont szülőcsomópontjának nevezzük. A csomópont alatt egy szinttel elhelyezkedő csomópontokat a csomópont gyermekeinek nevezzük. Az azonos szinten lévő és azonos szülővel rendelkező csomópontokat testvéreknek vagy testvéreknek nevezzük. Az adott csomópont alatt tetszőleges számú szinttel elhelyezkedő csomópontokat a leszármazottaknak nevezzük. A szülőket, nagyszülőket és minden más csomópontot, amelyek egy adott csomópont felett tetszőleges számú szinttel helyezkednek el, őseinek nevezzük.

A DOM hivatkozás tartalmazza a Document, Element, Event és NodeList objektumok leírását, beleértve metódusaik és tulajdonságaik leírását:

BOM-könyvtár

A BOM (Browser Object Model – angol fordításban - Browser Object Model) hozzáférést biztosít a böngészőablakhoz, és lehetővé teszi annak és elemeinek kezelését.

A BOM objektumok hozzáférést biztosítanak a böngésző funkcióihoz a weboldal tartalmától függetlenül. A BOM témája egyszerre érdekes és összetett, mert a specifikáció hosszas hiánya miatt a böngészőgyártók szabadon bővítették a BOM-ot, ahogy jónak látták. Sok hasonló elem különböző böngészők, de facto szabványokká váltak, amelyeket a kölcsönös kompatibilitás érdekében a mai napig betartanak. A JavaScript ezen alapvető szempontjainak szabványosítása érdekében a W3C meghatározta a BOM alapvető elemeit a HTML5 specifikációjában.

Munka a DOM modellel

Minden Window objektumnak van egy tulajdonsága dokumentum A, amely egy dokumentum objektumra utal. Ez a dokumentum objektum nem önálló objektum. Ez a dokumentumobjektum-modell (DOM) néven ismert gazdag API központi objektuma, amely meghatározza a dokumentum tartalmának elérését.

A DOM áttekintése

Dokumentumobjektum-modell (DOM) egy alapvető alkalmazásprogramozási felület, amely lehetővé teszi a munkavégzést HTML tartalomés XML dokumentumokat. A DOM-alkalmazásprogramozási felület (API) nem különösebben bonyolult, de számos architekturális jellemzővel tisztában kell lennie.

Először is meg kell érteni, hogy a HTML- vagy XML-dokumentumok beágyazott elemei DOM-objektumok fájaként vannak ábrázolva. A HTML-dokumentum fanézete elemeket vagy címkéket képviselő csomópontokat tartalmaz, mint pl És

És a szövegsorokat képviselő csomópontok. Egy HTML-dokumentum HTML-megjegyzéseket képviselő csomópontokat is tartalmazhat. Tekintsük a következő egyszerű HTML dokumentumot:

Ez egy HTML dokumentum

Példa egyszerű szöveg.

A dokumentum DOM-ábrázolása a következő ábrán látható:

Azoknak, akik még nem ismerik a faszerkezeteket számítógép programozás, hasznos tudni, hogy a leírásukra szolgáló terminológiát a családfákról kölcsönözték. A közvetlenül az adott csomópont feletti csomópontot hívják meg szülői ehhez a csomóponthoz képest. Azok a csomópontok, amelyek egy szinttel a másik csomópont alatt vannak leányvállalatok ehhez a csomóponthoz képest. Az azonos szinten lévő és azonos szülővel rendelkező csomópontokat hívják meg testvéri. A másik csomópont alatt tetszőleges számú szinttel elhelyezkedő csomópontok annak gyermekei. A szülő, a nagyszülő és a csomópont feletti egyéb csomópontok az ősei.

Ezen a diagramon minden téglalap egy dokumentum csomópont, amelyet az objektum képvisel csomópont. Felhívjuk figyelmét, hogy az ábra hármat mutat különféle típusok csomópontok. A fa gyökere a Dokumentum csomópont, amely a teljes dokumentumot reprezentálja. A HTML elemeket képviselő csomópontok Element típusú csomópontok, a szöveget képviselő csomópontok pedig Text típusúak. A Dokumentum, az Elem és a Szöveg a Node osztály alosztályai. A dokumentum és az elem a DOM két legfontosabb osztálya.

A csomópont típusa és altípusai alkotják az alábbi diagramon látható típushierarchiát. Vegye figyelembe az általános dokumentum- és elemtípusok, valamint a HTMLDocument és HTMLElement típusok közötti formai különbségeket. A Dokumentum típus egy HTML és XML dokumentumot jelöl, az Element osztály pedig ennek a dokumentumnak egy elemét. A HTMLDocument és HTMLElement alosztályok kifejezetten egy HTML dokumentumot és annak elemeit képviselik:

Ezen a diagramon is figyelemre méltó a HTMLElement osztály nagyszámú altípusa, amelyek a HTML elemek meghatározott típusait képviselik. Ezek mindegyike olyan JavaScript-tulajdonságokat határoz meg, amelyek egy adott elem vagy elemcsoport HTML-attribútumait tükrözik. Ezen speciális osztályok némelyike ​​további tulajdonságokat vagy metódusokat határoz meg, amelyek nem tükrözik a HTML jelölőnyelv szintaxisát.

Dokumentumelemek kiválasztása

Többségi munka kliens programok tovább JavaScript valahogy a dokumentum elemeinek manipulálásához kapcsolódik. A végrehajtás során ezek a programok használhatják a dokumentum globális változót, amely a Dokumentum objektumra hivatkozik. Azonban ahhoz, hogy bármilyen manipulációt végrehajtson a dokumentum elemein, a programnak valamilyen módon meg kell szereznie vagy ki kell választania azokat az Elem objektumokat, amelyek a dokumentum ezen elemeire hivatkoznak. A DOM számos módot definiál az elemek kiválasztására. Kijelölhet egy dokumentum elemét vagy elemeit:

az id attribútum értékével;

a név attribútum értékével;

címkenév szerint;

a CSS-osztály vagy -osztályok neve alapján;

hogy megfeleljen egy adott CSS-választónak.

Mindezen elemkiválasztási technikák leírása a következő alfejezetekben található.

Elemek kiválasztása id attribútumérték alapján

Minden HTML elem rendelkezik id attribútumokkal. Az attribútum értékének egyedinek kell lennie a dokumentumon belül – ugyanabban a dokumentumban nem lehet két elemnek azonos azonosító attribútum értéke. A metódus használatával kiválaszthat egy elemet az id attribútum egyedi értéke alapján getElementById() Dokumentum objektum:

Var section1 = document.getElementById("szakasz1");

Ez a legegyszerűbb és leggyakoribb módja az elemek kiválasztásának. Ha a szkriptnek képesnek kell lennie a dokumentumelemek egy meghatározott halmazának manipulálására, rendeljen értékeket ezen elemek id attribútumaihoz, és használja azt a képességet, hogy ezek alapján keressen bennük.

Verziók internet böngésző IE8 alatt getElementById metódus() megkeresi az id attribútum értékeit kis- és nagybetűk megkülönböztetése nélkül, és visszaadja a name attribútum értékének megfelelő elemeket is.

Elemek kiválasztása a name attribútum értéke alapján

A HTML name attribútumot eredetileg az űrlapelemek elnevezésére szánták, és ennek az attribútumnak az értékét használták az űrlapadatok kiszolgálóhoz történő elküldésekor. Az id attribútumhoz hasonlóan a name attribútum is nevet rendel egy elemhez. Az id-vel ellentétben azonban a name attribútum értékének nem kell egyedinek lennie: egyszerre több elemnek is lehet ugyanaz a neve, ami rádiógomboknál és jelölőnégyzeteknél elég gyakori. Ezenkívül az id-vel ellentétben a name attribútum csak bizonyos HTML-elemeken adható meg, beleértve az űrlapokat, űrlapelemeket és elemeket.