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:

html<div id="elem"><!--com-->text<span>tag</span></div>

Kérjük egy hivatkozást erre a div-re egy változóba:

javascriptlet elem = document.querySelector('#elem');

Most pedig nézzük meg, mit tartalmaznak a firstChild és firstElementChild tulajdonságok:

javascriptconsole.log(elem.firstChild);        // megjegyzés
console.log(elem.firstElementChild); // span címke