Csomópontok kezelése JavaScriptben
Mint tudjátok, a címkék tartalmazhatnak más címkéket, vagy JavaScript terminológia szerint a DOM elemek tartalmazhatnak más DOM elemeket. Ezen kívül azonban megjegyzéseket és egyszerű szöveget is tartalmazhatnak. A megjegyzéseket, szövegeket és DOM elemeket egy közös névvel - csomópontok - illetjük.
Önök már ismerik a firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling tulajdonságokat.
Ezek a tulajdonságok kizárólag a DOM elemekkel dolgoznak,
figyelmen kívül hagyva a többi csomópontot. Általában pontosan
erre van szükségünk.
Azonban léteznek a firstChild,
lastChild, nextSibling, previousSibling tulajdonságok is.
Ezek a tulajdonságok hasonló módon működnek,
azonban minden csomópontot figyelembe vesznek. Nézzük meg
a különbséget ezen tulajdonságok között egy példán keresztül.
Tegyük fel, hogy van egy div-ünk, amely három csomópontot tartalmaz:
<div id="elem"><!--com-->text<span>tag</span></div>
Kérjük egy hivatkozást erre a div-re egy változóba:
let elem = document.querySelector('#elem');
Most pedig nézzük meg, mit tartalmaznak
a firstChild és firstElementChild tulajdonságok:
console.log(elem.firstChild); // megjegyzés
console.log(elem.firstElementChild); // span címke
Írjon kódot, amely megmutatja a különbséget a
lastChild és lastElementChild között.
Írjon kódot, amely megmutatja a különbséget a
nextSibling és nextElementSibling között.
Írjon kódot, amely megmutatja a különbséget a
previousSibling és previousElementSibling között.
