DOM چیست؟ و مدیریت آن

DOM چیست؟ احتمالا سوالی هست که شمارو به سمت این مقاله کشانده. dom یک مفهوم فوق العاده مهم در توسعه وب است که به نظر من هر توسعه دهنده وب (مخصوصاً توسعه دهندگان frontend) باید بدانند که چیست و چگونه می توان از آن استفاده کرد. و این دقیقا همان چیزی است که در این مقاله مورد بررسی قرار می گیرد.

DOM چیست ؟

برای ایجاد یک web page حداقل چیزی که شما نیاز دارید یک فایل HTML است.برای مثال این یک فایل خیلی ساده HTML است:

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

<!DOCTYPE html>

<html>

<head>

<title>A very basic page</title>

</head>

<body>

<p>This is a very basic page.</p>

</body>

</html>

اگر شما کدهای بالا را در یک فایل با پسوند .html ذخیره کنید و در مرورگر باز کنید.خروجی زیر برای شما render خواهد شد

و اگر شما از inspect استفاده کنید، دقیقاً همان نشانه گذاری های فایل HTML را نشان می دهد که ما ایجاد کرده ایم.

تغییر صفحه به صورت داینامیک

حالا console مرورگر را باز کنید و کدهای زیر را اجرا کنید :

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

const newParagraph = document.createElement('p');

newParagraph.innerText = 'And this is a dynamically created paragraph';

document.body.appendChild(newParagraph);

اگر اینکار را انجام دادید، خروجی زیر را باید در مرورگر ببینید:

و اگر دوباره از صفحه inspect بگیرید، دو پاراگراف به جای فقط یک پارامتر قابل مشاهده است:

این پاراگراف به صورت پویا ، با استفاده از JavaScript و نه با تغییر منبع اصلی صفحه ایجاد شده است. هنگام inspect از یک صفحه می گیرید ، representation آن در حافظه و نه کد واقعی آن را مشاهده می کنید. این همان چیزی است که ما آن را (DOM (Document Object Model می نامیم. به عبارت دیگر ، هنگام درخواست یک صفحه داده شده در مرورگر ، کد منبع آن fetch ، تجزیه و در حافظه ذخیره می شود. از آن لحظه به بعد ، منبع اصلی دیگر نیازی نیست و آن نسخه در حافظه به صورت داینامیک کنترل می شود تا به هر آنچه که توسعه دهنده می خواهد با آن صفحه انجام دهد ، برسد.

کتابخانه هایی مانند React و Framework هایی مانند Vue.js و Angular به ما این امکان را می دهند که برنامه های وب پیچیده ای با صدها Component ایجاد کنیم که دارای یک فایل HTML بسیار ساده که فقط برنامه را “boots” می کند. عملاً همه کارها با جاوا اسکریپت به صورت داینامبک انجام می شود. این بدان معناست که DOM در اکثر قسمتهای برنامه های وب مدرن تفاوت معناداری با HTML source اصلی خود خواهد داشت.

nodes چیست؟

DOM یک ساختار سلسله مراتبی است که از قطعات کوچکی به نام گره(node) ساخته شده است. چندین نوع گره وجود دارد ، درلیست زیر برخی از آنها وجود دارد:

(Elements: paragraphs, divs, inputs, buttons, etc. (Type: Node.ELEMENT_NODE

(Text: Every text within a document is a separate node. (Type: Node.TEXT_NODE

(Attributes: Each attribute of an element is also a node. (Type: Node.ATTRIBUTE_NODE

(Document: The document object itself is a node (Type: Node.DOCUMENT_NODE

(Comments: Yes, even HTML comments are nodes. (Type: Node.COMMENT_NODE

از آنجا که ساختار DOM به صورت یک درخت ساخته شده است ، گره هایی مانند document و elements می توانند فرزند داشته باشند. همگی این فرزندان دارای children property هستند که یک HTMLCollection است (لیستی که فقط شامل elements است). از طرف دیگر ، همه گره ها دارایchildNodes property هستند ، حتی آنهایی که اجازه nesting را نمی دهند (مانند نظرات). این property یک NodeList است که مجموعه ای از گره ها (و نه تنها elements ) است.

مدیریت DOM

پیدا کردن element ازطریق ID

یک راه ساده برای retrieve یک element از طریق ID استفاده از document.getElementById است.

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

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

از آنجا که ID منحصر به فرد است ، این روش یک single element را برمی گرداند یا اگر چیزی پیدا نشود ،null را برمی گرداند.

فریمورک های Frontend که باید در سال 2021 یاد بگیرید

پیدا کردن element ازطریق name

برای پیدا کردن یک element از طریق name میتوانید از document.getElementsByName استفاده کنید

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

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

این method یک NodeList را بر می گرداند.

پیدا کردن element ازطریق class name

به منظور پرس و جو از DOM برای elements از طریق class name از document.getElementsByClassName استفاده کنید.

const cards = document.getElementsByClassName('card');

1	const cards = document.getElementsByClassName('card');

این method یک HTMLCollection( یک collection که فقط شامل elements است و نه نوع دیگری از nodes).

پیدا کردن element ازطریق tag name

همچنین این امکان وجود دارد که شما تمامی elements هایی که یک type خاصی دارند از طریق document.getElementsByTagName پیدا کنید

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

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

این method یک HTMLCollection را return می کند.

پیدا کردن element ازطریق هر چیزی.

با استفاده از document.querySelectorAll شما می توانید از هر CSS selector برای query بر روی DOM استفاده کنید

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');

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');

این method یک NodeList را برمی گرداند.

یک method بسیار مشابه به نام document.querySelector وجود دارد که اولین مورد پیدا شده را بر می گرداند و در صورت پیدا نکردن چیزی null بر می گرداند.

ایجاد یک element

همانطور که در بخش اول دیدیم ، برای ایجاد یک عنصر ، شما باید از روش document.createElement استفاده کنید و نام tag را به عنوان argument ارائه دهید.

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

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

این methode یک reference به element ایجاد شده را بر می گرداند.این element هنوز بخشی از DOM نیست.ما باید صریحا آن را اضافه کنیم.

اضافه کردن element به document body یا هر element

به منظور اضافه کردن element به document body یا هر element دیگری،باید از appendChild استفاده کنید.

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

document.body.appendChild(menu);

usersList.appendChild(newUser);

signUpForm.appendChild(companyNameInput);

گرفتن مقدار یک attribute

اگر شما قصد داشته باشید value یک element’s attribute رو بگیرید باید از getAttribute استفاده کنید

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

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

این method در واقعattribute value یا null را بر می گرداند.

مقدار دهی به attribute

مقداردهی یک attribute با استفاده از setAttribute بسیار آسان است.

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

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

استایل دهی element به صورت خودکار

شکل ظاهری یک element را می توان به راحتی از طریق style property کنترل کرد. این شامل ده ها ویژگی مانند display ، backgroundColor ، maxWidth ، fontWeight و بسیاری دیگر است. هر aspect ای که توسط CSS قابل کنترل است نیز از این طریق قابل کنترل است:

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

productDetails.style.display = 'none';

menu.style.marginLeft = '10px';

backButton.style.borderStyle = 'solid';

همانطور که ممکن است متوجه شده باشید ، این خواص camel cased است. بنابراین ، یک ویژگی CSS مانند list-style-type تبدیل به listStyleType می شود و border-right-bottom به borderRightBottom خواهد بود.

virtual DOM چیست ؟

تغییر دادن DOM گاهی اوقات می تواند یک عملیات expensive باشد.به همین دلیل React از Virtual DOM استفاده می کند که یک نسخه از DOM واقعی را در حافظه نگه می دارد و کپی و نسخه اصلی را در فرایندی به نامreconciliation همگام سازی(sync) می کند.برای درک بهتر این موضوع می توانید مقاله درک Virtual DOM در React را مطالعه کنید.

نتیجه گیری :

DOM یک in-memory representation از سورس کد اصلی است.
DOM از قطعات کوچکی به نام nodes ساخته شده است.
انواع متفاوتی از node مانند elements, attributes, text و comments وجود دارد.
راه های متفاوتی برای retrieve elements از DOM وجود دارد.حتی این امکان وجود دارد که شما از CSS selector برای اجرای یک query استفاده کنید.
شما می توانید DOM را به روش های مختلف تغییر دهید ، گره اضافه کنید ، attributes ها را تغییر دهید و element ها را استایل دهی کنید .

[منبع]

DOM چیست؟ و مدیریت آن

DOM چیست ؟

تغییر صفحه به صورت داینامیک

nodes چیست؟

مدیریت DOM

پیدا کردن element ازطریق ID

پیدا کردن element ازطریق name

پیدا کردن element ازطریق class name

پیدا کردن element ازطریق tag name

پیدا کردن element ازطریق هر چیزی.

ایجاد یک element

اضافه کردن element به document body یا هر element

گرفتن مقدار یک attribute

مقدار دهی به attribute

استایل دهی element به صورت خودکار

virtual DOM چیست ؟

نتیجه گیری :

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

DOM چیست ؟

تغییر صفحه به صورت داینامیک

nodes چیست؟

مدیریت DOM

پیدا کردن element ازطریق ID

پیدا کردن element ازطریق name

پیدا کردن element ازطریق class name

پیدا کردن element ازطریق tag name

پیدا کردن element ازطریق هر چیزی.

ایجاد یک element

اضافه کردن element به document body یا هر element

گرفتن مقدار یک attribute

مقدار دهی به attribute

استایل دهی element به صورت خودکار

virtual DOM چیست ؟

نتیجه گیری :

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش کار با timing event ها

تفاوت توسعه برنامه های android و ios

معرفی DOM به زبان ساده

constructor function در جاوااسکریپت

factory function در جاوا اسکریپت

دیدگاهتان را بنویسید لغو پاسخ