سایر مطالب مربوط به DOM

آموزش جاوااسکریپت

مقدمه

تا اینجا با مفاهیم اصلی و ابزارهای بنیادی برای کار با DOM آشنا شده‌ایم. در این درس پایانی از فصل، به معرفی چند API و پراپرتی مدرن و بسیار کاربردی می‌پردازیم که کار با DOM را از آنچه هست، ساده‌تر، خواناتر و بهینه‌تر می‌کنند. این ابزارها شامل روش استاندارد برای کار با اتریبیوت‌های داده، یک رابط کاربری تمیز برای مدیریت کلاس‌های CSS، و روشی برای بررسی تطابق یک عنصر با یک سلکتور هستند.

کار با اتریبیوت‌های داده (data-*)

گاهی اوقات لازم است اطلاعات یا متادیتای سفارشی را مستقیماً روی یک عنصر HTML ذخیره کنیم، بدون اینکه این اطلاعات تأثیری بر استایل یا رفتار پیش‌فرض عنصر داشته باشد. استاندارد HTML5 برای این منظور، اتریبیوت‌های data-* را معرفی کرده است. شما می‌توانید هر اتریبیوتی که با data- شروع شود به عناصر خود اضافه کنید.

برای دسترسی آسان به این اتریبیوت‌ها، اشیاء عنصر در جاوااسکریپت یک پراپرتی ویژه به نام dataset دارند. این پراپرتی یک شیء است که تمام اتریبیوت‌های data-* عنصر را در خود دارد. نام هر اتریبیوت در این شیء، بخشی است که بعد از data- می‌آید و اگر شامل خط تیره باشد، به فرمت camelCase تبدیل می‌شود (مثلاً data-user-role به dataset.userRole تبدیل می‌شود).

Copy Icon JAVASCRIPT 
// HTML: <div id="user" data-user-id="123" data-user-role="admin"></div>
const userDiv = document.getElementById('user');

// Read data attributes via dataset
console.log(userDiv.dataset.userId);   // "123"
console.log(userDiv.dataset.userRole); // "admin"

// Set a new data attribute
userDiv.dataset.lastLogin = new Date().toISOString();
// This will add the attribute: data-last-login="..." to the element

استفاده از dataset روش استاندارد و تمیزی برای ذخیره و بازیابی اطلاعات مربوط به یک عنصر است و کد شما را از اتریبیوت‌های غیر استاندارد یا استفاده از پراپرتی className برای ذخیره داده بی‌نیاز می‌کند.

مدیریت کلاس‌ها با classList

در گذشته، برای افزودن یا حذف یک کلاس CSS از یک عنصر، مجبور بودیم پراپرتی className را به عنوان یک رشته دستکاری کنیم. این کار، به خصوص زمانی که یک عنصر چندین کلاس داشت، بسیار مستعد خطا و پیچیده بود.

امروزه، تمام عناصر یک پراپرتی بسیار مفید به نام classList دارند. این پراپرتی یک شیء از نوع DOMTokenList است که متدهای ساده‌ای برای مدیریت کلاس‌ها ارائه می‌دهد:

  • add('className'): یک یا چند کلاس را اضافه می‌کند.
  • remove('className'): یک یا چند کلاس را حذف می‌کند.
  • toggle('className'): اگر کلاس وجود داشته باشد آن را حذف و اگر وجود نداشته باشد آن را اضافه می‌کند.
  • contains('className'): بررسی می‌کند که آیا کلاس مشخص شده وجود دارد یا خیر (true/false).
Copy Icon JAVASCRIPT 
// HTML: <p id="message" class="info">A message.</p>
const msg = document.getElementById('message');

msg.classList.add('highlight', 'visible'); // class="info highlight visible"
msg.classList.remove('info');            // class="highlight visible"
msg.classList.toggle('visible');          // class="highlight" (visible is removed)

console.log(msg.classList.contains('highlight')); // true

استفاده از classList نه تنها کد را خواناتر و تمیزتر می‌کند، بلکه از بروز خطاهای ناشی از دستکاری رشته‌ها نیز جلوگیری می‌کند و روش مدرن و ارجح برای مدیریت کلاس‌هاست.

بررسی تطابق عنصر با سلکتور

گاهی اوقات نیاز داریم بررسی کنیم که آیا یک عنصر خاص با یک سلکتور CSS مشخص مطابقت دارد یا خیر. برای مثال، در تکنیک event delegation، ممکن است بخواهیم بدانیم عنصری که روی آن کلیک شده، آیا یک لینک داخل یک منوی خاص است یا نه.

متد matches() که روی یک گره عنصر فراخوانی می‌شود، دقیقاً برای همین کار طراحی شده است. این متد یک رشته سلکتور CSS دریافت کرده و اگر عنصر با آن سلکتور مطابقت داشته باشد، مقدار true و در غیر این صورت false را برمی‌گرداند.

Copy Icon JAVASCRIPT 
const elem = document.getElementById('message'); // From previous example, its class is "highlight"

console.log(elem.matches('p'));                      // true
console.log(elem.matches('.highlight'));             // true
console.log(elem.matches('#message.highlight')); // true
console.log(elem.matches('div'));                    // false

متد matches() یک ابزار بسیار کارآمد برای نوشتن کدهای شرطی بر اساس هویت یا موقعیت یک عنصر در DOM است، بدون اینکه نیاز به پیمایش‌های پیچیده در درخت داشته باشیم.

با این درس، فصل «DOM چیست؟» به پایان می‌رسد. ما از مفاهیم پایه‌ای مانند Node شروع کردیم، با Document و Element آشنا شدیم، روش‌های انتخاب و دستکاری گره‌ها را یاد گرفتیم و با APIهای مدرنی مانند Selectors API و classList کار کردیم. اکنون شما یک پایه محکم برای هر نوع تعامل با صفحات وب دارید. در فصل بعدی، «اکستنشن‌های DOM»، این دانش را با بررسی موضوعات پیشرفته‌تری مانند کار با استایل‌ها، پیمایش‌های بهینه و APIهای جدیدتر گسترش خواهیم داد.