JavaScript-ում հանգույցների հետ աշխատանք

Ինչպես գիտեք, թեգերը կարող են պարունակել այլ թեգեր կամ, JavaScript-ի տերմինաբանությամբ ասած, DOM տարրերը կարող են պարունակել այլ DOM տարրեր: Բացի այդ, սակայն, դրանցում կարող են լինել մեկնաբանություններ և սովորական տեքստ: Մեկնաբանությունները, տեքստերը և DOM տարրերը միավորում են մեկ անվան տակ - հանգույցներ:

Ձեզ արդեն ծանոթ են firstElementChild, lastElementChild, nextElementSibling, previousElementSibling հատկությունները: Այս հատկություններն աշխատում են հենց DOM տարրերի հետ, անտեսելով մնացած հանգույցները: Որպես կանոն, հենց դա էլ մեզ անհրաժեշտ է:

Սակայն, գոյություն ունեն նաև firstChild, lastChild, nextSibling, previousSibling հատկությունները: Այս հատկություններն աշխատում են նմանապես, սակայն, հաշվի առնելով բոլոր հանգույցները: Եկեք դիտարկենք այս հատկությունների տարբերությունը օրինակով: Ենթադրենք ունենք div, որն իր մեջ պարունակում է երեք հանգույց:

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

Ստացենք այս div-ի հղումը փոփոխականում:

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

Եվ հիմա եկեք տեսնենք, թե ինչ է պարունակվում firstChild և firstElementChild հատկություններում:

javascriptconsole.log(elem.firstChild);        // մեկնաբանություն
console.log(elem.firstElementChild); // span թեգ