13 متد کاربردی DOM

اگر با جاوااسکریپت آشنایی داشته باشید مطمئنا DOM را نیز می‌شناسید اما اگر چنین نیست باید بگویم که DOM یا Document Object Model ریشه تمام المان‌هایی است که شما در یک صفحه وب مشاهده می‌کنید. DOM ساختار یک صفحه وب را به شما نشان می‌دهد و همچنین از طریق یکسری API شما را قادر می‌سازد تا با استفاده از جاوااسکریپت یک صفحه وب را دستکاری کنید.

APIهای مربوط به DOM بسیار زیاد هستند و اشاره کردن به تک تک آن‌ها از حوصله چنین مطلبی خارج است به همین دلیل در این مطلب قصد داریم تا شما را با ۱۳ مورد از کاربردی‌ترین این APIها آشنا کنیم.

querySelector

متد document.querySelector اولین المانی که با مقدار داده شده به این متد همخوانی داشته باشد را برمی‌گرداند. اما اگر بخواهید همین حالت را برای تمام المان‌ها پیاده‌سازی کنید نیاز است که کلمه All را در انتهای querySelector قرار دهید:

const list = document.querySelector('ul');
const elements = document.querySelectorAll('div.info, div.warning');

خط اول قطعه کد بالا اولین المان ul موجود در سند مورد نظر را برگردانده و آن را در ثابت list قرار می‌دهد.

خط بعدی تمام divهایی را که کلاس info و warning دارند را برگردانده و آن‌ها را در ثابت elements قرار می‌دهد.

document.createElement

با استفاده از این متد می‌توانید یک المان جدید HTML را ایجاد کنید. این کار با یک ورودی که تگ‌های HTML را می‌پذیرد انجام می‌شود:

let list = document.createElement('ul');

قطعه کد بالا یک المان ul جدید را ایجاد کرده و برای دسترسی داشتن به آن در جهت ایجاد المان‌های فرزند آن را در یک متغیر list قرار می‌دهد. 

Node.appendChild

این متد یک نود جدید را به انتهای یک المان اضافه می‌کند. برای اضافه کردن شما باید نود جدید را در قسمت ورودی متد قرار دهید. اگر این نود قبلا در المان اصلی وجود داشته باشد آن را به موقعیت جدید انتقال می‌دهد.

let list = document.createElement('ul'); // creates a new list
['Paris', 'London', 'New York'].forEach(city => {
    let listItem = document.createElement('li');
    listItem.innerText = city;
    list.appendChild(listItem);
});
document.body.appendChild(list);

در خط اول این برنامه یک المان جدید را ایجاد کرده‌ایم و بعد آن را در list قرار داده‌ایم. بعد از آن از طریق یک حلقه for برای یک لیست از داده‌ها، listitemهای مختلفی را ایجاد کرده‌ایم. در نهایت موارد را به صورت منحصر به فرد به عنوان المان‌های فرزند به list اضافه می‌کنیم. در خارج از حلقه نیاز است که برای اضافه کردن ul به body از دستور appendChild یک بار دیگر استفاده نماییم.

Node.insertBefore

اگر قصد افزودن یک مقدار جدید را به یکسری داده داشته باشیم اما بخواهیم که این مقدار جدید در ابتدای داده‌ها قرار بگیرد می‌توانیم از متد insertBefore استفاده کنیم. برای مثال اگر خروجی کدهای متد قبلی را در نظر بگیریم:

• Paris
• London
• New York

حال اگر بخواهیم یک مقدار جدید را به ابتدای لیست اضافه کنیم می‌توانیم از Node.insertBefore(San Francisco, Paris) استفاده کنیم. در این حالت خروجی به صورت زیر خواهد بود:

• San Francisco
• Paris
• London
• New York

کدهای این حالت را می‌توانید در زیر مشاهده کنید:

let list = document.querySelector('ul');
let firstCity = list.querySelector('ul > li'); // here we could use list.firstChild, but the purpose of this article is to show DOM API methods
let newCity = document.createElement('li');
newCity.textContent = 'San Francisco';
list.insertBefore(newCity, firstCity);

Node.removeChild

با استفاده از متد Node.removeChild می‌توان یک child node را حذف کرده و همچنین node حذف شده را برگردانیم. البته در نظر داشته باشید که این node دیگر در DOM وجود نخواهد داشت بلکه در حافظه کامپیوتر قرار گرفته و تنها از آن طریق می‌توان دسترسی داشت. 

let list = document.querySelector('ul');
let firstItem = list.querySelector('li');
let removedItem = list.removeChild(firstItem);

در کدهای بالا ابتدا المان مادر با استفاده از تگ list فراخوانی شده و سپس المانی که قصد حذف آن را داریم در خط بعدی دریافت می‌شود. در نهایت با استفاده از removeChild آن المان را حذف می‌کنیم.

Node.replaceChild

با استفاده از این متد می‌توانید دو المان فرزند را با همدیگر جایگزین کنید. البته به یاد بسپارید که اگر این قابلیت به درستی پیاده‌سازی نشود مشکلاتی را در وب اپلیکیشن بوجود خواهد آورد. شما ابتدا باید المان مادر را دریافت کرده و سپس سراغ فرزندی بروید که قصد جایگزین کردنش با یک المان جدیدتر را دارید. در نهایت از طریق متد replaceChild می‌توانید دو مورد المان قدیمی و جدید را جایگزین کنید. به مثال زیر دقت نمایید:

let list = document.querySelector('ul');
let oldItem = list.querySelector('li');
let newItem = document.createElement('li');
newItem.innerHTML = 'Las Vegas';
let replacedItem = list.replaceChild(newItem, oldItem);

Node.cloneNode

با استفاده از این متد می‌توانید یک نمونه مشابه از المانی که به آن می دهید را ایجاد کنید. زمانی که قصد ایجاد یک المان تکراری را در صفحه دارید می‌توانید بجای اجرای دوباره دستور قبلی از این دستور استفاده کنید. البته این دستور قبل از اجرا شدن یک شرط برای بررسی وجود المان ورودی را اجرا می‌کند اگر مقدار برگشتی true باشد سپس یک مقدار جدید را ایجاد می‌کند:

let list = document.querySelector('ul');
let clone = list.cloneNode();

Element.getAttribute / Element.setAttribute

با استفاده از متد Element.getAttribute می‌توانید مقدار خاصیت داده شده به یک المان را بررسی کرد. حال اگر خودتان بخواهید یک خاصیت را روی یک المان قرار دهید می‌توانید از متد set استفاده کنید. این متد دو ورودی «اولی نام خاصیت و دومی مقدار خاصیت» را دریافت می‌کند:

let list = document.querySelector('ul');
list.setAttribute('id', 'my-list');
let id = list.getAttribute('id');
console.log(id); // outputs my-list

در این حالت ابتدا المان مادر گرفته شده و سپس با استفاده از متد set روی آن خاصیت id با مقدار my-list اعمال شده است. در خط سوم با استفاده از دستور get مقدار خاصیت id دریافت شده که اگر خروجی را مشاهده کنید برابر my-list خواهد بود. 

Element.hasAttribute / Element.removeAttribute

متد hasAttribute وجود یک خاصیت مشخص را روی یک المان بررسی می‌کند. خروجی این متد یک مقدار boolean خواهد بود. با استفاده از دستور removeAttribute هم می‌شود یک خاصیت را از یک المان حذف کرد. در زیر یک مثال از حالت را می‌توانید مشاهده کنید:

let list = document.querySelector('ul');
if (list.hasAttribute('id')) {
    console.log('list has an id');
    list.removeAttribute('id');
};

ابتدا المان مادر گرفته شده و سپس از طریق یک دستور شرطی وجود خاصیت id را بررسی کرده‌ایم. سپس در صورت وجود متد removeAttribute را برای حذف id فراخوانی می‌کنیم.

Element.insertAdjacentHTML

این متد یکسری از متون ویژه داخل HTML را دریافت کرده و براساس آن‌ها موقعیت یک المان را در DOM مشخص می‌کند. برای مثال تصور کنید که دستورات HTML زیر را در اختیار دارید:

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  <p>Hello World</p>
  <!-- beforeend -->
</div>
<!-- afterend -->

حال اگر جاوااسکریپت زیر را اجرا کنید یک آیتم جدید به قبل از تگ p اضافه می‌شود:

var list = document.querySelector('ul');
list.insertAdjacentHTML('afterbegin', '<li id="first-item">First</li>');

برای استفاده از این متد ابتدا باید به خوبی HTML را آماده کرده باشید.

در پایان

امیدوارم که این مطلب توانسته باشد شما را با DOM و تکنیک‌های کاربردی آن به خوبی آشنا کند. اگر قصد یادگیری عمیق‌تر این مسئله را دارید می‌توانید به دوره آموزشی «آموزش جاوااسکریپت» مراجعه کنید.

منبع