A DOM megértése elengedhetetlen a webfejlesztői karrierje során. Tudnia kell, hogyan jelölhet ki különböző elemeket a DOM-ban, hogy ezután elolvashassa a tartalmukat vagy módosíthassa azokat.

A DOM-bejárás leírja, hogyan lehet navigálni a HTML-dokumentumok által generált faszerű struktúrában. Itt található egy teljes útmutató a DOM-on való bejáráshoz JavaScripttel.

Mi az a DOM-bejárás?

A Dokumentum objektum modell, vagy röviden DOM, egy HTML-dokumentum faszerű ábrázolása. Biztosít egy API amely lehetővé teszi, hogy webfejlesztőként JavaScript használatával interakcióba lépjen egy webhelypel.

A DOM minden eleme csomópontként ismert. Csak a DOM-on keresztül manipulálhatja a HTML-dokumentum szerkezetét, tartalmát és stílusát.

A DOM-bejárás (más néven gyaloglás vagy navigáció a DOM-ban) a DOM-fában lévő csomópontok kiválasztása más csomópontokból. Valószínűleg már több módszert is ismer a DOM fa elemeinek elérése azonosítójuk, osztályuk vagy címkenevük alapján. Használhat olyan módszereket, mint pl document.querySelector() és document.getElementById() hogy ezt tegye.

instagram viewer

Vannak más módszerek is, amelyekkel együtt hatékonyabban és robusztusabban navigálhat a DOM-ban. Ahogy el tudja képzelni, jobb a térkép egy már ismert pontjáról keresni, mint teljes keresést végezni.

Például egy utód elem kiválasztása a szülőjéből egyszerűbb és hatékonyabb, mint a teljes fában keresni.

A bejáráshoz szükséges dokumentum minta

Miután hozzáfért egy adott csomóponthoz a DOM-fában, különböző módokon érheti el a kapcsolódó csomópontokat. A kiválasztott csomóponttól lefelé, felfelé vagy oldalra mozoghat a DOM-fában.

Az első módszer egy elem keresését foglalja magában, amely a legfelső csomóponttal kezdődik (mint például a dokumentum csomópontja), és lefelé halad.

A második út az ellenkezője: egy belső elemtől felfelé haladunk a fán, és egy külső elemet keresünk. Az utolsó módszer az, amikor egy másik elemből keres egy elemet ugyanazon a szinten (ami azt jelenti, hogy a két elem testvér) a dokumentumfában.

Ennek bemutatásához tekintse meg ezt a HTML-dokumentum példáját:

<!DOCTYPE html>
<html lang="hu">
<fej>
<meta karakterkészlet="UTF-8" />
<meta http-equiv="X-UA-kompatibilis" tartalom="IE=él" />
<meta név="nézetablak" tartalom="szélesség=eszköz-szélesség, kezdeti lépték=1,0" />
<cím>Példa oldal</title>
</head>
<test>
<fő->
<h1>Az oldalam címe</h1>
<p>Szép felirat jön ide</p>


<cikk osztály="első__cikk">
<h2>A csodálatos gyümölcsök listája</h2>
<p>Gyümölcsöt kell enni</p>


<div class="burkolat-1">
<ul osztály="alma-lista">
<li class="alma">Almák</li>
<li class="narancs">Narancs</li>
<li class="avokádó">Avokádó</li>
<li class="szőlő">
 Szőlő


<ul>
<li class="típus-1">Hold esik</li>
<li>Szultána</li>
<li>Egyetértés</li>
<li>Crimson Seedless</li>
</ul>
</li>
<li class="banán">Banán</li>
</ul>


<gomb osztály="btn-1">Olvassa el a teljes listát</button>
</div>
</article>


<cikk osztály="második__cikk">
<h2>Csodálatos helyek Kenyában</h2>
<p>Meg kell látogatnia azokat a helyeket Kenyában</p>


<div class="wrapper-2">
<ul osztály="helyek listája">
<li>Maasai Mara</li>
<li>Diani strand</li>
<li>Watamu strand</li>
<li>Amboseli Nemzeti Park</li>
<li>Nakuru-tó</li>
</ul>


<gomb osztály="btn-2">Olvassa el a teljes listát</button>
</div>
</article>
</main>
</body>
</html>

A DOM bejárása lefelé

A DOM-on lefelé haladhat két módszer egyikével. Az első a közös kiválasztási módszer (elem.querySelector vagy elem.querySelectorAll). Másodszor, használhatja a gyermekek vagy gyermekNodes ingatlan. Van még két másik különleges tulajdonság is, nevezetesen utolsó gyerek és első gyerek.

Kiválasztó módszerek használata

A querySelector() metódusok lehetővé teszik egy vagy több olyan elem keresését, amelyek megfelelnek egy adott szelektornak. Például megkeresheti az első elemet a "first-article" osztály használatával document.querySelector('.first-article'). És elhozni mindent h2 elemei a dokumentumban, használhatja a querySelectorAll módszer: document.querySelectorAll('h2'). A querySelectorAll A metódus az egyező elemek csomópontlistáját adja vissza; az egyes elemeket zárójeles jelöléssel választhatja ki:

const címsorok = dokumentum.querySelectorAll('h2');
const firstHeading = címsorok[0]; // az első h2 elem kiválasztása
const secondHeading = címsorok[1]; // a második h2 elem kiválasztása

A kiválasztó módszerek használatakor a fő fogás az, hogy adott esetben a megfelelő szimbólumokat kell használnia a választó előtt, ahogy a CSS-ben is teszi. Például ".classname" az osztályokhoz és "#id" az azonosítókhoz.

Ne feledje, hogy az eredmény egy HTML-elem lesz, nem csak a kiválasztott elem belső tartalma. A tartalom eléréséhez használhatja a csomópontot innerHTML ingatlan:

dokumentum.querySelector('.orange').innerHTML

A gyermekek vagy a childNodes tulajdonságok használata

A gyermekek tulajdonság kijelöli az összes olyan gyermekelemet, amely közvetlenül egy adott elem alatt található. Íme egy példa a gyermekek működő ingatlan:

const appleList = dokumentum.querySelector('.apple-list');
const almák = appleList.children; 
konzol.log (alma);

Fakitermelés almák a konzolra megjeleníti az összes listaelem készletét közvetlenül az elem alatt egy "alma-lista" osztállyal HTML-gyűjteményként. A HTML-gyűjtemény egy tömbszerű objektum, így zárójeles jelölést használhat az elemek kiválasztásához, mint a querySelectorAll esetében.

ellentétben a gyermekek ingatlan, gyermekNodes visszaadja az összes közvetlen gyermekcsomópontot (nem csak a gyermekelemeket). Ha csak a gyermekelemek érdekelnek, mondjuk csak a listaelemek, használja a gyermekek ingatlan.

Speciális lastChild és firstChild tulajdonságok használata

Ez a két módszer nem olyan robusztus, mint az első kettő. Ahogy a nevük is sugallja, a utolsó gyerek és első gyerek A tulajdonságok visszaadják az elem utolsó és első gyermekcsomópontját.

const appleList = dokumentum.querySelector('.apple-list');
const firstChild = appleList.firstChild;
const lastChild = appleList.lastChild;

A DOM bejárása felfelé

A DOM-ban felfelé navigálhat a szülőElement (vagy szülőcsomópont) és legközelebb tulajdonságait.

A parentElement vagy a parentNode használata

Mindkét szülőElement vagy szülőcsomópont A tulajdonságok lehetővé teszik a kiválasztott elem szülőcsomópontjának kiválasztását egy szinttel feljebb. A kritikus különbség az szülőElement csak azt a szülőcsomópontot választja, amelyik elem. Másrészről, szülőcsomópont kiválaszthat egy szülőt, függetlenül attól, hogy az egy elem vagy egy másik csomóponttípus.

Az alábbi kódmintában használjuk szülőElement a "wrapper-1" osztályú div kiválasztásához az "apple-list"-ből:

const appleList = dokumentum.querySelector('.apple-list');
const parentDiv = appleList.parentElement; 
konzol.log (parentDiv); // div elemet jelenít meg osztályburkoló-1-vel

A legközelebbi ingatlan használata

A legközelebb tulajdonság kiválasztja az első szülőelemet, amely megfelel a megadott választónak. Lehetővé teszi több szint kiválasztását egy helyett. Például, ha már ki van választva a „btn-1” osztályú gomb, akkor kiválaszthatjuk a fő- elem segítségével legközelebb ingatlan az alábbiak szerint:

const btn1 = dokumentum.querySelector('.btn-1');
const mainEl = btn1.closest('fő-');
konzol.log (mainEl); // megjeleníti a fő elemet

Mint querySelector és querySelectorAll, használja a megfelelő választógombokat a legközelebb módszer.

A DOM oldalirányú bejárása

Két módszer áll rendelkezésre a DOM oldalra járására. Te tudod használni nextElementTestvér vagy előzőElemTestvér. Használat nextElementTestvér a következő testvér elem kiválasztásához és előzőElemTestvér az előző testvér kiválasztásához.

const narancs = dokumentum.querySelector('.narancs');
const alma = narancs.előzőElementTestvér;
const avokádó = narancs.nextElementTestvér;

Vannak egyenértékűek is következőTestvér és előző Testvér olyan tulajdonságok, amelyek az összes csomóponttípus közül is választanak, nem csak elemeket.

Tegyen többet a DOM-bejárási tulajdonságok és módszerek láncolásával

A fenti módszerek és tulajdonságok mindegyike lehetővé teszi a DOM bármely csomópontjának kiválasztását. Bizonyos esetekben azonban érdemes először felfelé, majd lefelé vagy oldalra mozogni. Ebben az esetben hasznosnak bizonyul a különböző tulajdonságok összeláncolása.