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

اچ تی ام ال DOM چیست؟ و نحوه دستکاری آن توسط JS

برای درک بهتر معنی DOM، با یک مثال شروع می‌کنیم، فرض کنید در یک صفحه وب می‌خواهیم در حین اجرای صفحه، در عناصر HTML تغییراتی ایجاد کنیم. مثلا یک تگ (عنصر) را حذف کنیم و یا خصوصیات (Attribute) آن را تغییر دهیم. همچنین در بسیاری از مواقع برای تعامل با کاربر به DOM نیاز داریم. برای مثال می‌ خواهیم وقتی روی یک دکمه کلیک شد عنصر خاصی را به صفحه اضافه کنیم و یا پیامی را نمایش دهیم. خب برای همه‌ی این کار‌ها به دستکاری کد‌های HTML نیاز داریم. یا به عبارتی دیگر به DOM نیاز داریم. حال که متوجه کاربرد‌ های آن شدید می‌ توانیم درمورد خود DOM و مفهوم آن صحبت کنیم.

دام (DOM) چیست؟

دام (DOM) مخفف Document Object Model است که یک مدل و ساختار درختی از تمام عناصر HTML درون یک صفحه وب می باشد. که در آن عناصر HTML به عنوان اشیاء در نظر گرفته می‌شوند. DOM یک API (رابط برنامه نویسی) برای جاوا اسکریپت است که به برنامه نویس این اجازه را می‌دهد تا :

تمام عناصر HTML در یک صفحه را تغییر دهد.
تمام Attribute های عناصر HTML را تغییر دهد.
تمام دستورات CSS صفحه را تغییر دهد.
تمام Attribute ها و عناصر مختلف HTML را حذف کند.
عناصر جدید HTML را در صفحه ایجاد کند.
نسبت به رویداد های (Event) صفحه واکنش نشان دهد و کارهای مختلفی را انجام دهد.
رویداد های (Event) مختلفی را در صفحه ایجاد کند.

وقتی صفحه وب بارگذاری شد، مرورگر یک DOM: Document Object Model از صفحه می‌ سازد. که در واقع این مدل یک درخت اشیاء (عناصر HTML درون صفحه) است. برای درک راحت تر این موضوع به شکل زیر توجه کنید:

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

کار با DOM

وقتی از خصوصیات DOM صحبت می کنیم، منظورمان مقادیری است که می توان تعیین کرد (مانند تغییر دادن محتوای عناصر HTML) و هنگامی که از متدهای DOM صحبت می کنیم منظورمان اعمالی است که می توانیم انجام دهیم (مانند حذف کردن و یا اضافه کردن عناصر).

در مثال زیر می خواهیم محتوای (که همان innerHTML است) تگ <p> ای را تغییر دهیم که دارای "id="demo باشد:

<!DOCTYPE html>
<html>
<body>

<h2>My First Page</h2>

<p id=&quotdemo&quot></p>


document.getElementById(&quotdemo&quot) = &quotHello World!&quot


</body>
</html>

در مثال بالا getElementById یک متد است اما innerHTML یک خصوصیت (property) است. متد getElementById همانطور که از نامش مشخص است یک عنصر HTML را دریافت کرده و به جاوا اسکریپت می دهد. سپس innerHTML محتوای آن را نشان می دهد. ما می توانیم این محتوا را تغییر دهیم تا محتوای تگ نیز تغییر کند. برای دسترسی به عناصر HTML راه های زیادی وجود دارد و دسترسی از طریق id یکی از رایج ترین روش های آن است که در مثال بالا دیدید. همچنین باید بدانید innerHTML می تواند به محتوای تمام عناصر HTML دسترسی پیدا کند، حتی <html> و <body>

شیء Document

شیء Document نماینده ی صفحه ی وب شما و صاحب تمام اشیاء دیگر در سند HTML است. بنابراین اگر بخواهید به عنصری در HTML دسترسی پیدا کنید باید با شیء Document شروع کنید. به مثال های زیر توجه کنید:

برای پیدا کردن (دسترسی به) عناصر HTML :

برای تغییر دادن عناصر HTML :

برای اضافه و یا حذف کردن عناصر HTML :

برای اضافه کردن رویداد (Event) ها :

پیمایش (Traversing) DOM در جاوا اسکریپت

راه‌ های زیادی برای پیمایش DOM در جاوااسکریپت وجود دارد. حال می خواهیم بررسی کنیم چگونه با استفاده از گره‌ های (Node) والد، فرزند و خواهر و برادر این کار را انجام دهیم. همانطور که بالاتر اشاره کردیم، DOM یک ساختار داده درختی از گره‌ ها است و همچنین متد هایی که می‌ توانید برای دسترسی به عناصر DOM استفاده کنید را ذکر کردیم. حال برای سهولت کار مثال زیر را با هم بررسی می کنیم:

گره ریشه

این گره شروع درخت DOM می‌باشد که اساسا Document است. این شی نوعی ویژگی Window در نظر گرفته می‌شود. حتی اگر HTML خالی بارگذاری شود، گره ریشه و عناصر ریشه را خواهد داشت که به شرح زیر است.

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

گره‌ های والد

این گره خاص گرهی است که مستقیما بالای آن در درخت DOM قرار دارد. گره والد بیش از آنچه هست در سلسله مراتب به Document نزدیک تر خواهد بود. اگر بخواهیم از گره والد عبور کنیم، می‌توان از روش پیمایش DOM زیر استفاده کرد.

<currentNode>;

به جای parentNode، برای بازیابی گره عنصر والد نیز می‌توان از parentElement استفاده کرد. برای دسترسی به جد گره فعلی که دو سطح بالاتر است می توان از روش زیر استفاده کرد.

<currentNode>;

توجه : عنصر والد <html> خود Document است. بنابراین اگر بخواهید والد HTML را بازیابی کنید، null خواهد شد. با این حال گره والد <html> به عنوان Document# بر می‌گردد.

گره‌های فرزند

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

نکته : برای تغییر ویژگی یک ظاهر طراحی شده باید از firstElementChild به جای firstChild استفاده کنید. این به این دلیل است که text ، firstChild را به دلیل تو رفتگی بر می‌گرداند.

گره‌ های خواهر و برادر

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

نکته : مشابه عناصر والد و فرزند، خصوصیات خواهر و برادر نیز می‌توانند به هم متصل شوند.

اچ تی ام ال dom dom جاوا اسکریپت document node

آترین عباسیان

طراح رابط و تجربه کاربری ( UI/UX )

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