خواندن ۵ دقیقه·۳ سال پیش

معرفی DOM و مدیریت آن

یکی از مهمترین مفهوم هایی که برنامه نویسان فرانت اند با آن مواجه می شوند، درک مفهوم DOM است. با استفاده از زبان برنامه نویسی جاوااسکریپت می توانیم ساختار DOM را تغییر دهیم. در این مقاله، ابتدا با مفهوم DOM آشنا می شویم و سپس با نحوه مدیریت آن آشنا می شویم. با من همراه باشید.

فهرست مطالب
معرفی DOM
معرفی Nodes
مدیریت DOM
- پیدا کردن المنت از طریق ID
- پیدا کردن المنت از طریق name
- پیدا کردن المنت از طریق نام class
- پیدا کردن المنت ازطریق نام tag
- پیدا کردن المنت ازطریق هر چیزی
- پیدا کردن اولین المنت ازطریق هر چیزی
- ایجاد یک المنت
- اضافه کردن المنت به body یا هر المنت دیگری
- گرفتن مقدار یک ویژگی (attribute)
- مقدار دهی به ویژگی های المنت attribute
- استایل دهی به المنت ها

معرفی DOM

فرض کنید یک صفحه وب ساده با استفاده از Html ایجاد کرده ایم و می خواهیم با استفاده از جاوااسکریپت تغییراتی را در این صفحه ایجاد نمائیم. مثلا یک پاراگراف را به این صفحه اضافه نمائیم یا با کلیک بر روی دکمه یا بخشی از صفحه تغییراتی ایجاد نمائیم. یا بخشی از محتوا را داینامیک نمائیم. این تغییرات در DOM اتفاق می افتد. به عبارت دیگر DOM (Document Object Model) روشی برای دسترسی به عناصر صفحات وب و اعمال تغییرات بر روی آن ها می باشد. هنگام استفاده از DOM هر یک از تگ های Html به عنوان یک شی در نظر گرفته می شوند. این اشیا مانند سایر اشیا در جاوااسکریپت دارای ویژگی ها و متدهایی می باشند.

برای درک بهتر مفهوم DOM مثالی را برای شما آماده کرده ام. برای ایجاد یک صفحه وب حداقل چیزی که نیاز داریم یک فایلHtml می باشد. در زیر یک فایل ساده Html ایجاد می نمائیم.

<!DOCTYPE html>
<html>
  <head>
    <title> Simple Web Page</title>
  </head>
  <body>
    <p>Dom and management DOM</p>
  </body>
</html>

اگر این کدها را در یک فایل با پسوند html. ذخیره نمائیم و با استفاده از یک مرورگر آن را باز نمائیم، یک صفحه وب ساده خواهیم داشت. با کلیک راست روی صفحه و انتخاب گزینه اینسپکت (inspect)، دقیقا همین کدها را مشاهده خواهیم کرد.

حال با استفاده از جاوااسکریپت قصد داریم یک پاراگراف را به این صفحه وب اضافه نمائیم. با استفاده از دستورات زیر در کنسول یا قرار دادن تگ script در قسمت body فایل اصلی خود، یک پاراگراف به صفحه ما اضافه می شود.

const Paragraph = document.createElement('p');
Paragraph.innerText = 'I am dynamic paragraph';
document.body(Paragraph);

حال اگر کدها را ذخیره نمائیم و کیلک راست نمائیم و اینسپکت صفحه را بگیریم مشاهده خواهیم کرد که یک پاراگراف به کدهای ما اضافه شده است.

این پاراگراف بدون تغییر در منبع اصلی کدهای ما (فایل html.) و با استفاده از Dom ایجاد شده است.

معرفیNodes

ساختار DOM یک ساختار سلسله مراتبی یا درختی می باشد، که از قطعات کوچک تری به نام Node یا گره ایجاد شده است. که این گره ها می توانند شامل گره های دیگری باشند. گره ها هم خود دارای انواع مختلفی هستند که در زیر به آنها اشاره می نمائیم.

- المنت ها: تگ های Html از این دسته هستند. مانند دکمه ها، ورودی ها، تگ های div و پاراگراف ها و ...

- متن ها: هر متنی که در صفحه درون تگ های Html وجود داشته باشد یک گره به حساب می آید.

- ویژگی ها: ویژگی های المنت ها به صورت مجزا یک گره به حساب می آیند.

- داکیومنت (document): عنصر ریشه DOM خودش یک گره به حساب می آید. داکیومنت بالاترین گره می باشد.

- هر کامنت Html هم یک گره به حساب می آید.

در ادامه به نحوه مدیریت DOM می پردازیم.

مدیریت DOM

مدیریت DOM یعنی چه؟ همان طور که در بالا گفته شد با استفاده از DOM می توانیم عناصر مختلف در صفحه را دریافت نمائیم و تغییراتی در آنها ایجاد نمائیم یا یک رویداد برای برخی از عناصر تعریف نمائیم یا حتی عناصر جدیدی تحت شرایطی که خودمان مشخص می نمائیم، ایجاد نمائیم. عناصر صفحه را با استفاده از متدهای گوناگونی می توان دریافت کرد که در زیر به آنها اشاره می نمائیم.

پیدا کردن المنت از طریق ID

یکی از متدهایی که می توانیم با استفاده از آن المنت ها را دریافت نمائیم document.getElementById می باشد. با توجه به اینکه id در فایل های Html به صورت یکتا می باشد، فقط یک المنت را به ما می دهد.

const btn= document.getElementById(&quotbutton&quot);

پیدا کردن المنت از طریق name

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

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

پیدا کردن المنت از طریق نام class

با استفاده از متد document.getElementByClassName می توانیم مجموعه ای از المنت ها که دارای یک کلاس هستند را دریافت نمائیم.

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

پیدا کردن المنت از طریق نام tag

با استفاده از این متد می توانیم مجموعه ای از تگ های مشابه در صفحه را دریافت نمائیم

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

پیدا کردن المنت از طریق هر چیزی

با استفاده از این متد می توانیم با استفاده از سلکتورهای css برای دریافت بر روی DOM استفاده نمائیم.

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

پیدا کردن اولین المنت از طریق هر چیزی

این متد مشابه document.querySelectorAll می باشد با این تقاوت که اولین موردی را که پیدا نماید بر می گرداند.

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

ایجاد یک المنت

برای ایجاد یک عنصر از دستور زیر استفاده می نمائیم و نام تگ مورد نظر را به آن می دهیم

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

اضافه کردن المنت به body یا هر المنت دیگری

با استفاده از متد زیر می توانیم المنت های ایجاد شده را به المنت های دیگر یا تگ body صفحه خود اضافه نمائیم.

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

گرفتن مقدار یک ویژگی (attribute)

برای دریافت ویژگی های هر المنت می توانیم از دستور زیر استفاده نمائیم.

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

مقدار دهی به ویژگی های المنت

با استفاده از متد زیر می توانیم برای المنت های داخل صفحه یا المنت های ایجاد شده در صفحه ویژگی هایی مشخص نمائیم و مقدار آنها را تعیین نمائیم. مقدار اول نام ویژگی و مقدار دوم مقدار ویژگی می باشد.

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

استایل دهی به المنت ها

با استفاده از این دستور می توانیم به صورت مستقیم به المنت های خود استایل دهیم، تمامی استایل های Css را از این طریق می توانیم به المنت خود اضافه نمائیم. فقط نکته ای که باید به آن توجه داشته باشید، تفاوت نام استایل ها در این روش با Css می باشد. مثلا در Css به صورت زیر نام استایل ها را مشخص می نمائیم.

font-size: 20px;
margin-right: 20px;

اما در جاوا اسکریپت به صورت کمل کیس (Camel Case) نام استایل ها را مشخص می نمائیم.

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

علاوه بر متدهای بیان شده در بالا، متدهای دیگری هم در جاوااسکریپت برای مدیرت Dom وجود دارد. در این مقاله سعی کردم که متدهای اصلی را معرفی نمایم. امیدوارم این مقاله براتون مفید بوده باشه.

dom

میثم مینوئی

درباره تجربیات کاری و مسیر خودم اینجا می نویسم

شاید از این پست‌ها خوشتان بیاید