DOM چییە؟

کاتێک پەڕەیەکی HTML لە وێبگەڕ (Browser) دەکرێتەوە، وێبگەڕەکە پەڕەکە دەکات بە شێوازێکی دار (Tree structure) کە پێی دەوترێت Document Object Model یان بە کورتی DOM. DOM وەک نەخشەیەک وایە بۆ JavaScript تاوەکو بتوانێت دەستی بگات بە هەموو بەشەکانی پەڕەکە و دەستکاریان بکات.

شێوازی دار (Tree Structure)

هەموو پەڕەیەکی HTML لە چەندین توخم (Element) پێکهاتووە کە لەناو یەکتردا جێگیرکراون. DOM ئەم پەیوەندییە بە شێوەی دار نیشان دەدات:

• Document: ڕەگی دارەکە.
• Root element: کە συνήθەن <html>-ە.
• Children: وەک <head> و <body>.

چۆن دەست بە DOM-دا دەگەین؟

بۆ دەستکاریکردنی هەر توخمێک، سەرەتا دەبێت بە JavaScript بانگی بکەین. باکارهێنانی document سەرەتای هەموو کارێکە.

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

// گۆڕینی دەقی ناو توخمەکە
myElement.innerHTML = 'سڵاو لە جیهانی DOM!';

لە نموونەی سەرەوەدا، ئێمە توخمێکمان بە ID دیاری کرد و دەقەکەیمان گۆڕی. ئەگەر ID-ەکە هەڵە بێت یان بوونی نەبێت، JavaScript تووشی هەڵە دەبێت.

گرنگی DOM لە پەرەپێدانی وێبدا

بێ DOM، وێبگەڕەکان تەنها وێنەیەکی نەگۆڕی HTML-یان پیشان دەدا. DOM وادەکات وێبگەڕەکە ببێتە ئامرازێکی زیندوو. تۆ دەتوانیت بەهۆی DOM-ەوە:

• دەق یان وێنەکان بگۆڕیت.
• شێوازی CSS بگۆڕیت.
• کاردانەوە بۆ کلیک و جوڵەی ماوس بکەیت.

نموونەیەکی تەواو

با بزانین چۆن ڕەنگی پاشبنەمای پەڕەیەک دەگۆڕین:

// گۆڕینی ڕەنگی پاشبنەمای body
document.body.style.backgroundColor = 'lightblue';

ئەم کۆدە ڕاستەوخۆ کار دەکات. هەڵەی باو ئەوەیە کە بیرت بچێت style بەکاربهێنیت یان ناوی ڕەنگەکە بە هەڵە بنووسیت.

ڕاهێنان

ئێستا کاتی ئەوەیە خۆت تاقی بکەیتەوە. پەڕەیەکی HTML دروست بکە کە تێیدا تێگێکی <h1> هەبێت و ID-ەکەی 'header' بێت. پاشان بە JavaScript دەقەکەی بگۆڕە بۆ 'فێربوونی DOM خۆشە!'.