هەڵبژاردنی توخمەکان لە DOM

بۆ ئەوەی بتوانیت لە ڕێگەی JavaScript-ەوە دەستکاری پەڕەیەک بکەیت، سەرەتا پێویستە بزانیت چۆن توخمەکان (Elements) لەناو DOM-دا دەدۆزیتەوە. DOM وەک دارێک وایە کە هەموو توخمەکانی HTML-ی تێدایە و JavaScript دەتوانێت بە ئاسانی دەستیان پێ بگات.

بەکارهێنانی querySelector

فەرمانی querySelector بەهێزترین ئامرازە بۆ هەڵبژاردنی توخمەکان. ئەم فەرمانە یەکەم توخم دەدۆزێتەوە کە لەگەڵ ئەو 'سێلێکتەرە' (Selector) بگونجێت کە تۆ دیاریت کردووە.

// هەڵبژاردنی توخم بەپێی ناوی تاگ
const heading = document.querySelector('h1');

// هەڵبژاردنی توخم بەپێی ID
const myButton = document.querySelector('#submit-btn');

// هەڵبژاردنی توخم بەپێی Class
const activeItem = document.querySelector('.active');

لە نموونەی سەرەوەدا، ئێمە بەپێی ناوی تاگ، ئایدی، و کلاس توخمەکانمان هەڵبژارد. هەڵەی باو: زۆرێک لە فێرخوازان لەبیر دەکەن نیشانەی (#) بۆ ID یان (.) بۆ Class بەکاربهێنن. ئەگەر ئەمانە لەبیر بکەیت، JavaScript ناتوانێت توخمەکە بدۆزێتەوە.

جیاوازی نێوان querySelector و querySelectorAll

کاتێک دەتەوێت تەنها یەک توخم هەڵبژێریت، querySelector بەکاربهێنە. بەڵام ئەگەر دەتەوێت هەموو ئەو توخمانە هەڵبژێریت کە هەمان کلاس یان تاگیان هەیە، پێویستە querySelectorAll بەکاربهێنیت.

// هەڵبژاردنی هەموو پاراگرافەکان
const allParagraphs = document.querySelectorAll('p');

// بەکارهێنانی forEach بۆ گەڕان بەناو هەموو توخمەکان
allParagraphs.forEach(p => {
  p.style.color = 'blue';
});

ئەم فەرمانە 'NodeList' دەگەڕێنێتەوە کە هاوشێوەی ئارێی (Array) وایە. دەتوانیت بە ئاسانی بەکاریان بهێنیت بۆ ئەوەی گۆڕانکاری بەکۆمەڵ لە پەڕەکەدا ئەنجام بدەیت.

هەڵبژاردنی توخمەکان بەپێی پێکهاتەی CSS

تۆ دەتوانیت بە هەمان شێوازی CSS، توخمەکان بە ئاڵۆزی زیاتر هەڵبژێریت. بۆ نموونە هەڵبژاردنی توخمێک کە لەناو توخمێکی تردا بێت.

// هەڵبژاردنی سپانی ناو دیڤێک کە کلاسی 'box'-ی هەیە
const spanInsideBox = document.querySelector('.box span');

ئەم شێوازە زۆر بەسوودە کاتێک دەتەوێت بە وردی ئاماژە بە توخمێک بدەیت بەبێ ئەوەی کاریگەری لەسەر توخمەکانی تری پەڕەکە هەبێت.

تەکنیکی پێشکەوتوو: هەڵبژاردن بە Attributes

دەتوانیت تەنانەت بەپێی تایبەتمەندییەکانی وەک type یان name توخمەکان هەڵبژێریت.

• [type='text']: هەموو ئینپوتە دەقییەکان هەڵدەبژێرێت.
• [data-id='123']: هەڵبژاردن بەپێی data attribute.

ئەرکی ڕاهێنان

ئێستا کاتی ئەوەیە خۆت تاقی بکەیتەوە! پەڕەیەکی HTML دروست بکە کە تێیدا سێ دوگمە (button) هەبێت و هەموویان کلاسی btn-یان هەبێت. پاشان بە بەکارهێنانی querySelectorAll هەموویان هەڵبژێرە و ڕەنگی نووسینەکەیان بگۆڕە بۆ 'سور' بە بەکارهێنانی JavaScript.