ناساندن

لە جاڤاسکریپتدا، DOM (Document Object Model) وەک نەخشەیەک بۆ پەڕەی وێبەکەت کاردەکات. تۆ دەتوانیت بە ئارەزووی خۆت توخمەکان زیاد بکەیت، دەستکاریان بکەیت، یان بیان سڕیتەوە. ئەم وانەیە یارمەتیت دەدات تێبگەیت چۆن بە شێوەیەکی داینامیکی پەڕەی وێبەکەت بگۆڕیت.

دروستکردنی توخمی نوێ

بۆ دروستکردنی توخم، سەرەتا پێویستە فەرمانی document.createElement() بەکاربهێنین. ئەم فەرمانە توخمێک دروست دەکات بەڵام هێشتا لە ناو پەڕەکەدا دەرناکەوێت.

// دروستکردنی توخمێکی div
const newDiv = document.createElement('div');

// دانانی دەقێک لە ناویدا
newDiv.textContent = 'ئەمە توخمێکی نوێیە کە بە جاڤاسکریپت دروستکراوە';

// دانانی ستایل بۆی
newDiv.style.backgroundColor = 'yellow';

لێرەدا ئێمە توخمەکەمان دروست کرد و دەق و ستایلێکمان بۆ دانا. هەڵەی باو کە فێرخوازان دەیکەن ئەوەیە کە وا دەزانن بە تەنها ئەم کۆدە توخمەکە لە پەڕەکەدا دەردەکەوێت، بەڵام هێشتا پێویستە 'بەستراوە' (Append) بکرێت.

زیادکردنی توخم بۆ ناو پەڕەکە

دوای دروستکردن، دەبێت توخمەکە بخەینە ناو شوێنێکی دیاریکراو لە پەڕەکەدا. بۆ ئەمە appendChild() یان append() بەکاردەهێنین.

// دەستنیشانکردنی ئەو شوێنەی دەتەوێت توخمەکەی تێدا دابنێیت
const container = document.body;

// زیادکردنی توخمەکە بۆ کۆتایی body
container.appendChild(newDiv);

ئەم کۆدە توخمەکە دەخاتە کۆتایی بەشی body. ئەگەر بتەوێت لە شوێنێکی دیاریکراو دایبنێیت، دەتوانیت ID یان Class بەکاربهێنیت بۆ دەستنیشانکردنی باوکەکە (Parent).

لابردنی توخمەکان

لابردنی توخمەکان زۆر ئاسانە. تەنها پێویستە ئەو توخمە دەستنیشان بکەیت و فەرمانی remove() بەکاربهێنیت.

// دەستنیشانکردنی توخمێک بە ID
const elementToRemove = document.getElementById('myElement');

// لابردنی توخمەکە
if (elementToRemove) {
    elementToRemove.remove();
}

بەراوردی نێوان append و appendChild

• appendChild(): تەنها یەک توخم زیاد دەکات و تەنها Node وەردەگرێت.
• append(): دەتوانێت چەند توخمێک یان دەق (String) بەیەکەوە زیاد بکات.

تەکنیکی پێشکەوتوو: دروستکردنی لیست

دەتوانیت بە بەکارهێنانی لۆپ (Loop) چەندین توخم بەیەکەوە دروست بکەیت.

const list = document.createElement('ul');
for (let i = 1; i <= 3; i++) {
    const item = document.createElement('li');
    item.textContent = 'خاڵی ژمارە ' + i;
    list.appendChild(item);
}
document.body.appendChild(list);

ڕاهێنان

ئێستا کاتی ئەوەیە خۆت تاقی بکەیتەوە! هەوڵ بدە ئەم کارانە ئەنجام بدەیت:

• توخمێکی <p> دروست بکە.
• دەقێک بنووسە "سڵاو لە جیهانی جاڤاسکریپت".
• توخمەکە زیاد بکە بۆ ناو document.body.
• دوای 5 چرکە بە بەکارهێنانی setTimeout، توخمەکە بسڕەوە.