جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگمقالاتبرنامه نویسیDOM چیست و چه کاربردی دارد؟

DOM چیست و چه کاربردی دارد؟

22 دی 1400
ارسال شده توسط همیار من
برنامه نویسی ، دوره های رایگان ، مقالات
327 بازدید
لوگو ادمین سایت

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در همیار من می‌خواهیم بررسی کنیم که DOM چیست؟ و چه کاربردی دارد. با ما همراه باشید.

آشنایی با معنی DOM

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

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

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

DOM چیست؟


شاید این مطالب را دوست داشته باشید:

  • پایتون بهتر است یا جاوا؟ مقایسه‌ی دو زبان برنامه نویسی قدرتمند جهان
  • برترین فریم ورک های جاوا اسکریپت در 2021
  • آموزش رایگان HTML مقدماتی تا پیشرفته بخش تگ ها

DOM یک مدل و ساختار درختی از تمام عناصر HTML درون یک صفحه وب است. که در آن عناصر HTML به عنوان اشیاء در نظر گرفته می‌شوند.

نکته: عناصر HTML همان تگ‌های HTML هستند.

DOM یک API (رابط برنامه نویسی) برای جاوا اسکریپت است که به برنامه نویس این اجازه را می‌دهد تا:

  • تگ‌های (عناصر) HTML را حذف، اضافه یا تغییر دهد.
  • خصیصه‌های attribute) HTML) را حذف، اضافه یا تغییر دهد.
  • استایل‌های CSS را حذف، اضافه یا تغییر دهد.
  • به رویداد‌های Event) HTML) واکنش نشان دهد.
  • رویداد‌های HTML را حذف، اضافه یا تغییر دهد.

برای جا افتادن این موضوع فرض کنید یک صفحه وب که حاوی کد‌های HTML زیر است، داریم:

1
2
3
4
5
6
7
8
9
<html>
<head>
<title> My title </title>
</head>
<body>
<h1> My header </h1>
<a href="https://Myhamyar.com"> My link </a>
</body>
</html>

 

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

درخت اشیاء ساخته شده توسط مرورگر
درخت اشیاء ساخته شده توسط مرورگر

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

این ساختار درختی در اختیار برنامه‌نویس جاوا اسکریپت است تا بتواند هر تغییری در این ساختار ایجاد کند! به همین راحتی.

اگر علاقه‌مند به موضوع DOM شدید باید به سراغ یادگیری زبان جاوا اسکریپت بروید.

اشتراک گذاری:
برچسب ها: DOMDOM چیستآموزشآموزش DOMآموزش وب سایتتعریف DOMدورهدوره رایگانکاربرد DOM
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

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

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...

کسب درآمد از آموزش آنلاین چگونه است؟

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

بهترین ابزارهای رایگان برای حذف پس زمینه تصاویر

برای حذف پس زمینه تصاویر ابزارهای متعددی در اینترنت وجود دارد. هر کدام از آن‌ها...
همیارمن

افزایش امنیت پیج اینستاگرام 😎😎

افزایش امنیت پیج اینستاگرام از جمله مسائلی است که اقشار مختلف جامعه را درگیر خود...
همیارمن

آموزش افزودن تصویر به دسته بندی در وردپرس

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

راه های خنک کردن گوشی موبایل های داغ شده

تا چند سال پیش، نهایت کاری که گوشی‌های موبایل برای ما انجام می‌دادند، ارسال پیامک...

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

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت