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]
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 هستند.
در بخش قبل، به صورت پویا یک پاراگراف ساخته و به document اضافه کردیم. در ادامه با روش های دیگری برای تغییر دادن DOM آشنا می‌شویم.
یک روش ساده برای بازیابی یک المنت به وسیله ID آن استفاده از متد document.getElementById است.
const menuEl = document.getElementById('main-menu');
به دلیل اینکه ID مقدار منحصر به فردی دارد، این متد تنها یک المنت را برمی‌گرداند. در صورتی که المنتی با آن ID پیدا نکند مقدار null را بر میگرداند.
برای پیدا کردن یک المنت با استفاده از نام آن می‌توان از متد document.getElementByName استفاده کرد که این متد یک NodeList بر میگرداند.
const ageInput = document.getElementsByName('age');
برای پیدا کردن المنت‌های DOM با استفاده از نام کلاس آن‌ها از متد document.getElementByClassName می‌توان استفاده کرد. این متد یک HTMLCollection یعنی مجموعه‌ای از المنت ها بر میگرداند.
const cards = document.getElementsByClassName('card')
همچنین می‌توان برای پیدا کردن المنت‌هایی از یک نوع مشخص از متد document.getElementByTagName استفاده کرد که یک HTMLCollection بر میگرداند.
const headings = document.getElementsByTagName('h1');
با استفاده از متد 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 اضافه کنیم.
برای اضافه کردن یک المنت به body یا هر المنت دیگری، می‌توان از متد appendChild استفاده کرد:
document.body.appendChild(menu); usersList.appendChild(newUser); signUpForm.appendChild(companyNameInput);
از متد getAttribute به منظور بدست آوردن مقدار attribute استفاده می‌شود. این متد در صورت نبود مقدار مورد نظر، null بر میگرداند.
const action = button.getAttribute('data-action');
از متد 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 نوشته می‌شود.
اعمال تغییرات در DOM می‌توانند زمانبر باشد. به همین دلیل React از رویکردی به نام Virtual DOM استفاده می‌کند که در آن یک کپی از DOM را در حافظه نگه می‌دارد و آن را با DOM واقعی طی فرآیندی همگام‌سازی می‌کند.
[button class=”github-btn” href=”https://www.youtube.com/watch?v=6QfN3ghaUfE”]یک ساعت از دوره جامع و پیشرفته React و Redux[/button]
تخفیف اردیبهشت فرانت کست از شنبه آینده
کانال تلگرام: t.me/frontcast
دیدگاه‌ها: