ද්විත්ව නොමැතිව DOM අංග ලබා ගැනීම

අපට ඡේද සහ බොත්තමක් ඇතැයි සිතමු:

<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>

<button>click me</button>

පරිශීලකයා මෙම ඡේදවලට අහඹු අනුපිළිවෙලින් ක්ලික් කරයි. බොත්තම එබූ විට, ක්ලික් කරන ලද සෑම ඡේදයකම අවසානයට ඇඟිලි සලකුණු එකතු කරන ආකාරයට කරමු. අපි කාර්යය Set භාවිතයෙන් කරමු.

අපි ආරම්භ කරමු. පළමුව, අපගේ අංග විචල්යවලට ලබා ගනිමු:

let button = document.querySelector('button');
let elems  = document.querySelectorAll('p');

නව Set එකතුවක් සාදමු:

let set = new Set;

ඡේද චක්‍රයකින් හරහා ගොස් ඒවායේ ක්ලික් සැකසුම්කරුවන් සවි කරමු:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		
	});
}

දැන් ඡේදයක් මත ක්ලික් කිරීමෙන් එම ඡේදය එකතුවට එකතු කරමු:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		set.add(this);
	});
}

අපි Set එකතුව භාවිතා කරන නිසා, ඡේදයක් මත යළි ක්ලික් කිරීමෙන් ඡේදයේ ද්විත්වයක් එකතු වීමට නොහැක.

දැන් බොත්තම මත ක්ලික් කළ විට අපගේ එකතුවේ අන්තර්ගතය හරහා ගොස් සෑම ඡේදයකම අවසානයට ඇඟිලි සලකුණු එකතු කරමු:

button.addEventListener('click', function() {
	for (let elem of set) {
		elem.textContent = elem.textContent + '!';
	}
});

ඡේද සහ බොත්තමක් ලබා දී ඇත. පරිශීලකයා මෙම ඡේදවලට අහඹු අනුපිළිවෙලින් ක්ලික් කරයි. බොත්තම එබූ විට, ක්ලික් කරන ලද සෑම ඡේදයකම අවසානයට ඇඟිලි සලකුණු එකතු කරන ලෙස සකසන්න.