Коркарди гиреҳҳо дар JavaScript

Чунон ки шумо медонед, тегҳо метавонанд тегҳои дигарро дар бар гиранд ё ба забони JavaScript гӯем, унсурҳои DOM метавонанд унсурҳои дигари DOM-ро дар бар гиранд. Илова бар ин, аммо, дар онҳо шарҳҳо ва матни оддӣ метавонад бошад. Шарҳҳо, матнҳо ва унсурҳои DOM бо як ном - гиреҳҳо якҷоя карда мешаванд.

Шумо аллакай бо хосиятҳои firstElementChild, lastElementChild, nextElementSibling, previousElementSibling шинос ҳастед. Ин хосиятҳо аҳаммият ба унсурҳои DOM медиҳанд, ва гиреҳҳои боқимондаро надида мегиранд. Одатан, аҳаммият ҳамон ба мо лозим аст.

Аммо, хосиятҳои firstChild, lastChild, nextSibling, previousSibling низ вуҷуд доранд. Ин хосиятҳо ба ҳамин монанд кор мекунанд, аммо, ҳамаи гиреҳҳоро ба назар мегиранд. Биёед фарқият байни ин хосиятҳоро бо мисол бубинем. Фарз кунем, ки мо диве дорем, ки дар худ се гиреҳ дорад:

<div id="elem">text<span>tag</span></div>

Истинод ба ин дивро дар тағирёбанда гирем:

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

Ва ҳоло биёед бубинем, ки дар хосиятҳои firstChild ва firstElementChild чӣ ҷой гирифтааст:

console.log(elem.firstChild);        // шарҳ
console.log(elem.firstElementChild); // теги span

Рамзе нависед, ки фарқият байни lastChild ва lastElementChild-ро нишон диҳад.

Рамзе нависед, ки фарқият байни nextSibling ва nextElementSibling-ро нишон диҳад.

Рамзе нависед, ки фарқият байни previousSibling ва previousElementSibling-ро нишон диҳад.