24- آموزش جاوااسکریپت | تغییر، حذف و مدیریت کلاس‌ها و ویژگی‌ها در DOM

HTML استفاده شده در این پست همان HTML پست 19 است یک ul با کلاس collection داریم که شامل چند li با کلاس collection-item است و داخل هر آیتم نیز یک لینک قرار گرفته است

در این بخش به بررسی سه عملیات مهم روی عناصر DOM می‌پردازیم: جایگزین کردن یک عنصر با عنصر دیگر، حذف عناصر و کار با کلاس‌ها و ویژگی‌ها (Attributes).

---

۱. جایگزین کردن عناصر (Replace Elements)

گاهی نیاز است یک عنصر در صفحه را به طور کامل با عنصر جدیدی جایگزین کنیم. برای این کار از متد replaceChild روی عنصر والد استفاده می‌کنیم.

در این مثال، می‌خواهیم تگ <h5> موجود در صفحه را با یک تگ <h2> جدید جایگزین کنیم:

// ۱. ساخت عنصر جدید
const newHeading = document.createElement('h2');

// ۲. افزودن شناسه (ID) به عنصر جدید
newHeading.id = 'task-title';

// ۳. ایجاد و افزودن گره متنی
newHeading.appendChild(document.createTextNode('Task List'));

// ۴. انتخاب عنصر قدیمی که قرار است جایگزین شود
const oldHeading = document.getElementById('task-title');

// ۵. انتخاب عنصر والد
const cardAction = document.querySelector('.card-action');

// ۶. جایگزینی عنصر جدید با قدیمی در والد
cardAction.replaceChild(newHeading, oldHeading);

---

۲. حذف عناصر (Remove Elements)

برای حذف عناصر از DOM، دو روش متداول وجود دارد: حذف مستقیم خود عنصر با متد remove() یا حذف فرزند از طریق عنصر والد با متد removeChild().

الف) حذف مستقیم با remove()

const lis = document.querySelectorAll('li');

// حذف اولین آیتم لیست (اندیس 0)
lis[0].remove();

ب) حذف فرزند با removeChild()

const list = document.querySelector('ul');

// حذف فرزند با اندیس مشخص (مثلا آیتم سوم) از والد
list.removeChild(lis[2]);

---

۳. مدیریت کلاس‌ها (Classes)

برای کار با کلاس‌های یک عنصر، می‌توانیم از دو ویژگی className (خروجی رشته‌ای) و classList (خروجی لیستی) استفاده کنیم.

فرض کنید ابتدا تگ <a> داخل اولین آیتم لیست را انتخاب می‌کنیم:

const link = document.querySelector('li:first-child a');
let val;

// دریافت کلاس‌ها به صورت رشته متنی
val = link.className;

// دریافت کلاس‌ها به صورت لیست (DOMTokenList)
val = link.classList;

// دسترسی به یک کلاس خاص با اندیس
val = link.classList[0];

// اضافه کردن کلاس جدید
link.classList.add('test');

// حذف کلاس
link.classList.remove('test');

---

۴. مدیریت ویژگی‌ها (Attributes)

برای خواندن، تغییر، بررسی یا حذف ویژگی‌های یک عنصر (مانند href یا title) از متدهای زیر استفاده می‌کنیم:

// دریافت مقدار یک ویژگی
val = link.getAttribute('href');

// تغییر یا تعریف یک ویژگی جدید
link.setAttribute('href', 'https://google.com');
link.setAttribute('title', 'Google');

// بررسی وجود یک ویژگی روی عنصر (خروجی true یا false)
val = link.hasAttribute('title');

// حذف یک ویژگی از عنصر
link.removeAttribute('title');

---

جمع‌بندی

در این بخش آموختیم که چگونه عناصر موجود در درخت DOM را ویرایش کنیم، آن‌ها را با متد replaceChild جایگزین کرده یا با متدهای remove و removeChild حذف کنیم. همچنین نحوه مدیریت پویای کلاس‌ها و ویژگی‌های عناصر را بررسی کردیم که نقشی کلیدی در تعاملی کردن صفحات وب ایفا می‌کنند.