JavaScript හි නෝඩ් සමඟ වැඩ කිරීම

ඔබ දන්නා පරිදි, ටැග් වලට වෙනත් ටැග් අඩංගු විය හැකිය, නැතහොත් JavaScript යෙදුම්වලින් කියතොත්, DOM අංග වලට වෙනත් DOM අංග අඩංගු විය හැකිය. මීට අමතරව, කෙසේ වෙතත්, ඒවායේ අදහස් දැක්වීම් සහ සාමාන්ය ලිපිය අඩංගු විය හැක. අදහස් දැක්වීම්, ලිපිය සහ DOM අංග එක් නමකින් එකතු කරයි - නෝඩ්.

ඔබ දැනටමත් හුරුපුරුදු ය firstElementChild, lastElementChild, nextElementSibling, previousElementSibling. මෙම ගුණාංග හරියටම DOM අංග සමඟ වැඩ කරයි, අනෙක් නෝඩ් නොසලකා හරියි. පොදුවේ, හරියටම එය අපට අවශ්‍ය වන්නේ.

කෙසේ වෙතත්, firstChild, lastChild, nextSibling, previousSibling යන ගුණාංග ද පවතී. මෙම ගුණාංග සමාන ආකාරයෙන් ක්‍රියා කරයි, කෙසේ වෙතත්, සියලු නෝඩ් සැලකිල්ලට ගනිමින්. අපි බලමු මෙම ගුණාංග අතර වෙනස උදාහරණයක් මත. අපට නෝඩ් තුනක් අඩංගු ඩිව් එකක් ඇති යැයි සිතමු:

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

අපි මෙම ඩිව් සඳහා සබැඳිය විචල්‍යයකට ලබා ගනිමු:

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

දැන් අපි බලමු, මොනවාද අඩංගු වන්නේ firstChild සහ firstElementChild ගුණාංගවල:

javascriptconsole.log(elem.firstChild);        // අදහස් දැක්වීම
console.log(elem.firstElementChild); // span ටැග් එක