سایر نوع‌های DOM

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

مقدمه

تاکنون با سه نوع گره اصلی و پراستفاده یعنی Document، Element و Text آشنا شده‌ایم. این سه نوع، بخش عمده‌ای از کارهای روزمره با DOM را پوشش می‌دهند. با این حال، درخت DOM شامل انواع دیگری از گره‌ها نیز می‌شود که هرچند کمتر با آنها سروکار داریم، اما آشنایی با آنها درک ما را از ساختار کلی DOM کامل‌تر می‌کند. در این درس به سه نوع دیگر یعنی Comment، DocumentType و DocumentFragment نگاهی خواهیم داشت.

نوع Comment

نوع Comment نماینده‌ی یک کامنت در سند HTML است. کامنت‌ها توسط مرورگر رندر نمی‌شوند، اما بخشی از درخت DOM هستند و با جاوااسکریپت قابل دسترسی‌اند. این نوع گره از Node ارث‌بری می‌کند و nodeType آن برابر با 8 است. محتوای متن کامنت نیز از طریق پراپرتی data یا nodeValue قابل دسترسی است.

Copy Icon JAVASCRIPT 
// HTML: <div id="container"><!-- A sample comment --></div>
const container = document.getElementById('container');
const commentNode = container.firstChild;

console.log(commentNode.nodeType); // 8
console.log(commentNode.data);     // " A sample comment "

همانطور که می‌بینید، ما می‌توانیم گره کامنت را مانند هر گره دیگری پیدا کرده و محتوای آن را بخوانیم. اگرچه دستکاری کامنت‌ها در عمل کاربرد چندانی ندارد، اما دانستن وجود آن‌ها در درخت DOM مهم است.

نوع DocumentType

گره `DocumentType` نماینده‌ی بخش `<!DOCTYPE ...>` در ابتدای سند HTML است که نوع سند را به مرورگر اعلام می‌کند. این گره به عنوان فرزندی از شیء document و از طریق پراپرتی document.doctype قابل دسترسی است. nodeType آن برابر با 10 است.

Copy Icon JAVASCRIPT 
const doctype = document.doctype;

if (doctype) {
    console.log(doctype.name); // For <!DOCTYPE html>, this will be "html"
}

این نوع گره نیز عمدتاً برای خواندن اطلاعات استفاده می‌شود و کاربرد چندانی در دستکاری‌های روزمره DOM ندارد، اما بخشی از ساختار استاندارد سند است.

نوع DocumentFragment

برخلاف دو نوع قبلی، DocumentFragment یک نوع گره بسیار کاربردی و مهم، به ویژه برای بهبود عملکرد، است. DocumentFragment یا «قطعه سند» یک گنجه یا ظرف موقت و سبک برای نگهداری گره‌های دیگر است که خودش بخشی از درخت اصلی DOM محسوب نمی‌شود.

مزیت اصلی آن در مسائل عملکردی است. فرض کنید می‌خواهید یک لیست طولانی از آیتم‌ها را به صفحه اضافه کنید. اگر هر آیتم li را تک به تک به ul در DOM اصلی اضافه کنید، مرورگر مجبور است پس از هر بار اضافه شدن، صفحه را مجدداً محاسبه و رندر کند (فرایندی به نام reflow/repaint). این کار بسیار پرهزینه است. راه‌حل بهتر این است که تمام liها را ابتدا به یک DocumentFragment در حافظه اضافه کنید و سپس کل محتوای فرگمنت را یک‌جا به DOM اصلی منتقل کنید. با این کار، فقط یک عملیات reflow/repaint اتفاق می‌افتد.

Copy Icon JAVASCRIPT 
// Assume we have an empty <ul id="fruit-list"></ul> in our HTML
const list = document.getElementById('fruit-list');
const fruits = ['Apple', 'Orange', 'Banana'];

// Create a document fragment
const fragment = document.createDocumentFragment();

fruits.forEach(fruitText => {
    const li = document.createElement('li');
    li.textContent = fruitText;
    fragment.appendChild(li); // Append to the fragment (in memory)
});

// Append the entire fragment to the DOM in one go
list.appendChild(fragment);

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

در این درس با انواع گره کمتر رایج اما مفید Comment، DocumentType و به خصوص DocumentFragment آشنا شدیم و دیدیم که چگونه DocumentFragment می‌تواند به عنوان یک ابزار بهینه‌سازی قدرتمند عمل کند. تا به اینجا با انواع مختلف گره‌ها در DOM آشنا شده‌ایم و یاد گرفتیم چطور آن‌ها را پیدا کنیم. اکنون آماده‌ایم تا وارد بخش هیجان‌انگیز ماجرا، یعنی دستکاری واقعی DOM شویم. در درس بعدی، یاد می‌گیریم که چگونه گره‌های جدیدی بسازیم، آن‌ها را به درخت DOM اضافه، جایگزین یا حذف کنیم.