Mi a dom a javascriptben. Munka a DOM modellel

Ebben az oktatóanyagban bemutatjuk az eseményekkel, attribútumokkal és getElementById JavaScriptben végzett munka alapjait.

Az előző leckékben a JavaScript nyelv alapvető tulajdonságait tanulmányoztuk. Ettől a leckétől kezdve azt fogjuk tenni, amire maga a JavaScript is készült - megváltoztatjuk a HTML oldal elemeit, és reagálunk a felhasználói műveletekre. Szkriptjeink látványosabbak és hasznosabbak lesznek.

Kezdjük azzal, hogy megtanítjuk a kódunkat, hogy reagáljon a webhely felhasználói tevékenységeire. Például a felhasználó rákattint valahova az egérrel, és válaszként a kódunknak fel kell dolgoznia ezt a kattintást, és megjelenítenie kell néhány információt a képernyőn.

A JavaScript segítségével nyomon követhető felhasználói műveleteket eseményeknek nevezzük. Az események lehetnek: kiáltás egér az oldalelemen, tanácsadás egérrel az oldalelemre vagy fordítva - gondoskodás az egérmutatót az elemről, és így tovább. Ezenkívül vannak olyan események, amelyek nem függnek a felhasználói műveletektől, például egy olyan esemény, amikor egy HTML-oldal betöltődik a böngészőbe.

Többféleképpen is dolgozhat az eseményekkel JavaScriptben. Kezdjük ezek közül a legegyszerűbbekkel.

A rendezvény alapjai

Egy elem adott eseményre adott válaszának beállításának legegyszerűbb módja, ha egy adott címkén lévő attribútum segítségével adja meg. Például az esemény "egér kattintás" megfelel az onclick attribútumnak, eseménynek "egér lebeg" az onmouseover attribútum és az esemény "kurzor elhagyja az elemet"- az onmouseout attribútum.

Az esemény attribútum értéke a JavaScript kód . A következő példában gombra kattintva a riasztási funkció végrehajtásra kerül:

És most kattintással a func függvény az elemen lesz végrehajtva:

func() ( figyelmeztetés("!"); )

Nem egy, hanem több funkciót is végrehajthat:

function func1() ( alert("1"); ) function func2() ( alert("2"); )

Vegye figyelembe, hogy ha dupla idézőjelekre van szüksége egy attribútumon belül (például egy karakterlánchoz), és az attribútum külső idézőjelei is dupla - onclick="figyelmeztetés("!")"- ez a kód nem fog működni.

Ezt többféleképpen kezelheti: a külső idézőjeleket egyszeresre változtathatja onclick="figyelmeztetés("!")", a belső idézőjelek elől is kibújhatsz egy fordított perjellel onclick="alert(\"!\")" vagy egyszerűen vigye át a JavaScript kódot az attribútumból a függvénybe, és csak a függvény nevét hagyja az attribútumban onclick="func()".

Ugyanez történik, ha az attribútum külső idézőjeleit egyszeresre állítja, és egyszeres idézőjeleket használ a karakterlánchoz: onclick="figyelmeztetés("!")"- itt is minden hasonló módon van megoldva.

Események attribútumtáblázata A getElementById használata

Most megtanuljuk, hogyan fogadhatunk HTML oldalelemeket, és végezhetünk velük különféle manipulációkat (változtathatjuk majd pl. a szövegüket és a színüket, és sok más hasznos dolgot).

Tegyük fel, hogy van egy címkénk az oldalon, amelynek id attribútuma tesztre van beállítva. Írjunk egy linket erre a címkére az elem változóba. Ehhez a getElementById metódust kell használnunk, amely az elemet az azonosítójával kapja meg.

Ez a felvétel az onclick attribútum általunk megadott gombra kattintva történik. Ha erre a gombra kattintunk, a func függvény fog működni, amely a HTML oldalon talál egy elemet, amelynek azonosítója megegyezik a teszt és írás linket hozzá az elem változóhoz:

Most az elem változóban van egy hivatkozásunk arra az elemre, amelynek id attribútuma be van állítva, hogy tesztelje. Maga az elem változó tárgy.

Ez az objektum és a HTML page tag össze van kötve - az elem objektum tetszőleges tulajdonságát megváltoztathatjuk, és egyúttal látni fogjuk a HTML oldalon a kapott elemmel bekövetkező változásokat.

Lássuk, hogyan történik ez a gyakorlatban.

A JavaScripten keresztüli HTML-attribútumokkal való munka alapjai

Most elolvassuk és módosítjuk a címke attribútumait. Legyen ismét egy bemenetünk, amelynek azonosítója megegyezik a test értékkel, és egy gomb, amelyre kattintva elindítja a func funkciót:

A func függvényen belül megkapjuk a bemenetünket azonosítójávalés írjon rá hivatkozást az elem változóba:

function func() ( var elem = document.getElementById("teszt"); )

Most jelenítsük meg a bemeneti attribútumok tartalmát. Például a value attribútum eléréséhez a következőt kell beírni: elem.value , ahol az elem az a változó, amelyet a getElementById -vel állítunk be az elemünkre, a value pedig a minket érdeklő címke attribútuma.

Az attribútum tartalmát az alerten keresztül jeleníthetjük meg ilyen módon - alert(elem.value) - vagy írhatjuk valamilyen változóba. Csináljuk:

function func() ( var elem = document.getElementById("teszt"); alert(elem.value); //kiírja "!" )

Hasonló módon olvashatjuk más attribútumok értékét is, például - elem.id - az id attribútum értékét vesszük figyelembe, és így - elem.type - a type attribútum értékét. Lásd a példát:

function func() ( var elem = document.getElementById("teszt"); alert(elem.value); //kiírja: "!" alert(elem.id); //kiírja a "teszt" alert(elem.type); //kiírja a "szöveget" )

Az attribútumértékeket nemcsak olvasni, hanem módosítani is tudja. Például az value attribútum értékének megváltoztatásához csak hozzá kell rendelni az elem.value konstrukcióhoz:

function func() ( var elem = document.getElementById("teszt"); elem.value = "www"; //присвоим новое значение атрибуту value } !}

A HTML kód így fog kinézni (az érték attribútum értéke www lesz):

Nos, most az a legnehezebb, hogy nem lehet beírni az elem változót, hanem pontláncot építhetünk így:

function func() ( alert(document.getElementById("test").value); //kiírja a "!" )

Ugyanígy (láncban) felülírhatja az attribútumokat is:

function func() ( document.getElementById("teszt").value = "www"; }!}

A legtöbb esetben azonban kényelmesebb egy változó bevezetése. Hasonlítsa össze a két példát - most beírtam az elem változót és tetszőleges számú attribútumot tudok olvasni, miközben a getElementById ún. csak egyszer:

function func() ( var elem = document.getElementById("teszt"); elem.value = "www"; elem.type = "submit"; }!}

És most nem vezetek be új változót, ezért kétszer kell meghívnom a getElementById-et:

function func() ( document.getElementById("teszt").value = "www"; document.getElementById("test").type = "submit"; }!}

Véleményem szerint ez a kód bonyolultabb lett, bár egy sorral kevesebbet vesz igénybe. Ráadásul ha az id értéket akarom testről pl www-re változtatni, akkor sok helyen ezt kell tennem, ami nem túl kényelmes.

a böngészőhöz. Az elemek keresése az oldalon, amit a getElementById metódus végez, meglehetősen lassú művelet ( és általában minden oldalelemekkel végzett munka lassú művelet- Emlékezz erre).

Esetünkben, ha minden alkalommal használjuk a getElementById-et, akkor a böngésző minden alkalommal feldolgozza a HTML oldalt és többször megkeresi a megadott azonosítójú elemet (nem számít, hogy az azonosító ugyanaz - a böngésző mindent megtesz a műveleteket többször), haszontalan műveletek végrehajtása, amelyek lelassíthatják a böngésző működését.

Ha az elem változót használjuk, nem történik oldalkeresés (az elemet már megtaláltuk, és a hivatkozás az elem változóban található).

Kivételek: osztály és attribútumok

Ön már megtanulta, hogyan kell attribútumokkal dolgozni JavaScripten keresztül, és most itt az ideje, hogy elmondja, ez nem olyan egyszerű - az attribútumokkal való munka során van egy kivétel - ez az osztály attribútum.

Ez a szó különleges a JavaScriptben, ezért nem tudunk csak írni elem osztály osztály attribútum értékének olvasásához. Ehelyett írnod ​​kellene elem.className.

A következő példa az osztály attribútum értékét jeleníti meg:

function func() ( var elem = document.getElementById("teszt"); alert(elem.className); )

Egyébként vannak más attribútumok is, amelyeket másképpen hívnak meg, mint a tulajdonságot. Például a for() attribútumnak van egy htmlFor nevű tulajdonsága.

Ezzel dolgozni

Most egy speciális objektummal fogunk dolgozni ez , amely az aktuális elemre mutat (az az elem, amelyben az esemény történt). Ezenkívül azt jelzi, mintha ezt az elemet már megkapta volna a getElementById metódus.

Nézzük meg, hogyan lehet ezzel dolgozni, és mi a kényelmes ez a megközelítés.

Legyen az a feladatunk, hogy a bemenetre kattintva megjelenítsük a képernyőn annak értékét.

Egyelőre csak azt tudja, hogyan kell valami ilyesmit csinálni:

function func() ( var elem = document.getElementById("teszt"); alert(elem.value); )

Elvileg ez a megoldás jó, de most képzeljük el, hogy sok bemenetünk van, és mindegyikre kattintva meg kell jelenítenünk az értékét.

Ebben az esetben valami ilyesmit kapunk:

function func1() ( var elem = document.getElementById("teszt1"); alert(elem.value); ) function func2() ( var elem = document.getElementById("teszt2"); alert(elem.value); ) function func3() ( var elem = document.getElementById("teszt3"); alert(elem.value); )

Most már jól látható megközelítésünk hátránya - minden bemenethez létre kell hoznunk saját kattintásfeldolgozó funkciót, és ezek a funkciók szinte ugyanazt végzik.

Ha 10 bemenetünk van, akkor 10 függvényt kell készítenünk, ami nem kényelmes.

Egyszerűsítsük a feladatunkat: az aktuális elem id-jét paraméterként adjuk át a függvénynek. És a sok funkció helyett minden egy funkcióra redukálódik:

függvény func(id) ( var elem = document.getElementById(id); alert(elem.value); )

Ennek a megoldásnak azonban még mindig van egy hátránya - minden elemnek más azonosítót kell megadnia, ami szintén kissé kényelmetlen.

Tehát végre fontoljuk meg a probléma megoldását ezen keresztül.

Tegyük úgy, hogy kattintásra minden bemenet megjelenítse a tartalmát. Ehhez adja át a this objektumot függvényparaméterként, így: func(this) .

Ezt paraméterként adjuk át a függvénynek, és az elem változóba kerül. Ez az elem úgy viselkedik, mintha így fogadták volna: var elem = document.getElementById(...), de nem kell így átvenned, már minden készen van és használhatod. Például az elem.value a bemenetünk értékére mutat, és így tovább.

Tehát itt van a legegyszerűbb megoldás a problémánkra:

function func(elem) ( alert(elem.value); )

CSS alapok

A JavaScriptben a CSS-tulajdonságokkal való munka az elemen lévő style attribútum értékének módosításával történik. Például a szín megváltoztatásához létre kell hoznia a következő láncot: elem.style.color- és rendelje hozzá a kívánt színértéket:

function func() ( var elem = document.getElementById("teszt"); elem.style.color = "piros"; )

Az is lehet, hogy nem az elem változót vezetjük be, hanem építünk nagyon hosszú lánc.

Bármely HTML-dokumentum megnyitásakor a böngésző először elemzi annak tartalmát, és ennek alapján létrehozza a HTML-dokumentum objektummodelljét, vagy rövidebben DOM-ot.

A DOM hierarchikusan egymásba ágyazott objektumokból, úgynevezett csomópontokból áll. A struktúra minden csomópontja az oldalon található HTML elemet képvisel.

A DOM használatával interakcióba léphet ( olvasni, módosítani, törölni) szkriptekből származó HTML dokumentumok tartalmával.

Alább látható a dokumentum HTML-kódja és a DOM, amelyet a böngésző e kód alapján hozna létre:

HTML DOM HTML DOM.

Sziasztok.

A képen látható összes téglalap objektum (vagy csomópont). A különböző típusú csomók különböző színekkel vannak jelölve a képen.

A Dokumentum csomópont piros színnel van jelölve. Minden DOM-hívásnak ennek a csomópontnak a hívásával kell kezdődnie.

Az elem csomópontjai zölddel vannak jelölve. Az oldalon lévő minden HTML-elemhez a böngésző létrehoz egy megfelelő elemcsomópontot.

Az elemek tartalma szöveges csomópontokban tárolódik. A szöveges csomópontok az ábrán kékkel vannak jelölve.

Minden HTML elem attribútumhoz létrejön egy attribútum csomópont. Az attribútum csomópont rózsaszínnel van jelölve a diagramon.

Ne feledje, hogy a szöveg mindig a szöveg csomópontjaiban van tárolva, és nem az elem tulajdonsága. Azok. egy HTML-elem tartalmának eléréséhez hozzá kell férnie annak szövegcsomópontjának tulajdonságához.

Csomópontok közötti kapcsolatok

Az objektumstruktúra csomópontjai kapcsolatban állnak egymással. Számos speciális kifejezés létezik a csomópontok közötti kapcsolatok leírására:

szülő csomópont ( szülő csomópont) - a szülőcsomópont a kérdéses objektumhoz képest az a csomópont, amelybe a kérdéses objektum be van ágyazva. Diagramunkban a csomópontok és a

szülő. Egy csomópont esetében a szülőcsomópont .

Gyermek csomópontok ( gyermek csomópont) - a leszármazott csomópont a figyelembe vett objektumhoz képest olyan csomópont, amely a vizsgált objektumba van beágyazva. Sémánkban a csomóponthoz és a

Ők leszármazottak. Csomópont esetében a gyermek .

Testvér csomópontok ( testvér csomópont) - olyan csomópontok, amelyek azonos beágyazási szinten vannak a szülőcsomópontjukhoz képest. Az ábránkon a testvér csomópontok és ,

A DOM legfelső csomópontját gyökérnek nevezzük. A diagramunkban a gyökér az (mivel a dokumentum objektum nem része a DOM-nak).

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á.

Ebben a modellben az objektumok szinte mindenből, 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 kapcsolatokat az alapján alakítjuk ki, hogy a HTML-elemek hogyan helyezkednek el egymáshoz képest 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 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űen fogalmazva, a DOM API rengeteg különböző objektum, tulajdonságaik és metódusaik gyűjteménye, amelyek segítségével olvashatjuk és módosíthatjuk a DOM-ot.

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 rengeteg módszert biztosít számunkra (fejlesztők számára), amelyekkel mindent megváltoztathatunk az oldalon, valamint interakcióba léphetünk a felhasználóval. Azok. ez a programozói felület lehetővé teszi összetett felületek, űrlapok létrehozását, felhasználói műveletek feldolgozását, különféle elemek hozzáadását és eltávolítását az oldalon, azok tartalmának, tulajdonságainak (attribútumainak) megváltoztatását é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 további paraméterekkel – attribútumokkal – rendelkezhetnek.

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:

Oldal címe Cikk címe Cikk szakasz

Cikk tartalma

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?

A fent leírtak szerint a böngésző az oldal forráskódjában található HTML elemek és egyéb entitások alapján egy fát épít fel. 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 az így kapott DOM-fát, hanem egy API-t is biztosít számunkra a kényelmes munkavégzéshez JavaScripten keresztül.

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

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 alkotja. A fej (...) és a test (...) csomópontok szülőkapcsolatban vannak a html-hez. Egymáshoz képest testvérek, mert van egy szülője. A fejcsomópont a címhez kapcsolódik (lt;title>...), és annak gyermeke. A h1 és div csomópontok a testhez kapcsolódnak, számukra ez a szülő. A div csomópont kapcsolódik a h2(...) és p()-hez, ezek a gyermekei.

A fa, amint fentebb megjegyeztük, az objektum (csomópont) dokumentumból indul. Ennek viszont van egy gyermekcsomópontja, amelyet a html (...) elem alkot. A fej(...) és a test(...) elemek a html-ben vannak, és ezért ennek 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(...) és p() elemeket. 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 Document Object Model vagy "DOM" egy programozási felület a weboldalak elemeinek elérésére. Alapvetően ez egy oldal API, amely lehetővé teszi az oldal tartalmának, szerkezetének és stílusainak olvasását és kezelését. Lássuk, hogyan működik és hogyan működik.

Hogyan épül fel egy weboldal?

A HTML forrásdokumentum megjeleníthető, stilizált és interaktív oldallá alakításának folyamatát "kritikus megjelenítési útvonalnak" nevezik. Bár ez a folyamat több lépésre bontható, amint azt A kritikus megjelenítési útvonal megértése részben leírtam, ezek a lépések nagyjából két lépésre csoportosíthatók. Az elsőben a böngésző elemzi a dokumentumot, hogy meghatározza, mi jelenjen meg végül az oldalon, a másodikban pedig a böngésző végzi el a megjelenítést.

Az első szakasz eredménye az úgynevezett "renderfa". A renderelési fa az oldalon megjelenített HTML-elemeket és a hozzájuk tartozó stílusokat reprezentálja. A fa létrehozásához a böngészőnek két dologra van szüksége:

CSSOM, az elemekkel kapcsolatos stílusok megjelenítése

DOM, elemek ábrázolása

Miből készül a DOM?

A DOM az eredeti HTML dokumentum objektum reprezentációja. Van némi eltérése, amint azt alább látni fogjuk, de lényegében egy HTML-dokumentum szerkezetét és tartalmát próbálja átalakítani egy objektummodellné, amelyet különféle programok is használhatnak.

A DOM objektumok szerkezetét az úgynevezett "csomópontfa" képviseli. Azért nevezték el így, mert egyszülős fának tekinthető, amely több gyermekágra ágazik, amelyek mindegyikének lehetnek levelei. Ebben az esetben a szülő "elem" a gyökérelem, a gyermek "ágak" egymásba ágyazott elemek, a "levelek" pedig az elemeken belüli tartalom.

Vegyük ezt a HTML dokumentumot példaként:

Az első weboldalam Hello, world!

Hogy vagy?

Ez a dokumentum a következő csomópontok fajaként ábrázolható:

• html
  • fej
    • cím
      • Az első weblapom
  • test
    • h1
      • Helló Világ!
    • p
      • Hogy vagy?

Mi nem a DOM

A fenti példában úgy tűnik, hogy a DOM az eredeti HTML-dokumentum 1:1-es leképezése. Azonban, mint mondtam, vannak különbségek. Ahhoz, hogy teljesen megértsük, mi az a DOM, meg kell vizsgálnunk, mi nem az.

A DOM nem az eredeti HTML másolata

Bár a DOM HTML-dokumentumból jön létre, nem mindig pontosan ugyanaz. Két esetben a DOM eltérhet az eredeti HTML-től.

1. Ha a HTML jelölési hibákat tartalmaz

A DOM egy interfész a HTML-dokumentum tényleges (azaz már renderelt) elemeinek elérésére. A DOM létrehozása során a böngésző maga is kijavíthat néhány hibát a HTML-kódban.

Tekintsük ezt a HTML dokumentumot példaként:

Helló Világ!

A dokumentumból hiányoznak az elemek, ami a HTML-hez követelmény. De ha megnézzük a kapott DOM-fát, láthatjuk, hogy ez javítva lett:

• html
  • fej
  • test
    • Helló Világ!
  2. Ha a DOM-ot Javascript kód módosítja

  Amellett, hogy egy HTML-dokumentum tartalmának megtekintésére szolgáló felület, maga a DOM is módosítható.

  Létrehozhatunk például további csomópontokat a DOM-hoz Javascript használatával.

  Var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("Új vagyok!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);

  Ez a kód megváltoztatja a DOM-ot, de a változtatások nem jelennek meg a HTML dokumentumban.

  A DOM nem az, amit a böngészőben lát (azaz a renderelési fa)

  A böngésző nézetablakában a renderelési fa látható, amely, mint mondtam, a DOM és a CSSOM kombinációja. A DOM-ot az különbözteti meg a renderelési fától, hogy az utóbbi csak abból áll, ami végül megjelenik a képernyőn.

  Mivel a renderelési fa csak a megjelenítettekkel foglalkozik, kizárja a vizuálisan rejtett elemeket. Például olyan elemek, amelyek stílusa megjelenítéssel: none .

  Helló Világ!

  Hogy vagy?

  A DOM tartalmazza az elemet

  • html
    • fej
    • test
      • h1
        • Helló Világ!
      • p
        • Hogy vagy?

  A renderelési fa azonban, és így a nézetablakban látható, nem fog szerepelni ebben az elemben.

  • html
    • test
      • h1
        • Helló Világ!
  A DOM nem az, amit a DevTools megjelenít

  Ez a különbség valamivel kisebb, mert a DevTools Element Inspector adja a legközelebbi közelítést a böngészőben található DOM-hoz. A DevTools ellenőr azonban olyan további információkat tartalmaz, amelyek nem szerepelnek a DOM-ban.

  A legjobb példa erre a CSS pszeudoelemek. A ::before és ::aff választókkal létrehozott pszeudoelemek a CSSOM és a renderelési fa részét képezik, de technikailag nem részei a DOM-nak. Ennek az az oka, hogy a DOM csak az eredeti HTML-dokumentumból jön létre, az elemre alkalmazott stílusok nélkül.

  Annak ellenére, hogy a pszeudoelemek nem részei a DOM-nak, a devtools elemellenőrünkben megtalálhatók.

  
  Összegzés

  A DOM egy interfész egy HTML dokumentumhoz. A böngészők az első lépésként használják annak meghatározásában, hogy mit jelenítsenek meg a nézetablakban, a Javascript kód pedig az oldal tartalmának, szerkezetének vagy stílusának megváltoztatásához.

Munka a DOM modellel

Minden ablak objektum rendelkezik egy dokumentum tulajdonsággal, amely egy dokumentum objektumra hivatkozik. 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

A Document Object Model (DOM) egy alapvető alkalmazásprogramozási felület, amely lehetővé teszi a HTML és XML dokumentumok tartalmának kezelését. 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 olyan elemeket vagy címkéket képviselő csomópontokat tartalmaz, mint például é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:

Mintadokumentum Ez egy HTML dokumentum

Példa egyszerű szöveg.

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

Azok számára, akik még nem ismerik a fastruktúrákat a számítógépes programozásban, hasznos tudniuk, 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 dokumentumcsomópont, amelyet egy csomópont objektum képvisel. Vegye figyelembe, hogy az ábra három különböző típusú csomót mutat. 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

A legtöbb JavaScript kliensprogram munkája valamilyen módon a dokumentumelemek 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. Egy elemet egyedi id attribútumértéke alapján választhat ki a Dokumentum objektum getElementById() metódusával:

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.

Az Internet Explorer IE8-nál korábbi verzióiban a getElementById() metódus megkeresi az id attribútumértékeket a kis- és nagybetűk megkülönböztetése nélkül, és a name attribútum értékével megegyező elemeket is visszaad.

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 engedélyezett, beleértve az űrlapokat, űrlapelemeket és elemeket és .

A HTML-elemeket névattribútumuk értékei alapján választhatja ki a Dokumentum objektum getElementsByName() metódusával:

Var radiobuttons = document.getElementsByName("kedvenc_szín");

A getElementsByName() metódust nem a Document osztály határozza meg, hanem a HTMLDocument osztály, így csak HTML dokumentumokban érhető el, XML dokumentumokban nem. Egy NodeList objektumot ad vissza, amely Element objektumok csak olvasható tömbjeként viselkedik.

Az IE-ben a getElementsByName() metódus olyan elemeket is visszaad, amelyek id attribútumértékei megegyeznek a megadott értékkel. A böngészők közötti kompatibilitás biztosítása érdekében ügyeljen az attribútumértékek kiválasztására, és ne használja ugyanazokat a karakterláncokat a név és az azonosító attribútumértékeihez.

Elemek kiválasztása típus szerint

A Document objektum getElementsByTagName() metódusa lehetővé teszi az összes megadott típusú (vagy címkenév szerinti) HTML vagy XML elem kiválasztását. Például egy csak olvasható tömbszerű objektum létrehozásához, amely a dokumentum összes elemének elemobjektumait tartalmazza, a következőket teheti:

var spans = document.getElementsByTagName("span");

A getElementsByName() metódushoz hasonlóan a getElementsByTagName() egy NodeList objektumot ad vissza. A NodeList tömbben a dokumentumelemek abban a sorrendben kerülnek be, ahogyan a dokumentumban szerepelnek, azaz. első elem

A dokumentumban a következők közül választhat:

Var firstParagraph = document.getElementsByTagName("p");

A HTML-címkenevek nem tesznek különbséget a kis- és nagybetűk között, és ha a getElementsByTagName()-t egy HTML-dokumentumra alkalmazzák, akkor a címke nevével összehasonlítja a kis- és nagybetűket. A fent létrehozott spans változó például minden olyan elemet is tartalmazni fog, amely ként van írva.

A dokumentum összes elemét tartalmazó NodeList létrehozásához a "*" helyettesítő karaktert adja át a getElementsByTagName() metódusnak.

Ezenkívül az Element osztály a getElementsByTagName() metódust is meghatározza. Pontosan úgy működik, mint a Document osztályban lévő metódus verziója, de csak azokat az elemeket választja ki, amelyek a metódus meghívására szolgáló elem gyermekei. Vagyis keresse meg az összes elemet az első elemen belül

Ez a következőképpen lehetséges:

Var firstParagraph = document.getElementsByTagName("p"); var firstParagraphSpans = firstParagraph.getElementsByTagName("span");

Történelmi okokból a HTMLDocument osztály speciális tulajdonságokat határoz meg bizonyos típusú csomópontok eléréséhez. Tulajdonságok képeket, formákÉs linkeket, például olyan objektumokra utal, amelyek csak olvasható, elemeket tartalmazó tömbökként viselkednek , És (de csak azokat a címkéket , amelyek egy href attribútummal rendelkeznek). Ezek a tulajdonságok a HTMLCollection objektumokra vonatkoznak, amelyek sokban hasonlítanak a NodeList objektumokhoz, de emellett az id és name attribútumok értékével is indexelhetők.

A HTMLDocument objektum a beágyazások és a beépülő modulok szinonim tulajdonságait is meghatározza, amelyek a HTMLCollection elemek gyűjteményei. A horgonyok tulajdonsága nem szabványos, de használható elemek elérésére A, amely rendelkezik name attribútummal, de nincs href attribútummal. A scripts tulajdonságot a HTML5 szabvány határozza meg, és HTMLCollection elemek gyűjteménye.

Ezenkívül a HTMLDocument objektum két tulajdonságot határoz meg, amelyek mindegyike nem egy gyűjteményre, hanem egyetlen elemre vonatkozik. A document.body tulajdonság egy HTML dokumentumelemet, a document.head tulajdonság pedig a . Ezek a tulajdonságok mindig a dokumentumban vannak meghatározva: akkor is, ha az eredeti dokumentumban nincsenek és elemek, a böngésző implicit módon létrehozza őket. A Document objektum documentElement tulajdonsága a dokumentum gyökérelemére vonatkozik. A HTML dokumentumokban mindig a .

Elemek kiválasztása CSS osztály szerint

A HTML osztály attribútum értéke nulla vagy több azonosítóból álló lista, szóközökkel elválasztva. Lehetővé teszi a kapcsolódó dokumentumelemek halmazainak meghatározását: minden olyan elem, amelynek az osztály attribútuma azonos azonosítóval rendelkezik, ugyanannak a halmaznak a része. Az osztály szó a JavaScriptben van lefoglalva, így az ügyféloldali JavaScript a className tulajdonságot használja a HTML class attribútum értékének tárolására.

Általában az osztály attribútumot a CSS lépcsőzetes stíluslapjaival együtt használják, hogy egy közös megjelenítési stílust alkalmazzanak egy halmaz összes tagjára. Mindazonáltal a HTML5 szabvány meghatározza a getElementsByClassName() metódust, amely lehetővé teszi a dokumentumelemek készleteinek kiválasztását az osztályattribútumokban szereplő azonosítók alapján.

A getElementsByTagName() metódushoz hasonlóan a getElementsByClassName() metódus is meghívható HTML dokumentumokon és HTML elemeken is, és egy "élő" NodeList objektumot ad vissza, amely tartalmazza a keresési feltételeknek megfelelő összes dokumentumot vagy elemet.

A getElementsByClassName() metódus egyetlen karakterlánc-argumentumot vesz fel, de maga a karakterlánc több azonosítót is tartalmazhat szóközzel elválasztva. Minden olyan elemet, amelynek osztályattribútumai tartalmazzák az összes megadott azonosítót, egyezőnek tekintjük. Az azonosítók sorrendje nem számít. Vegye figyelembe, hogy mind a class attribútumban, mind a getElementsByClassName() metódus argumentumában az osztályazonosítók szóközzel vannak elválasztva, nem vesszővel.

Íme néhány példa a getElementsByClassName() metódus használatára:

// A "warning" osztályú összes elem megkeresése var warnings = document.getElementsByClassName("warning"); // A "log" azonosítójú elem összes leszármazottjának megkeresése // "error" és "fatal" osztályokkal var log = document.getElementById("log"); var fatal = log.getElementsByClassName("végzetes hiba");

Elemek kiválasztása CSS-szelektorok segítségével

A CSS Cascading Style Sheets nagyon hatékony szintaktikai konstrukciókkal, úgynevezett szelektorokkal rendelkezik, amelyek lehetővé teszik az elemek vagy elemkészletek leírását egy dokumentumban. A CSS3-szelektorok szabványosítása mellett egy másik W3C-szabvány, a Selectors API, JavaScript-módszereket határoz meg az adott szelektornak megfelelő elemek lekéréséhez.

Ennek az API-nak a kulcsa a Document objektum querySelectorAll() metódusa. Egyetlen karakterlánc-argumentumot vesz igénybe egy CSS-szelektorral, és egy NodeList objektumot ad vissza, amely a dokumentum összes olyan elemét képviseli, amely megfelel a választónak.

A querySelectorAll() metóduson kívül a dokumentumobjektum a querySelectorAll() metódushoz hasonló querySelector() metódust is definiál, azzal a különbséggel, hogy csak az első (dokumentum sorrendben) megfelelő elemet adja vissza, vagy nullát, ha nincsenek egyező elemek. .

Ezt a két metódust is az Elements osztály határozza meg. Amikor egy elemre hívják őket, a teljes dokumentumban megkeresik az adott szelektorhoz való illeszkedést, majd az eredményt úgy szűrik, hogy csak a használt elem leszármazottai maradjanak meg. Ez a megközelítés ellentmondásosnak tűnhet, mivel azt jelenti, hogy a választó karakterlánc tartalmazhatja az egyeztetett elem őseit.

Dokumentumszerkezet és dokumentumnavigáció

Egy-egy dokumentumelem kiválasztása után esetenként meg kell találni a dokumentum szerkezetileg kapcsolódó részeit (szülő, testvér, gyermek elem). A Dokumentum objektum felfogható a csomópont objektumok fájának. A Node típus olyan tulajdonságokat határoz meg, amelyek lehetővé teszik az ilyen fák közötti navigálást. Van egy másik alkalmazási felület a dokumentumban való navigáláshoz, mint az Elem objektumok fája.

Dokumentumok csomóponti fákként

A Dokumentum objektum, az Elem objektumok és a Szöveg objektumok, amelyek a dokumentum szövegrészeit reprezentálják, mind csomópont objektumok. A Node osztály a következő fontos tulajdonságokat határozza meg:

szülőcsomópont

Ennek a csomópontnak a szülőcsomópontja, vagy nulla olyan csomópontok esetén, amelyeknek nincs szülője, például a dokumentum.

gyermekNodes

Olvasható tömbszerű objektum (NodeList), amely a gyermek csomópontok reprezentációját biztosítja.

firstChild, lastChild

Az első és az utolsó gyermek csomópont, vagy nulla, ha az adott csomópontnak nincs gyermeke.

következőTestvér, előzőTestvér

A következő és előző testvércsomópont. A testvércsomópontok két csomópont, amelyeknek ugyanaz a szülője. Rendelésük megfelel a dokumentumban szereplő sorrendnek. Ezek a tulajdonságok összekapcsolják a csomópontokat egy duplán csatolt listában.

nodeType

Ennek a csomópontnak a típusa. A Dokumentum típusú csomópontok értéke 9 ebben a tulajdonságban. Element típusú csomópontok - 1. érték. Szöveg csomópontok - Text - érték 3. Comments típusú csomópontok - 8. érték és DocumentFragment típusú csomópontok - 11. érték.

nodeValue

A Szöveg és a Megjegyzés csomópontok szöveges tartalma.

nodeName

Egy elem címke neve, amelyben az összes karaktert nagybetűssé alakítja.

A Node osztály ezen tulajdonságaival hivatkozhat a Dokumentum objektum első gyermekcsomópontjának második gyermekcsomópontjára, az alábbiak szerint:

Document.childNodes.childNodes == document.firstChild.firstChild.nextTestvér

Tegyük fel, hogy a kérdéses dokumentum így néz ki:

Teszteld a Hello World!

Ekkor az első gyermekcsomópont második gyermekcsomópontja lesz az elem. Tartalmazza az 1 értéket a nodeType tulajdonságban és a "BODY" értéket a nodeName tulajdonságban.

Azonban vegye figyelembe, hogy ez az API rendkívül érzékeny a dokumentum szövegében bekövetkezett változásokra. Például, ha egyetlen újsort ad hozzá a és címkék közé ebben a dokumentumban, ez az újsor karakter lesz az első gyermekcsomópont első gyermekcsomópontja (Szövegcsomópont), és a második gyermekcsomópont lesz az elem, nem pedig a .

Dokumentumok elemfákként

Ha maguk a dokumentumelemek az elsődlegesek, nem pedig a bennük lévő szöveg (és a közöttük lévő szóköz), sokkal kényelmesebb olyan API-t használni, amely lehetővé teszi, hogy a dokumentumot Element objektumok faként értelmezze, figyelmen kívül hagyva a szöveget. és megjegyzés csomópontok, amelyek szintén a dokumentum részét képezik.

Ennek az API-nak az első része az Element objektumok gyermektulajdona. A childNodes tulajdonsághoz hasonlóan értéke egy NodeList objektum. A childNodes tulajdonságtól eltérően azonban a gyermeklista csak Elem objektumokat tartalmaz.

Vegye figyelembe, hogy a Szöveg és a Megjegyzés csomópontoknak nincsenek gyermekcsomópontjai. Ez azt jelenti, hogy a fent leírt Node.parentNode tulajdonság soha nem ad vissza szöveg vagy megjegyzés csomópontokat. Bármely Element objektum szülőNode tulajdonságának értéke mindig egy másik Element objektum vagy a fa gyökere, egy dokumentum vagy dokumentumtöredék objektum.

A dokumentumelem-navigációs API második része az Element objektum tulajdonságai, hasonlóan a Node objektum gyermek- és testvércsomópontjaihoz való hozzáférés tulajdonságaihoz:

firstElementChild, lastElementChild

Hasonló a firstChild és lastChild tulajdonságokhoz, de gyermekelemeket ad vissza.

nextElementSibling, previousElementSibling

Hasonló a nextSibling és previousSibling tulajdonságokhoz, de testvér elemeket ad vissza.

gyermekElementCount

A gyermekelemek száma. Ugyanazt az értéket adja vissza, mint a children.length tulajdonság.

Ezek a gyermek- és testvér-hozzáférési tulajdonságok szabványosítva vannak, és az IE kivételével az összes jelenlegi böngészőben implementálva vannak.