DOM چیست و تفاوت SOURCE و DOM چیست؟
بارگذاری...ما در این مطلب از پایگاه دانش نوین وردپرس قصد داریم شما را با تفاوت SOURCE و DOM و همچنین تعریف DOM چیست آشنا کنیم. اینها اصطلاحاتی هستند که در زبان‌های برنامه‌نویسی زبان جاوا اسکریپیت و تکنولوژی آجاکس احتمالاً شنیده‌اید. امیدواریم تا انتهای این آموزش ما را همراهی کنید.
منظور از DOM چیست؟
DOM مخفف Document Object Model یک API برنامه نویسی برای اسناد HTML و XML است که می‌تواند ساختار منطقی اسناد و نحوه دسترسی و دستکاری یک سند را تعریف کند. با استفاده از DOM برنامه‌نویسان می‌توانند اسناد را ایجاد و بسازند، ساختار آنها را هدایت کنند و عناصر و محتوا را اضافه، اصلاح یا حذف کنند. در واقع هر چیزی که در یک سند HTML یا XML پیدا می‌شود را می‌توان با استفاده از DOM به‌دست آورد، تغییر داد، یا اضافه کرد.
Document Object Model به توسعه‌دهندگان وب اجازه می‌دهد تا اسناد را دستکاری، سبک‌دهی و ساختاربندی کنند. به عنوان مثال، عناصر وب به صورت پویا با جاوا اسکریپت دستکاری می‌شوند تا محتوای پویا و تعاملی را به صفحه وب اضافه کنند، در حالی که از CSS برای افزودن زیبایی‌شناسی استفاده می‌شود.
DOM در یک ساختار درخت مانند سلسله مراتبی وجود دارد، جایی که هر عنصر وب که سند را می‌سازد می‌تواند به عنوان یک گره در نظر گرفته شود. در جدول زیر یک نمونه ساختار درختی DOM را مشاهده میکنید:
از ساختار Document Object Model که در بالا نشان داده شده است، متوجه خواهید شد که چگونه هر عنصر به طور مستقیم به عناصر دیگر متصل می‌شود. این به عنوان یک سلسله مراتب شناخته می‌شود. این سلسله مراتب مهم است زیرا تعیین می‌کند که چگونه عناصر چیده شده و چگونه می‌توان با جاوا اسکریپت و CSS به آنها دسترسی داشت.
بیشتر بخوانید: آموزش کار با افزونه Rankie به زبان ساده
منظور از SOURCE چیست؟
کد منبع مجموعه‌ای از دستورالعمل‌ها و عبارات نوشته شده توسط یک برنامه‌نویس با استفاده از یک زبان برنامه‌نویسی کامپیوتر است. این کد بعداً توسط یک کامپایلر به زبان ماشین ترجمه می‌شود. کد ترجمه شده به عنوان کد شی نامیده می‌شود. برنامه‌نویسان می‌توانند نظراتی را به کد منبع خود اضافه تا به توسعه‌دهندگان دیگر کمک کنند تا آن را درک کنند. اسکریپت‌های کوتاه همچنین می‌توانند از کد منبع با استفاده از یک موتور برنامه‌نویسیPHP اجرا شوند.
به عبارت دیگر کد منبع جزء اساسی یک برنامه کامپیوتری است که توسط یک برنامه‌نویس ایجاد می‌شود و اغلب در قالب توابع، توضیحات، تعاریف، فراخوانی‌ها، روش‌ها و سایر عبارات عملیاتی نوشته می‌شود. به گونه‌ای طراحی شده است که برای انسان قابل خواندن باشد و به گونه‌ای قالب‌بندی شده باشد که توسعه‌دهندگان و سایر کاربران بتوانند درک کنند.
مقایسه SOURCE و DOM
اگر میخواهید کد منبع یک صفحه را مشاهده کنید، کافیست وارد صفحه دلخواه خود شده و پس از راست کلیک کردن گزینه View page Source را انتخاب کنید. سپس میتوانید سورس صفحه مورد نظرتان را مشاهده کنید. کد سورس می‌تواند چیزی شبیه به تصویر زیر باشد:
حال اگر میخواهید کدهای جاوااسکریپت همان صفحه را مشاهده کنید، کافیست در همان صفحه راست کلیک کرده و اینبار گزینه inspect را بزنید.
SOURCE و DOM دو مفهوم کلیدی در توسعه وب هستند که اغلب با یکدیگر اشتباه گرفته می‌شوند. SOURCE به کد منبع یک صفحه وب اشاره دارد، در حالی که DOM به ساختار درختی عناصر HTML آن صفحه اشاره دارد.
SOURCE یک فایل متنی است که حاوی کد HTML، CSS و JavaScript صفحه وب است. این کد توسط مرورگر خوانده می‌شود و برای ایجاد ساختار و محتوای صفحه وب استفاده می‌شود.
DOM یک ساختار درختی از تمام عناصر HTML درون یک صفحه وب است. هر یک از عناصر HTML در DOM به عنوان یک شیء در نظر گرفته می‌شوند. این اشیاء دارای تعدادی خاصیت و متد هستند که می‌توان از آنها برای کنترل عناصر HTML استفاده کرد.
تفاوت SOURCE با DOM در این است که SOURCE کد منبع یک صفحه وب است، در حالی که DOM ساختار درختی آن صفحه است. SOURCE توسط مرورگر خوانده می‌شود و DOM توسط جاوا اسکریپت استفاده می‌شود.
در اینجا یک مثال از فرق SOURCE و DOM آورده شده است:
- SOURCE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My website</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my website.</p>
</body>
</html>
- DOM:
const document = window.document;
const h1 = document.querySelector("h1");
const p = document.querySelector("p");
h1.textContent = "Hello, world!";
p.textContent = "This is my website.";
در مثال بالا تفاوت های SOURCE با DOM را دیدیم. کد SOURCE شامل کد HTML برای ایجاد یک عنوان و یک پاراگراف است. کد DOM از DOM برای دسترسی به عناصر HTML و تغییر محتوای آنها استفاده می‌کند.
در اینجا چند نکته دیگر برای درک تفاوت بین SOURCE و DOM آورده شده است:
- SOURCE را می‌توان با استفاده از یک ویرایشگر متن ایجاد کرد، در حالی که DOM را می‌توان با استفاده از جاوا اسکریپت ایجاد کرد.
- SOURCE توسط مرورگر خوانده می‌شود، در حالی که DOM توسط جاوا اسکریپت استفاده می‌شود.
- SOURCE حاوی کد HTML، CSS و JavaScript است، در حالی که DOM حاوی اطلاعات مربوط به ساختار و محتوای عناصر HTML است.
سوالات متداول
در SOURCE شما میتوانید کد منبع یک صفحه را مشاهده کنید. در صورتیکه در DOM میتوانید کدهای جاوااسکریپت یک صفحه را نیز ببینید.
DOM صفحات وب را با نمایش ساختار یک سند مانند HTML که یک صفحه وب را نشان می‌دهد. تفاوت اصلی SOURCE و DOM چیست؟
DOM چیست؟
جمع‌بندی
ما در این مطلب شما را با تفاوت SOURCE و DOM و تعریف هر کدام از آنها به صورت جداگانه آشنا کردیم. امیدواریم این آموزش مورد رضایت شما عزیزان قرار گرفته باشد.
منبع: lambdatest
مطالب مرتبط
چگونگی ایجاد فایل Error Log در فایل wp-config وردپرس
آموزش نصب وردپرس روی گوشی به زبان ساده
آموزش نصب ionCube روی لاراگون و نحوه فعالسازی آن
آموزش رفع خطای Failed To Load Resource در وردپرس
اینگیجمنت چیست ؟ چطور نرخ تعامل را افزایش دهیم؟
برطرف کردن خطای HTTP 500 Internal Server در وردپرس
XML-RPC چیست؟ و چرا در وردپرس برای امنیت سایتمان باید آنرا غیر فعال کنیم؟
بهترین افزونه های فوتر و هدر وردپرس | ساخت و تغییر هدر و فوتر
اگر دوست دارید در زمینه آموزش ، افزونه ، قالب وردپرس و ووکامرس ، آموزش سئو و… مقالات آموزشی خود را در نوین وردپرس منتشر کنید میتوانید به عنوان نویسنده در نوین وردپرس فعالیت کنید.
نظرات کاربران
ثبت دیدگاه