Práce s uzly v JavaScriptu
Jak víte, tagy mohou obsahovat jiné tagy nebo, řečeno v termínech JavaScriptu, DOM elementy mohou obsahovat jiné DOM elementy. Kromě toho však v nich mohou být komentáře a obyčejný text. Komentáře, texty a DOM elementy spojujeme jedním názvem - uzly.
Už vám jsou známé vlastnosti firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Tyto vlastnosti pracují právě s DOM elementy,
ignorujíce ostatní uzly. Zpravidla je to právě
to, co potřebujeme.
Avšak existují také vlastnosti firstChild,
lastChild, nextSibling, previousSibling.
Tyto vlastnosti pracují analogickým způsobem,
avšak berouce v úvahu všechny uzly. Podívejme se
na rozdíl mezi těmito vlastnostmi na příkladu.
Mějme div, obsahující v sobě tři uzly:
<div id="elem"><!--com-->text<span>tag</span></div>
Získejme odkaz na tento div do proměnné:
let elem = document.querySelector('#elem');
A nyní se podívejme, co je obsaženo
ve vlastnostech firstChild a firstElementChild:
console.log(elem.firstChild); // komentář
console.log(elem.firstElementChild); // tag span
Napište kód, který ukáže rozdíl mezi
lastChild a lastElementChild.
Napište kód, který ukáže rozdíl mezi
nextSibling a nextElementSibling.
Napište kód, který ukáže rozdíl mezi
previousSibling a previousElementSibling.
