JavaScript හි උ්ලෙඛ පරාමිතීන් අතර වෙනස

උ්ලෙඛ පරාමිතීන් වර්ග දෙක අතර වෙනස DOM අංග වෙනස් කිරීමේදී විවිධාකාර හැසිරීමෙහි ය. උදාහරණයක් ලෙස, අපි ඡේද සමුහයක් HTMLCollection ලෙසද NodeList ලෙසද ලබා ගනිමු. ඉන්පසුව අපි තවත් ඡේදයක් සාදා අපේ DOM වෙත එක් කරමු. මෙම අවස්ථාවේ දී එය ස්වයංක්‍රීයව HTMLCollection හි දිස්වනු ඇත, නමුත් NodeList සමුහය නොවෙනස්ව පවතී.

අපි උදාහරණයක් බලමු. අපට div එකක් සහ එහි ඡේද තිබේවා. අපේ div එක සහ එම ඡේදම විවිධ වර්ග දෙකක සමුහ ලෙස ලබා ගනිමු:

let parent = document.querySelector('div');
let elems1 = document.getElementsByTagName('p'); // HTMLCollection
let elems2 = document.querySelectorAll('p');     // NodeList

අපේ div එකට තවත් ඡේදයක් එක් කරමු:

let p = document.createElement('p');
parent.append(p);

ප්‍රතිඵලයක් වශයෙන් එක් සමුහයක් වෙනස් වනු ඇත, දෙවැන්න - නැත:

console.log(elems1); // 4 paragraphs - with the new one
console.log(elems2); // 3 initial paragraphs

නව අංගයක් එකතු කිරීමේදී children ගුණය හැසිරෙන ආකාරය පරීක්ෂා කරන්න.

නව අංගයක් එකතු කිරීමේදී childNodes ගුණය හැසිරෙන ආකාරය පරීක්ෂා කරන්න.