کار با DOM

مقدمه

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

ساخت گره‌های جدید

قبل از اینکه بتوانیم چیزی را به DOM اضافه کنیم، باید آن را بسازیم. شیء document متدهایی برای ساخت انواع مختلف گره‌ها در حافظه فراهم می‌کند. این گره‌های تازه ساخته شده، به اصطلاح "جدا" (detached) هستند و تا زمانی که به صراحت به درخت DOM اضافه نشوند، در صفحه قابل مشاهده نخواهند بود.

• createElement(tagName): یک گره عنصر جدید برای تگ مشخص شده، مثلاً <p> یا <div>، می‌سازد.
• createTextNode(text): یک گره متنی جدید با محتوای مشخص شده می‌سازد.
• createComment(text): یک گره کامنت جدید می‌سازد.

JAVASCRIPT

// Create a new <p> element
const newPara = document.createElement('p');

// Create a text node
const newText = document.createTextNode('This is some new text.');

// The nodes are created but not yet in the document
console.log(newPara.nodeName); // "P"
console.log(newText.nodeValue); // "This is some new text."

در کد بالا، یک عنصر پاراگراف و یک گره متنی در حافظه ساخته شده‌اند. آن‌ها کاملاً معتبر هستند اما هنوز هیچ جایی در صفحه ندارند.

افزودن گره‌ها به درخت DOM

پس از ساخت یک گره، باید آن را به یک گره والد موجود در درخت DOM متصل کنیم تا در صفحه نمایش داده شود.

متد appendChild

متد appendChild() یک گره را به عنوان آخرین فرزند یک گره والد مشخص، اضافه می‌کند. این متد پراستفاده‌ترین روش برای افزودن عناصر به DOM است.

JAVASCRIPT

// Assume we have an empty <div id="container"></div> in HTML
const parentDiv = document.getElementById('container');
const newPara = document.createElement('p');
const newText = document.createTextNode('This paragraph was added dynamically.');

// Add the text node into the paragraph element
newPara.appendChild(newText);
// Add the paragraph element into the parent div
parentDiv.appendChild(newPara);

در این کد، ابتدا گره متنی را به عنوان فرزند به عنصر پاراگراف اضافه کرده و سپس خود پاراگراف را به عنوان فرزند به عنصر <div> موجود در صفحه اضافه می‌کنیم.

متد insertBefore

اگر بخواهیم یک گره را قبل از یک فرزند مشخص دیگر اضافه کنیم، از متد insertBefore(newNode, referenceNode) استفاده می‌کنیم. این متد روی گره والد فراخوانی می‌شود و دو آرگومان می‌گیرد: گره جدیدی که باید اضافه شود، و گره مرجعی که گره جدید باید قبل از آن قرار گیرد. اگر گره مرجع null باشد، این متد مانند appendChild عمل می‌کند.

JAVASCRIPT

// Assume the container div now has one paragraph
const firstPara = parentDiv.firstChild;
const anotherPara = document.createElement('p');
anotherPara.textContent = 'This is inserted at the beginning.';

// Insert the new paragraph before the existing one
parentDiv.insertBefore(anotherPara, firstPara);

در اینجا، یک پاراگراف جدید ساخته و آن را قبل از اولین پاراگراف موجود در <div> والد درج می‌کنیم.

جایگزینی و حذف گره‌ها

دو عمل نهایی برای دستکاری ساختار DOM، جایگزینی یک گره با گره‌ای دیگر و حذف کامل یک گره است.

• replaceChild(newNode, oldNode): روی گره والد فراخوانی می‌شود و گره oldNode را با newNode جایگزین می‌کند.
• removeChild(childNode): روی گره والد فراخوانی شده و گره فرزند مشخص شده را از درخت DOM حذف می‌کند.

JAVASCRIPT

const parentDiv = document.getElementById('container');
const oldPara = parentDiv.children[1]; // Let's get the second paragraph

// Replace the old paragraph with a new H2 element
const heading = document.createElement('h2');
heading.textContent = 'This is a replacement.';
parentDiv.replaceChild(heading, oldPara);

// Remove the first child of the div
const toRemove = parentDiv.firstChild;
parentDiv.removeChild(toRemove);

کد بالا ابتدا پاراگراف دوم داخل <div> را با یک عنصر <h2> جدید جایگزین می‌کند. سپس، اولین فرزند <div> (که اکنون پاراگراف اولیه است) را به طور کامل از سند حذف می‌کند.

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