Ebben a leckében megvizsgáljuk, mi a DOM, miért van rá szükség és hogyan épül fel.

Mi az a DOM?

Amikor egy böngésző kér egy oldalt, és a szerver válaszában megkapja a HTML forrását, először elemeznie kell. A HTML -kód elemzése és elemzése során a böngésző DOM -fát épít ez alapján.

A művelet és számos más művelet elvégzése után a böngésző elkezdi megjeleníteni az oldalt. Ebben a folyamatban természetesen már az általa létrehozott DOM fát használja, nem az eredeti HTML kódot.

A DOM egy dokumentumobjektum -modell, amelyet a böngésző a kiszolgálótó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 az 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 kapott oldal forráskódja megtekinthető a Webfejlesztői eszközök panel Forrás lapján.

A Chrome -ban nincs eszköz az általa létrehozott DOM -fa megtekintéséhez. De ennek a DOM-fának van egy HTML-kódú ábrázolása, amely az "Elemek" lapon érhető el. Ez a DOM -ábrázolás természetesen sokkal kényelmesebb egy webfejlesztő számára. Ezért nincs olyan eszköz, amely fa struktúra formájában képviselné a DOM -ot.

Ebben a modellben az objektumok szinte minden HTML -ből (címkék, szöveges tartalom, megjegyzések stb.) Készülnek, beleértve magát a dokumentumot is. Az objektumok közötti kapcsolatok a modellben a hogyan alapján jönnek létre A HTML elemek egymáshoz képest a kódban találhatók.

Ebben az esetben a dokumentum DOM formálása után megváltoztatható. Amikor a DOM megváltozik, a böngésző szinte azonnal újrarajzolja az oldal képét. Ennek eredményeként megvan oldalmegjelenítés mindig megfelel a DOM -nak.

A DOM programozott olvasásához és módosításához a böngésző biztosítja számunkra a DOM API -t, vagy más szóval a programozási felületet. Egyszerű módon a DOM API hatalmas számú gyűjtemény különféle tárgyak, azok tulajdonságait és módszereit, amelyeket felhasználhatunk A DOM olvassa és módosítja.

A legtöbb esetben a JavaScriptet használják a DOM -val való együttműködéshez. ma ez az egyetlen programozási nyelv, amely böngészőben írható.

Miért van szükségünk a DOM API -ra? Szükségünk van rá, hogy a JavaScript használatával menet közben megváltoztathassuk az oldalt, azaz. tegye dinamikussá és interaktívvá.

A DOM API hatalmas számú módszert biztosít számunkra (fejlesztőknek), amelyekkel mindent megváltoztathatunk, ami az oldalon található, valamint kapcsolatba léphetünk a felhasználóval. Azok. ez a programozási felület lehetővé teszi számunkra, hogy összetett felületeket, űrlapokat hozzunk létre, feldolgozzuk a felhasználói műveleteket, hozzáadjunk és távolítsunk el különböző elemeket az oldalon, módosítsuk azok tartalmát, tulajdonságait (attribútumait) és még sok mást.

Most a weben gyakorlatilag nincs olyan webhely a szkriptekben, amelyek ne működnének a DOM -mal.

Miből áll az oldal HTML -kódja?

Mielőtt továbblépne a dokumentumobjektum -modell feltárásához, először emlékeznie kell arra, hogy mi a weboldal (HTML dokumentum) forráskódja.

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

A dokumentumban bizonyos jelölések létrehozásához egyes elemek mások között vannak. Ennek eredményeként egy HTML dokumentumot egymásba ágyazott HTML elemek halmazának lehet tekinteni.

Példaként vegye figyelembe következő HTML kód:

Cikk címe

Ebben a kódban a gyökér elem html. Fej és test elemei vannak egymásba ágyazva. A fej elem tartalmazza a címet, a törzs pedig a h1 -et és a div -et. A div elem viszont h2 -t és p -t tartalmaz.

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

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

A fentebb leírtak szerint a böngésző fát épít HTML elemek és más entitások alapján. forráskód oldalak. E folyamat során figyelembe veszi az elemek egymásba ágyazását.

Ennek eredményeként a böngésző nemcsak a munkájában használja a kapott DOM fát, hanem API -t is biztosít számunkra kényelmes munka vele JavaScript -en keresztül.

A DOM felépítésekor a böngésző objektumokat (a DOM fa csomópontjait) hoz létre ezen nyelv HTML elemeiből, szövegeiből, megjegyzéseiből és más entitásokból.

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

Ugyanakkor a böngésző nemcsak HTML -elemekből hoz létre objektumokat, hanem bizonyos kapcsolatokban összeköti őket egymással, attól függően, hogy mindegyik hogyan viszonyul a másikhoz a kódban.

Azok az elemek, amelyek valamely elemben közvetlenül vannak, ahhoz képest gyermekek. És mindegyikük szülője. Ezenkívül mindezek 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ó). 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 kapja meg, ahogyan a böngésző építi, csak össze kell állítania az összes elemet az egymáshoz való viszony függvényében.

A DOM fa felülről lefelé jön létre.

Ebben az esetben a DOM fa gyökere mindig maga a dokumentum (a dokumentum csomópont). Ezenkívül a fa a HTML kód szerkezetétől függően épül fel.

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

Ennek a fának a tetején található a dokumentum csomópont. Ez a csomópont a html -hez kapcsolódik, ez a gyermeke. A html csomópontot a html elem ( ...). Fejcsomók ( ...) és a test ( ...

) van egy szülő linkje a html -hez. Egymással kapcsolatban testvérek, mert legyen egy szülője. A fejcsomópont címhez van társítva (lt; title> ...), ő a gyermeke. A h1 és div csomópontok a testhez vannak társítva, amelynek szülője. A div csomópont a h2 (

...

) és p (), ők annak gyermekei.

A fa a fentiek szerint a dokumentumobjektumtól (csomóponttól) kezdődik. Ennek viszont van egy gyermekcsomópontja, amelyet a html elem ( ...). A fej elemei ( ...) és a test ( ...

) html -ben vannak, ezért a gyermekei. Továbbá a fejcsomópont a cím szülője (lt; title> ...). A h1 és div elemek a testben vannak egymásba ágyazva, ami azt jelenti, hogy a gyermekei. A div közvetlenül tartalmaz h2 elemeket (

...

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

Ilyen egyszerű a DOM -fa felépítése a böngészőben HTML -kód alapján.

Miért kell tudnia, hogyan épül fel a DOM fa? Először is, ez annak a környezetnek a megértése, amelyben valamit változtatni szeretne. Másodszor, a DOM -mal való együttműködés során a legtöbb művelet a szükséges elemek megtalálására (kiválasztására) vonatkozik. Nem ismerve a DOM fa működését és a csomópontok közötti kapcsolatokat, keressen néhányat konkrét elem elég nehéz lesz benne.

A feladat

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

Együttműködés a DOM -mal

Minden Window objektumnak van egy tulajdonsága dokumentum hivatkozva a Document objektumra. Ez a Document objektum nem önálló objektum. A dokumentum objektummodell (DOM) néven ismert kiterjedt API középpontja, amely meghatározza a dokumentum tartalmának elérésének sorrendjét.

A DOM modell áttekintése

Dokumentumobjektum -modell (DOM) egy alapvető API, amely lehetővé teszi a HTML és XML dokumentumok tartalmával való munkát. A DOM alkalmazásprogramozási felület (API) nem különösebben bonyolult, de számos építészeti jellemzővel kell tisztában lenni.

Először is meg kell érteni, hogy beágyazott HTML elemek vagy az XML dokumentumok DOM objektumok fájaként jelennek meg. A HTML -dokumentum fa nézete olyan elemeket vagy címkéket ábrázoló csomópontokat tartalmaz, mint például és

És csomópontok, amelyek szövegsorokat képviselnek. Egy HTML dokumentum tartalmazhat HTML megjegyzéseket reprezentáló csomópontokat is. Tekintsük a következő egyszerű HTML dokumentumot:

Ez egy HTML dokumentum

Példa egyszerű szöveg.

Ennek a dokumentumnak a DOM -ábrázolása az alábbi diagramon látható:

Azok számára, akik még nem ismerik a számítógépes programozás fa struktúráit, hasznos tudni, hogy leírásuk terminológiáját a családfákból kölcsönözték. A közvetlenül e csomópont felett található csomópontot hívják szülő ehhez a csomóponthoz képest. A csomópontok egy szinttel a másik csomópont alatt találhatók leányvállalat ehhez a csomóponthoz képest. Az azonos szintű és azonos szülővel rendelkező csomópontokat hívják gondozás... Azok a csomópontok, amelyek tetszőleges számú szinttel egy másik csomópont alatt vannak, annak leszármazottai. A szülők, nagyszülők és bármely más csomópont, amely e csomópont felett található, az ősei.

Ezen a diagramon minden téglalap egy dokumentumcsomópont, amelyet egy objektum képvisel Csomópont... Vegye figyelembe, hogy az ábrán három különböző típusú csomópont látható. A fa gyökere a Dokumentum csomópont, amely a teljes dokumentumot képviseli. A HTML elemeket reprezentáló csomópontok elemcsomópontok, a szöveget ábrázoló csomópontok szövegcsomópontok. A dokumentum, az elem és a szöveg a csomópont 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 a HTMLElement típusok közötti formai különbségeket. A Dokumentum típus egy HTML és XML dokumentumot, az Elem osztály pedig a dokumentum egyik elemét jelenti. A HTMLDocument és a HTMLElement alosztályok kifejezetten egy HTML dokumentumot és annak elemeit képviselik:

Ebben a diagramban meg kell jegyezni a jelenlétét is egy nagy szám a HTMLElement osztály altípusai, amelyek bizonyos típusú HTML elemeket képviselnek. Ezek mindegyike olyan JavaScript -tulajdonságokat határoz meg, amelyek tükrözik egy adott elem vagy elemcsoport HTML -attribútumait. Ezen osztályok némelyike ​​további tulajdonságokat vagy módszereket határoz meg, amelyek nem tükrözik a HTML jelölőnyelv szintaxisát.

A dokumentum elemeinek kiválasztása

Többségi munka kliens programok a JavaScript -ben valahogy összefügg a dokumentum -elemek manipulálásával. Futtatás közben ezek a programok a dokumentum objektumra hivatkozó globális dokumentumváltozót használhatják. Ahhoz azonban, hogy bármilyen manipulációt végezzen a dokumentum elemein, a programnak valahogy le kell küldenie vagy ki kell választania azokat az Elem objektumokat, amelyek a dokumentumban szereplő elemekre hivatkoznak. A DOM számos módot határoz meg az elemek kiválasztására. Kiválaszthatja a dokumentum egyik elemét vagy elemeit:

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

a name attribútum értékével;

címke neve szerint;

az osztály vagy CSS osztályok neve alapján;

véletlenül egy adott CSS -választóval.

Mindezeket a kiválasztási technikákat a következő alfejezetek írják le.

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

Minden HTML elem rendelkezik azonosító attribútumokkal. Ennek az attribútumnak az értéknek egyedinek kell lennie a dokumentumon belül - ugyanazon dokumentum két elemének nem kell azonos azonosító attribútum értékkel rendelkeznie. Válassza ki az elemet egyedi érték az id attribútum elvégezhető a módszer használatával getElementById () Dokumentum objektum:

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

Ez az elemek kiválasztásának legegyszerűbb és leggyakoribb módja. Ha egy szkriptnek képesnek kell lennie arra, hogy manipulálja a dokumentum elemeinek meghatározott halmazát, rendeljen értékeket ezeknek az elemeknek az id attribútumaihoz, és használja a képességet ezek alapján keresni.

Az Internet Explorer IE8-as verziónál korábbi verzióiban a getElementById () metódus kis- és nagybetű-érzékeny módon keresi az id attribútum értékeit, és a name attribútum értékének megfelelő elemeket is visszaad.

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

A név HTML attribútum eredetileg az űrlapelemek elnevezésére szolgál, és ennek az attribútumnak az értékét használták az űrlapadatok kiszolgálóra történő beküldésekor. Az id attribútumhoz hasonlóan a name attribútum is nevet rendel egy elemhez. Az azonosítóval ellentétben azonban a name attribútum értékének nem kell egyedinek lennie: több elemnek is lehet ugyanaz a neve egyszerre, ami meglehetősen gyakori, ha a választógombokat és a jelölőnégyzeteket használja az űrlapokon. Továbbá, az azonosítóval ellentétben a name attribútum csak bizonyos HTML -elemeken engedélyezett, beleértve az űrlapokat, az űrlapelemeket és az elemeket.