A DOM-ot gyakran DOM-fának nevezik, mert csomópontoknak nevezett objektumok fából áll. Megtanulta, mi az a Document Object Model (DOM), hogyan lehet elérni a dokumentumobjektumot és megváltoztatni a tulajdonságait a konzol segítségével, valamint megtanultuk a HTML forráskód és a DOM közötti különbséget.

Ebben a kézikönyvben megtalálja a JavaScript és a DOM használatához szükséges HTML terminológiát, megtudhatja, mi az a fa, és DOM csomópontok, és megtanulják azonosítani a leggyakoribb csomóponttípusokat. A DOM interaktív módosításához JavaScript programot is létrehozhat a konzolban.

HTML terminológia

A HTML- és JavaScript-kifejezések megértése elengedhetetlen a DOM-mal való munkához. Vessünk egy pillantást a főbb kifejezésekre.

Nézd meg ezt a HTML elemet:

itthon

Van egy horgonyja, amely egy hivatkozás az index.html oldalra.

• a - címke
• href - attribútum
• html - attribútum értéke
• Kezdőlap - szöveg.

A nyitó és záró tagek között minden HTML elem.

Térjünk vissza az index.html fájlhoz az előző oktatóanyagból:

A DOM megtanulása


Dokumentum objektum modell

A JavaScript segítségével a legegyszerűbben az id attribútummal lehet elérni az elemeket. Adjuk hozzá a fenti hivatkozást az index.html fájlhoz az id="nav" paraméterrel.

...

Dokumentum objektum modell
itthon

...

Töltse be (vagy frissítse) az oldalt egy böngészőablakban, és nézze meg a DOM-ot, hogy megbizonyosodjon arról, hogy a kód frissült.

Ezután használja a getElementById() metódust a teljes elem eléréséhez. Írja be a következőket a konzolba:

document.getElementById("nav");
itthon

A getElementById() metódus a teljes elemet lekéri. Mostantól ahelyett, hogy minden alkalommal be kell írnia ezt az objektumot és metódust, amikor hozzá kell férnie a navigációs hivatkozáshoz, az elemet változóba helyezheti, hogy megkönnyítse a munkavégzést.

let navLink = document.getElementById("nav");

A navLink változó tartalmazza a horgonyt. Itt egyszerűen módosíthatja az attribútumokat és az értékeket. Például egy hivatkozás helyének megváltoztatásához módosítsa a href attribútumot:

navLink.href = "https://www.wikipedia.org";

A szöveget a textContent tulajdonság újbóli hozzárendelésével is módosíthatja:

navLink.textContent = "Navigáljon a Wikipédiára";

Most, ha megnézi ezt az elemet a konzolon, vagy bejelöli az Elements címkét, látni fogja, hogyan frissült.

navlink;
Navigáljon a Wikipédiához

A változtatások a kezelőfelületen is megjelennek.

Az oldal frissítése az összes eredeti értéket visszaadja.

Ezen a ponton meg kell értenie, hogyan használhatja a dokumentummódszert egy elem eléréséhez, hogyan rendelhet hozzá egy elemet egy változóhoz, és hogyan módosíthatja az elem tulajdonságait és értékeit.

Fa és DOM csomópontok

A DOM minden eleme csomópontként van definiálva. Sokféle csomópont létezik, de három fővel fog leggyakrabban dolgozni:

Elem csomópont

Szöveg csomópont

Megjegyzés csomópont

Ha egy HTML-elem egy elem a DOM-ban, akkor elemcsomópontnak nevezzük. Az elemen kívüli bármely szöveg egy szövegcsomópont, és HTML megjegyzés– egy megjegyzés csomópont. A három csomóponttípuson kívül maga a dokumentumobjektum a dokumentumcsomópont, amely az összes többi csomópont gyökércsomópontja.

A DOM egy beágyazott csomópontok fastruktúrájából áll, amelyet gyakran DOM-fának neveznek. Valószínűleg tudja, mi a családfa - ez a családi kötelékek sematikus ábrázolása, amely szülőkből, gyerekekből és közvetlen családból áll. A DOM csomópontjait más csomópontokhoz való viszonyuk alapján szülő- és gyermekcsomópontoknak is nevezik.

Hozzon létre például egy nodes.html fájlt. adjunk hozzá szöveges csomópontot, valamint megjegyzés- és elemcsomópontokat.

Ismerkedés a csomópontokról


Egy elem csomópont

Szöveges csomópont.

A html elem csomópontja a szülő. fej és test html gyermek csomópontok. A törzs három gyermek csomópontot tartalmaz, és mindegyik ugyanazon a szinten van – a csomópont típusa nem befolyásolja a beágyazás szintjét.

Megjegyzés: Ha a HTML által generált DOM-mal dolgozik, padding forráskód A HTML sok üres szövegcsomópontot hoz létre, amelyek nem lesznek láthatók a DevTools Elements lapján. Erről bővebben a linken.

Csomópont típus meghatározása

A dokumentumban minden csomópontnak van egy típusa, amely a nodeType tulajdonságon keresztül érhető el. A Mozilla Developer Network frissített listával rendelkezik az összes csomóponttípus-állandóról. Az alábbiakban egy táblázat található a leggyakoribb csomóponttípusokról.

A Fejlesztői eszközök Elemek lapján észreveheti, hogy valahányszor rákattint és kijelöl egy sort a DOM-ban, az == $0 érték jelenik meg mellette. Ez nagyon kényelmes módja elérheti az aktuális aktív elemet.

A node.html konzolban kattintson a törzs első elemére (h1).

A konzol segítségével a nodeType tulajdonság segítségével megtudhatja a kiválasztott csomópont típusát.

$0.nodeType;
1

A h1 elem kiválasztásával 1-et fog látni kimenetként, ami az ELEMENT_NODE-ra vonatkozik. Tegye ugyanezt a többi csomóponttal, és ezek rendre 3-at és 8-at adnak vissza.

Ha tudja, hogyan lehet hozzáférni egy elemhez, láthatja a csomópont típusát anélkül, hogy kiemelné az elemeket a DOM-ban.

document.body.nodeType;
1

A nodeType mellett a nodeValue tulajdonságot is használhatja egy szöveges vagy megjegyzés csomópont értékének, a nodeName pedig az elemcímke lekéréséhez.

A DOM módosítása az eseményekkel

Eddig láthatta, hogyan módosíthatja a DOM-ot a konzolban, és az ilyen változtatások ideiglenesek; minden alkalommal, amikor az oldal frissül, minden változtatás elvész. Ebben frissítette az oldal háttérszínét a konzolban. Próbálja meg kombinálni az ebben az oktatóanyagban tanultakat a már ismertekkel, hogy létrehozzon egy interaktív gombot, amely megváltoztatja a háttérszínt.

Menjen vissza az index.html fájlhoz, és adjon hozzá egy gombelemet azonosítóval. Ezenkívül hozzá kell adnia egy hivatkozást az új fájlhoz az új js/scripts.js könyvtárban.

A DOM megtanulása


Dokumentum objektum modell
Háttérszín módosítása

Az esemény a JavaScriptben a felhasználó által végrehajtott művelet. A felhasználó egy elem fölé viszi az egérmutatót, rákattint vagy megnyom egy bizonyos billentyűt a billentyűzeten – ezek mind események. Ebben az esetben a gombnak egy műveletet kell végrehajtania, amikor a felhasználó rákattint. Ehhez hozzá kell adni egy eseményfigyelőt. Hozzon létre egy scripts.js fájlt, és mentse el egy új js könyvtárba. Meg kell határozni egy gombelemet a fájlban, és hozzá kell rendelni egy változóhoz.

Az addEventListener() metódus használatával a gomb figyeli a kattintásokat, és a kattintás után végrehajtja a funkcióját.

...
button.addEventListener("click", () => (
// az akció ide fog menni
});

A funkción belül el kell helyeznie az előző kézikönyv kódját, hogy a háttérszínt fuksziára módosítsa.

...

Így néz ki a script:

let button = document.getElementById("changeBackground");
button.addEventListener("click", () => (
document.body.style.backgroundColor = "fukszia";
});

Mentse és zárja be a fájlt. Frissítse az index.html oldalt a böngészőben. Kattintson az új gombra, és az oldal háttérszíne megváltozik.

Címkék: ,

Az oldalon végzett munka és dinamikus változtatások fő eszköze a DOM (Document Object Model) – egy XML/HTML dokumentumokhoz használt objektummodell.

A DOM modell szerint a dokumentum egy hierarchia.
Minden HTML címke külön csomópont-elemet alkot, minden szövegrész egy szövegelemet, és így tovább.

Egyszerűen fogalmazva, a DOM egy dokumentumot címkék faként ábrázol. Ezt a fát címkék és az oldal szövegrészletei egymásba ágyazott szerkezete alkotja, amelyek mindegyike külön csomópontot alkot.

A legegyszerűbb DOM

Kezdésként készítsük el a DOM-fát a következő dokumentumhoz.

Fejléc Gyönyörű dokumentum

A legkülső címke a , tehát a fa róla indul el.

Belül két csomópont van: és - ezek gyermekcsomópontjaivá válnak a számára.

Címkék formája elem csomópontok(elem csomópont). Szöveg elküldve szöveges csomópontok(szöveg csomópont). Mindkettő a DOM-fa peer csomópontja.

Bonyolultabb példa

Fontolja meg most egy fontosabb oldalt:

A jávorszarvasról Az igazság a jávorszarvasról.

A jávorszarvas okos állat

.. És alattomos

A hierarchia gyökéreleme a html . Két leszármazottja van. Az első a fej, a második a test. És így tovább, minden beágyazott címke a fenti címke gyermeke:

Ezen az ábrán a csomópontok-elemek kék, a szöveges elemek feketével vannak jelölve.

A fát kék csomópont elemek - HTML címkék - alkotják.

És így néz ki a fa, ha közvetlenül a HTML oldalra rajzolja:

Az ábrán látható fa egyébként nem veszi figyelembe a csak szóköz karakterekből álló szöveget. Például egy ilyen szöveges csomópontnak közvetlenül a után kell lennie. Az ilyen "üres" csomópontokat nem tartalmazó DOM-ot hívják "normalizált".

Nézzünk egy kicsit összetettebb dokumentumot.

Adatdokumentum

• Gondosan
• Információ

Oroszországban készült

A legfelső címke a html, fej és test gyermekei vannak, és így tovább. Az eredmény egy címkefa:

Attribútumok

Ebben a példában a csomópontok attribútumai: style , class , id . Általában az attribútumok a DOM csomópontjainak is minősülnek, amelyek szülője az a DOM-elem, amelyen megadásra kerültek.

A webes programozásban azonban ezeket a dzsungeleket általában nem mászik meg, és az attribútumokat egyszerűen a DOM csomópont tulajdonságainak tekintik, amelyek, mint később látni fogjuk, a programozó kérésére beállíthatók és módosíthatók.

Valójában ez titok, de a DOCTYPE egyben egy DOM-csomópont is, és a DOM-fában található a HTML-től balra (ez a tény az ábrán el van rejtve).

P.S. Ami a titkot illeti – persze vicc, de igazából nem mindenki tud róla. Nehéz elképzelni, hol lehet hasznos ez a tudás...

Normalizálás különböző böngészőkben

HTML elemzésekor internet böngésző azonnal létrehoz normalizálva DOM, amely nem hoz létre csomópontokat üres szövegből.

A Firefoxnak más a véleménye, minden szövegrészletből létrehoz egy DOM elemet.
Ezért a Firefoxban a dokumentum fája így néz ki:

Az ábrán a rövidség kedvéért a szöveg csomópontjait egyszerűen hash jelöli. szervezetnek 7 gyereke van 3 helyett.

Az Operának is van mivel dicsekednie. Hozzáadhat egy extra üres elemet „csak magától”.

Ennek megtekintéséhez nyissa meg a dokumentumot. Visszaadja a document.body gyermekcsomópontjainak számát, beleértve a szöveges csomópontokat is.

IE-re 3-at, Firefoxra 7-et, Operára 8-at (!?) kapok.

A gyakorlatban ez az összeférhetetlenség nem okoz nagy problémákat, de emlékezni kell rá. Például a különbség megnyilvánulhat a fa csomópontjainak felsorolása esetén.

A DOM ereje

Miért van szükségünk a szép rajzok mellett hierarchikus DOM-modellre?

Nagyon egyszerű:

Minden DOM-elem egy objektum, és tulajdonságokkal rendelkezik a tartalom manipulálásához, a szülők és a gyermekek eléréséhez.

A dokumentum objektumot DOM-kezelésre használják.
A dokumentum segítségével megkaphatja a fa kívánt elemét, és módosíthatja annak tartalmát.

Például ez a kód veszi az első elemet az ol címkével, eltávolít két listaelemet egymás után, majd fordított sorrendben adja hozzá őket:

Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter)

Egy ilyen szkript munkájának példájához kattintson a szövegre a jávorszarvas oldalon

A régebbi kézikönyvekben és szkriptekben előfordulhat, hogy az oldal HTML-kódja módosul a document.write közvetlen meghívásával.

A modern szkriptekben ezt a módszert szinte soha nem használják, annak esetei helyes alkalmazás ujjakon meg lehet számolni.

Kerülje a document.write-t. Hacsak nem igazán tudja, hogy mit csinál (és miért olvas oktatóanyagot – már guru vagy)

Nézzük meg közelebbről a hozzáférési módszereket és a DOM-elemek tulajdonságait.

Hozzáférés az elemekhez

A DOM minden hozzáférése és módosítása a dokumentumobjektumból származik.

Kezdjük a fa tetején.

dokumentum.documentElement

Legfelső címke. Érvényes HTML oldal esetén ez a következő lenne.

dokumentumtörzs

A címke, ha szerepel a dokumentumban (kell lennie).

A következő példa, amikor a gombra kattint, megjeleníti a document.documentElement és a document.body objektumok szöveges megjelenítését. Maga a karakterlánc böngészőfüggő, bár az objektumok mindenhol ugyanazok.

function go() ( alert(document.documentElement) alert(document.body) )

DOM elemtípusok

A DOM minden elemének típusa van. Ennek számát az elem.nodeType attribútum tárolja

Összesen 12 típusú elem található a DOM-ban.

Általában csak egyet használnak: Node.ELEMENT_NODE , amelynek száma 1. A HTML címkék az ilyen típusú elemeknek felelnek meg.

Néha a Node.TEXT_NODE típus is hasznos, ami egyenlő 3-mal. Ezek szöveges elemek.

Más típusok be javascript programozás nem használják.

A következő példa, amikor a gombra kattint, kinyomtatja a document.documentElement típusát, majd a document.body csomópont utolsó gyermekének típusát. Ez egy szöveges csomópont.

function go() ( alert(document.documentElement.nodeType) alert(document.body.lastChild.nodeType) ) Szöveg

Példa

Például így nézne ki a fenti példa dokumentuma egy böngészőben, ha minden látható elemet a jobb felső sarokban egy nodeType szám keretezne.

... Adatok

• Gondosan
• Információ

Oroszországban készült

Itt csak a törzsön belüli elemek jelennek meg, mivel csak ezek jelennek meg az oldalon. Az 1-es típusú elemeknél (címkék) a megfelelő címke zárójelben van feltüntetve, szövegelemeknél (3-as típus) csak egy szám.

Gyermek elemek

Minden gyermekelem, beleértve a szöveges elemeket is, a childNodes tömbben található.

A következő példa végigfut a document.body összes gyermekén.

For(var i=0; i BODY

stílus

Ez a tulajdonság szabályozza a stílust. Hasonló a stílus beállításához a CSS-ben.

Például beállíthatja az elem.style.width értéket:

A gomb forráskódja:

Eszik Általános szabály helyettesítések - ha a CSS attribútum kötőjeleket tartalmaz, akkor a stílus beállításához le kell cserélni őket erre nagybetűs leveleket.

Például a z-index tulajdonság 1000-re állításához a következőket kell beállítani:

elem.stílus.zIndex = 1000

innerHTML

Ezt a tulajdonságot egyszer csak az IE támogatta. Most már minden modern böngésző támogatja.

Tartalmazza az összes HTML-t a csomóponton belül, és módosítható.

Az innerHTML tulajdonság főként egy oldal tartalmának dinamikus megváltoztatására szolgál, például:

Document.getElementById("footer").innerHTML = "Viszlát!"

Talán az innerHTML az egyik leggyakrabban használt DOM elem tulajdonság.

osztály név

Ez a tulajdonság az elem osztályát adja meg. Teljesen analóg a html "class" attribútumával.

Elem.className = "új osztály"

onclick, onkeypress, onfocus...

És más tulajdonságok, amelyek "on..."-val kezdődnek, tárolják a megfelelő eseménykezelő függvényeket. Például hozzárendelhet egy kezelőt onclick események.

Ha többet szeretne tudni ezekről a tulajdonságokról és eseménykezelőkről, lásd:

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. 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 azt is meg kell jegyezni egy nagy szám a HTMLElement osztály altípusai, amelyek a HTML elemek konkrét 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 kliensprogram működése bekapcsolva 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;

összhangban egy bizonyos CSS-választó.

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. Elem kiválasztása szerint egyedi érték id attribútumot a Document objektum getElementById() metódusával lehet megtenni:

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.

BAN BEN Internetes verziók Az IE8 getElementById() metódusa alatti Explorer az id attribútumok értékeit keresi a kis- és nagybetűk megkülönböztetése nélkül, és olyan elemeket is visszaad, amelyek megegyeznek a name attribútum értékével.

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 kompatibilitás biztosítása érdekében különböző verziók böngészőkben óvatosnak kell lennie az attribútumértékek kiválasztásával, é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 néven is meghatározható JavaScript metódusok hogy megkapja a megadott szelektornak megfelelő elemeket.

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 egy querySelector() metódust is meghatároz, módszerszerű querySelectorAll(), azzal a különbséggel, hogy csak az első (dokumentum sorrendben) egyező 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 mindenben szabványosak és implementáltak jelenlegi böngészők kivéve az IE-t.

A Dokumentumobjektum-modell vagy "DOM" az szoftver interfész hozzáférés a weboldalak elemeihez. 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 egy nézet HTML elemek, amely megjelenik az oldalon, és a hozzájuk tartozó stílusok. 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 kísérlet egy HTML dokumentum szerkezetének és tartalmának átalakítására tárgymodell, amelyet különféle programok 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 tartalmazza További információ, ami nincs 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.

innerHTML
vartext = element.innerHTML;
element.innerHTML = "";
Egy új innerHTML hozzárendelése felülírja a kódot, még akkor is, ha az új érték hozzáadódik az aktuálishoz (+=). Az így hozzáadott szkriptek nem hajtódnak végre.

külső HTML
A teljes elemet tartalmazza és nem módosítható. Technikailag ennek a tulajdonságnak írása egy új elemet hoz létre, amely felváltja a régit. A változókban a régi elemre való hivatkozások nem változnak.

adat
textNode.data - szöveges csomópontok és megjegyzések tartalma

textContent
element.textContent – ​​szöveg az elemen belül címkék nélkül.
Van egy nem szabványos innerText tulajdonság is, amely sok hasonlóságot mutat a textContenttel.

Elem láthatósága

rejtett
elem.rejtett = igaz
A rejtett attribútum nem támogatott az IE11-ben.

Attribútumok

A legtöbb szabványos attribútum a DOM-ban az objektum tulajdonságaivá válik:
element.id = "id"
Nem szabványos attribútumok esetén nem jön létre tulajdonság (meghatározatlan)

Létrehozhatja saját DOM-tulajdonságait:
element.myData = (név:"János", vezetéknév:"Smith");
és módszerek:
element.myFunc = function()(figyelmeztesse ezt.csomópontnév);
Ez azért működik, mert a DOM csomópontok normál JavaScript objektumok. Ezek a nem szabványos tulajdonságok és módszerek nem befolyásolják a címke megjelenítését, és csak JavaScriptben láthatók.

Címkeattribútumok elérése:
element.hasAttribute(name)
element.getAttribute(név)
element.setAttribute(név, érték)
element.removeAttribute(name)
Az elem.attributes attribútumok pszeudotömbje.

Az attribútumok megkülönböztetik a kis- és nagybetűket (html), a tulajdonságok pedig a kis- és nagybetűket (javaScript).
Az attribútum értéke mindig egy karakterlánc.

Attribútum: a.getAttribute("href") – pontosan azt jeleníti meg, ami a HTML-ben található
Tulajdonság: a.href – eltérhet az attribútum értékétől
Leggyakrabban egy tulajdonság függ egy attribútumtól, de nem fordítva. A tulajdonság megváltoztatása nincs hatással az attribútumra.

Osztályokkal való munka

Az osztály attribútumnak két tulajdonsága van:
osztálynév - karakterlánc
classList - objektum

classList objektum metódusok:
element.classList.contains("class") - ellenőrizze, hogy egy objektum tartalmaz-e egy adott osztályt
element.classList.add("osztály")
element.classList.remove("osztály")
element.classList.toggle("osztály")

A classList egy pszeudotömb, végig lehet iterálni hurokhoz.

adatattribútumok

Az egyéni adatattribútumok nem csak attribútumként, hanem az adatkészlet tulajdonságon keresztül is elérhetők
data-about = "valamilyen érték"
elem.adatkészlet.about

Csomóponti sorrend

szülő.contains(child) - igaz vagy hamis
ellenőrzi, hogy a gyermek csomópont be van-e ágyazva a szülőbe

nodeA.compareDocumentPosition(nodeB) – Információt nyújt az elemek tartalmáról és egymáshoz viszonyított sorrendjéről. A visszatérési érték egy bitmaszk:

Csomópontok hozzáadása és eltávolítása

vardiv = document.createElement("div")
document.createTextNode("szöveg")

parent.appendChild(elem) - az elem a szülő végére kerül
parent.insertBefore(elem, nextSibling) - az elem a nextSibling elé kerül hozzáadásra
parent.insertBefore(elem, parent.firstChild) - hozzáadva az elejéhez
parent.insertBefore(elem, null) - úgy működik, mint az appendChild
Minden beszúrási módszer visszaadja a beillesztett csomópontot.
Egy elem mozgatásakor nem kell először eltávolítani a régi helyről, a beillesztési módszerek ezt automatikusan megteszik.

element.insertAdjacentHTML(ahol, html) - tetszőleges HTML kód beszúrása a dokumentumba bárhová. A Where megadja, hogy hova kell beszúrni a html-t az elemhez képest - beforeBegin, afterBegin, BeforeEnd, afterEnd.
element.insertAdjacentElement(hol, newElement)
element.insertAdjacentText(hol, szöveg)
az utolsó két módszert a Firefox nem támogatja

node.append(...nodes) - csomópontokat szúr be a csomópont végére,
node.prepend(...nodes) - csomópontokat szúr be a csomópont elejére,
node.after(...nodes) - csomópontokat szúr be a csomópont után,
node.before(...nodes) - csomópontokat szúr be a csomópont elé,
node.replaceWith(...nodes) - Csomópontokat szúr be a csomópont helyett.
itt a csomópontok csomópontok vagy karakterláncok, tetszőleges számban és kombinációban, vesszővel elválasztva.

var fragment = document.createDocumentFragment() - egy DOM-csomópontot szimulál, amely eltűnik, amikor beillesztik egy dokumentumba, és csak a gyermekei maradnak. BAN BEN modern böngészők Nem ajánlott.

element.cloneNode(true) - az elem mély másolata
element.cloneNode(false) - másolás gyermekek nélkül

parent.removeChild(elem)
parent.replaceChild(newElement, element)
element.remove() - közvetlenül eltávolítja az elemet, a szülőre való hivatkozás nélkül.
A metódusok visszaadják a távoli gazdagépet