DOM مفهوم بسیار مهمی در توسعه‌ی وب است و کسانی که در زمینه‌ی توسعه‌ی وب به خصوص فرانت‌اند فعالیت می‌کنند باید نحوه مدیریت آن را بلد باشند. در این مطلب به این موضوع می‌پردازیم.

DOM چیست؟

برای ساختن یک صفحه وب، حداقل چیزی که نیاز دارید یک فایل HTML است. برای مثال، کد HTML زیر برای یک صفحه ساده است:

 

<!DOCTYPE html>
<html>
<head>
  <title>A very basic page</title>
</head>
<body>
  <p>This is a very basic page.</p>
</body>
</html>

 

اگر این کد را در یک فایل HTML ذخیره و در یک مرورگر اجرا کنید، نتیجه زیر را مشاهده خواهید کرد:

 

This is a very basic page.

 

در صورتی که از گزینه inspect برای بررسی صفحه استفاده کنید، دقیقا کدی که در فایل HTML نوشتیم را مشاهده خواهید کرد.

ایجاد تغییرات در صفحه به صورت پویا

اکنون، کنسول مرورگر خود را باز کرده و کد زیر را در آن اجرا کنید:

 

const newParagraph = document.createElement('p');
newParagraph.innerText = 'And this is a dynamically created paragraph';
document.body.appendChild(newParagraph);

 

در صورت اجرا، نتیجه‌ی زیر را مشاهده می‌کنید:

 

This is a very basic page.
And this is a dynamically created paragraph.

 

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

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

کتابخانه‌هایی مانند React و فریم‌ورک‌هایی مانند Vue و Angular امکان ایجاد برنامه‌های وب پیچیده را با صدها کامپوننت، با داشتن یک صفحه HTML بسیار ساده که برنامه را اجرا می‌کند، برای ما فراهم می‌کنند. در عمل تمام کار‌ها به صورت پویا به وسیله جاوااسکریپت انجام می‌شود. در نتیجه DOM به اندازه قابل توجهی با کد اصلی HTML در بسیاری از اپلیکیشن های وب مدرن متفاوت خواهد بود.

 

[button class=”github-btn” href=”http://frontcast.ir/react-vue-angular”]ویدیوی آموزشی: بررسی و مقایسه Angular – Vue – React[/button]

 

Node چیست؟

DOM یک ساختار سلسله‌ مراتبی متشکل از بخش‌های کوچک به نام Node دارد. Nodeها انواع مختلفی دارند، از جمله مواردی که در ادامه معرفی می‌کنیم:

Elementها: از جمله پاراگراف‌ها، divها، inputها، دکمه‌ها و غیره.

Text(متن): هر متنی در داخل یک Document یک Node جداگانه است.

Attribute (ویژگی‌ها): هر ویژگی  متعلق یک المنت خود یک Node است.

Document: آبجکت Document خود یک Node است.

Commentها: حتی Comment های HTML نیز node  هستند.

از آنجائی‌ که DOM ساختار درختی دارد، Nodeها می‌توانند فرزند داشته باشند. چنین Nodeهایی که امکان زیر مجموعه بودن یا Nesting را فراهم می‌کنند، دارای ویژگی Children هستند.

از طرفی تمام Nodeها دارای ویژگی childNodes هستند. حتی Nodeهایی مانند Comment که امکان زیر مجموعه بودن را فراهم نمی‌کنند، یک مجموعه از Node هستند.

مدیریت و کنترل DOM

در بخش قبل، به صورت پویا یک پاراگراف ساخته و به document اضافه کردیم.  در ادامه با روش های دیگری برای تغییر دادن DOM آشنا می‌شویم.

پیدا کردن یک المنت با استفاده از Id

یک روش ساده برای بازیابی یک المنت به وسیله ID آن استفاده از متد document.getElementById است.

 

const menuEl = document.getElementById('main-menu');

 

به دلیل اینکه ID مقدار منحصر به فردی دارد، این متد تنها یک المنت را برمی‌گرداند. در صورتی که المنتی با آن ID پیدا نکند مقدار null را بر میگرداند.

پیدا کردن یک المنت با استفاده از Name

برای پیدا کردن یک المنت با استفاده از نام آن می‌توان از متد document.getElementByName استفاده کرد که این متد یک NodeList بر میگرداند.

 

const ageInput = document.getElementsByName('age');

 

پیدا کردن یک المنت با استفاده از ClassName

برای پیدا کردن المنت‌های DOM با استفاده از نام کلاس آن‌ها از متد document.getElementByClassName می‌توان استفاده کرد. این متد یک HTMLCollection یعنی مجموعه‌ای از المنت ها بر میگرداند.

 

const cards = document.getElementsByClassName('card')

 

پیدا کردن یک المنت با استفاده از TagName

همچنین می‌توان برای پیدا کردن المنت‌هایی از یک نوع مشخص از متد document.getElementByTagName استفاده کرد که یک HTMLCollection بر میگرداند.

const headings = document.getElementsByTagName('h1');

 

پیدا کردن المنت‌ها با استفاده از CSS selector ها

با استفاده از متد document.querySelectorAll می‌توان از selector های مختلف CSS برای پیدا کردن المنت‌ها استفاده کرد. این متد نیز یک NodeList بر میگرداند.

 

const navLinks = document.querySelectorAll('#navbar li:not(:first-child) a');
const signUpInputs = document.querySelectorAll('#sign-up input');
const editButtons = document.querySelectorAll('[data-action="edit"]');
const menuEl = document.querySelectorAll('#main-menu');
const cards = document.querySelectorAll('.card');

 

متد document.querySelector نیز تنها اولین Selector مورد نظر را بر میگرداند.

ساختن یک المنت

همانطور که در قسمت اول مطلب دیدید، برای ساختن یک المنت از متد document.createElement استفاده می‌شود که نام تگ مورد نظر را به عنوان آرگومان می‌پذیرد.

 

const button = document.createElement('button');

 

این متد یک رفرنس به المنت ساخته شده بر میگرداند. این المنت بعد از ساخته شدن قسمتی از DOM نیست و باید آن را به DOM اضافه کنیم.

افزودن یک المنت به document body یا المنت‌های دیگر

برای اضافه کردن یک المنت به body یا هر المنت دیگری، می‌توان از متد appendChild استفاده کرد:

 

document.body.appendChild(menu);
usersList.appendChild(newUser);
signUpForm.appendChild(companyNameInput);

 

بدست آوردن مقدار یک attribute

از متد getAttribute به منظور بدست آوردن مقدار attribute استفاده می‌شود. این متد در صورت نبود مقدار مورد نظر، null بر میگرداند.

 

const action = button.getAttribute('data-action');

 

تنظیم مقدار یک attribute

از متد setAttribute برای مقداردهی به attribute استفاده می‌شود.

 

button.setAttribute('data-action', 'edit');

 

استایل‌دهی پویا به یک المنت

با استفاده از ویژگی style به راحتی می‌توان ظاهر یک المنت را مدیریت کرد. Style شامل ویژگی‌های بسیاری مانند display، backgroundColor، maxWidth، fontWeight و … است. هرچیزی که با استفاده از CSS قابل کنترل باشد، به صورت پویا نیز قابل کنترل است.

 

productDetails.style.display = 'none';
menu.style.marginLeft = '10px';
backButton.style.borderStyle = 'solid';

 

نکته مهم این است که این ویژگی‌ها در جاوااسکریپت به صورت Camel Case نوشته می‌شوند. به عنوان مثال یک ویژگی که در CSS به صورت list-style-type نوشته شود، در استایل‌دهی در DOM به صورت listStyleType نوشته می‌شود.

Virtual DOM یا DOM مجازی چیست؟

اعمال تغییرات در DOM می‌توانند زمانبر باشد. به همین دلیل React از رویکردی به نام Virtual DOM استفاده می‌کند که در آن یک کپی از DOM را در حافظه نگه می‌دارد و آن را با DOM واقعی طی فرآیندی همگام‌سازی می‌کند.

 

[button class=”github-btn” href=”https://www.youtube.com/watch?v=6QfN3ghaUfE”]یک ساعت از دوره جامع و پیشرفته React و Redux[/button]