در دنیای پر از تحول توسعه وب، مدل شیء سند (DOM) نقش مؤثری در ایجاد تجربیات تعاملی و پویا در محیط وب داره. DOM یک رابط برنامه‌نویسی هست که ساختار اسناد HTML و XML رو به‌صورت یک ساختار درختی نشون می‌ده و باعث می‌شه تا توسعه‌دهنده‌ها، المان‌های مختلف رو کنترل کرده و با اونها در حال تعامل باشن. در این مقاله قصد داریم در مورد dom در جاوا اسکریپت صحبت کنیم، نحوه عملکرد اون رو بررسی کنیم، مفاهیم اصلی، روش‌ها و کاربردهای اون رو هم بیان کنیم . توسعه‌دهندگان و برنامه‌نویسان می‌تونن شناخت دقیقی نسبت به dom در آموزش جاوا اسکریپت
کسب کنن و از قابلیت‌های اون در حوزه‌های مختلف وب استفاده کنن. با ما همراه باشین.
مدل شیء سند (DOM) چیه؟
مدل شیء سند یا dom یک رابط برنامه‌نویسی هست که ساختار سند HTML یا XML را به‌صورت یک ساختار درختی نشون می ده. این مدل، نمایش منطقی محتوا رو نشون می‌ده و توسعه‌دهنده‌ها می‌تونن به المان‌ها دسترسی داشته و اونها رو به‌صورت پویا، اصلاح و کنترل کنن. dom، پلی بین محتوای صفحه وب و زبان‌های اسکریپت مثل جاوا اسکریپت و تعامل با اون هست.
در شکل زیر، کد HTML رو برای شناخت بهتر از ساختار درختی DOM، ارائه کردیم.
این سند، گره ریشه نامیده می‌شه و دارای یک گره فرزند به‌صورت المان <html> هست. المان <html> دارای دو فرزند <head> و <body> هست. این دو فرزند، فرزندان مختص خودشون رو دارن. می تونیم این درخت گره‌ها رو به‌صورت زیر هم نشون بدیم:
شناخت درخت dom در جاوا اسکریپت
Dom یک سند HTML یا XML رو از نظر ساختاری به‌صورت یک درخت سلسله مراتبی از اشیا تحت عنوان گره‌ها نشون می ده. گره ریشه درخت، گره سند نام داره و کل سند رو نشون می ده. هر HTML یا XML متناظر با یک گره المان در درخت dom هست اما صفات المان، محتوای متنی و نظرات با انواع مختلف گره‌ها نشون داده می‌شه. شناخت انواع گره‌ها مثل گره‌های المان، گره‌های صفات و گره‌های متنی، باعث کنترل دقیق توسعه‌دهنده‌ها نسبت به اصلاح و مدیریت صفحه وب می‌شه.
بیشتر بخوانید: مقایسه زبان برنامه نویسی پایتون و جاوا
دسترسی، کنترل و اصلاح المان‌های DOM در جاوا اسکریپت
جاوا اسکریپت، مجموعه‌ای غنی از روش‌ها و خصوصیات رو برای دسترسی، کنترل و اصلاح المان‌های dom ارائه می کنه. توسعه‌دهنده‌ها می‌تونن از این روش‌ها برای تغییر پویای محتوا، ساختار و تعیین سبک صفحات وب برای ایجاد تجربیات تعاملی و ریسپانسیو کاربران استفاده کنن. روش‌های رایج تو این زمینه، getElementById،getElementsByClassName،getElementsByTagName، querySelector و querySelectorAll هستند. این روش‌ها، باعث می‌شن تا توسعه‌دهنده‌ها المان‌ها رو بر اساس شناسه‌های منحصربه‌فرد، نام کلاس‌ها، تگ‌ها یا گزینشگرهای CSS پیچیده، انتخاب کنن. تو این مقاله getElementById، querySelector و querySelectorAll رو بررسی می‌کنیم.
()getElementById
در HTML، id ها به‌عنوان شناسه‌های منحصربه‌فرد برای المان‌های HTML استفاده می شن. یعنی شما نمی‌تونین یک نام id رو برای دو المان متفاوت، داشته باشین. مثال زیر صحیح نیست:
باید مطمئن باشین که id ها منحصربه‌فرد هستن:
در جاوا اسکریپت، می تونیم تگ HTML رو با ارجاع قرار دادن نام id، به دست بیاریم.
این کد به کامپیوتر اعلام می‌کنه که المان <p> رو با id para1 بگیره و المان رو در کنسول چاپ کنه.
اگر قصد داشته باشیم صرفاً محتوای پاراگراف رو بخونیم، می‌تونیم از خصوصیت text conent در ()console.log استفاده کنیم.
()querySelector
شما می‌تونین از این روش برای یافتن المان‌هایی با یک یا چند گزینشگر کلاس CSS استفاده کنین.
من این مثال HTML رو برای برنامه تلویزیونی موردعلاقه خودم، ایجاد کردم:
اگر بخوام المان h1 رو در کنسول پیدا کرده و چاپ کنم، می‌تونم از اون نام تگ در ()querySelector استفاده کنم.
اگر بخوام class=”list” رو برای پرینت کردن فهرست نامرتب به کنسول در نظر بگیرم، باید از .list درون ()querySelector استفاده کنم.
. قبل از list به کامپیوتر اعلام می‌کنه باید نام یک کلاس رو در نظر بگیرن. اگر شما بخواین یک id رو هدف بگیرین، می‌تونین از نماد # قبل از نام استفاده کنین.
()querySelectorAll
این روش، کلیه المان‌هایی رو پیدا می کنه که با گزینشگر CSS همخوانی دارن و فهرستی از کلیه گره‌ها رو ارائه می کنن.
اگر بخوام کلیه آیتم‌های <li> رو در مثال خودمون پیدا کنیم، می تونیم از ترکیب > برای یافتن کل فرزندان <ul> استفاده کنیم.
اگر بخوام آیتم‌های واقعی <li> رو با برنامه‌های تلویزیونی پرینت بگیرم، می‌شه از یک ()forEach در NodeList استفاده کنم و هر آیتم رو پرینت بگیرم.
اصلاح محتوا و ساختار
dom در جاوا اسکریپت، امکان اصلاح پویای محتوا و ساختار صفحه وب رو مهیا می کنه. توسعه‌دهنده‌ها می‌تونن گره‌های dom و صفات اونها رو ایجاد، اصلاح یا حذف کنند. به‌طور مثال، اونها می‌تونن المان‌های جدید رو به‌صورت پویا اضافه کنن، محتوای متن رو تغییر بدن، مقادیر صفات رو به‌روز کنن، موقعیت المان رو تغییر بدن یا گره‌ها رو حذف کنن. این قابلیت‌ها باعث توانمند شدن توسعه‌دهنده‌ها برای ساخت محتوای پویا، فهرست‌ها، فرم‌ها و المان‌های تعاملی بر اساس اقدامات کاربر می‌شن.
تعامل‌پذیری و مدیریت رویداد
dom در جاوا اسکریپت، امکان پیاده‌سازی برنامه‌نویسی رویداد محور رو در برنامه‌های تحت وب فراهم می‌کنه. توسعه‌دهنده‌ها می‌تونن شنونده‌های رویداد رو به المان‌های dom پیوند بدن و اونها به تعاملات کاربر مانند کلیک‌ها، فشردن دکمه‌ها، تحویل فرم و بسیاری از موارد دیگه، پاسخ بدن. توسعه‌دهنده‌ها با ثبت و کنترل این رویدادها می‌تونن رابط‌های کاربری ارزشمندی رو ایجاد کنن که به‌صورت آنی واکنش نشون می دن، باعث احراز هویت داده‌های ورودی کاربران می‌شن یا محتوا به‌صورت پویا، به‌روزرسانی کنن. این مزیت، جزو قابلیت‌های مهم dom در جاوا اسکریپت هست.
تعیین سبک، مدیریت و اصلاح CSS
علاوه بر کاربردهای زیاد dom در جاوا اسکریپت، این مدل قابلیت‌های گسترده‌ای رو برای اصلاح و مدیریت سبک‌ها و کلاس‌های CSS ارائه می کنه. قابلیت اصلاح و مدیریت پویای CSS باعث ایجاد تجربیات بصری و جذاب در محیط وب می‌شه و امکان اصلاح استایل‌ها در پاسخ به اقدامات و کنش‌های کاربر و تغییر وضعیت برنامه‌ها وجود داره.
رندرینگ پویا و AJAX
dom امکان رندرینگ پویای محتوا رو فراهم می کنه و برنامه‌های وب می‌تونن داده‌ها رو از سرورها به‌صورت ناهمگام بدون نیاز به بارگذاری دوباره کل صفحه، انتقال بدن. این قابلیت با استفاده از تکنیک‌های AJAX ( جاوا اسکریپت ناهمگام و XML) به دست میاد. توسعه‌دهنده‌ها می‌تونن از جاوا اسکریپت برای درخواست دریافت داده از یک سرور استفاده کنن، پاسخ رو دریافت کنن و درنهایت DOM رو با محتوای جدید، به‌صورت پویا به‌روز کنند. این رندرینگ پویا باعث کمک به ایجاد برنامه‌های واکنشگرای وب شده و مبنای فریم ورک‌ها و کتابخانه‌های پیشرفته وب محسوب می‌شه.
سازگاری میان تمامی جستجوگرها
یکی از چالش‌های پیش روی توسعه‌دهنده‌ها زمان کار با dom، امکان سازگاری بین تمامی جستجوگرها هست. جستجوگرهای مختلف وب می‌تونن ویژگی‌های مختلف dom رو پیاده‌سازی کنن یا سطح پشتیبانی متفاوتی را برای استانداردهای جدیدتر مهیا کنن. توسعه‌دهنده‌ها برای حل این مشکل، می‌تونن از کتابخانه‌ها یا فریم ورک‌های مناسب برای ایجاد قابلیت سازگاری در بین جستجوگرهای مختلف استفاده کنن. همچنین اونها می‌تونن از تکنیک‌های تشخیص ویژگی برای تعیین پشتیبانی از یک ویژگی خاص dom، استفاده کنن.
کاربردهای DOM
علاوه بر کاربردهای گسترده dom در جاوا اسکریپت، این فناوری کاربردهای قابل‌توجه دیگه‌ای هم داره که در این بخش به اونها اشاره می‌کنیم:
صفحات وب پویا
Dom قابلیت ایجاد صفحات پویای وب رو برای توسعه‌دهنده‌ها برای پاسخگویی به تعاملات کاربران فراهم می کنه و باعث می‌شن تا المان‌ها به‌صورت آنی بدون نیاز به بارگذاری کامل صفحات، تغییر کرده و به‌روز بشن.
اصلاح و کنترل داده سمت کلاینت
با وجود dom در جاوا اسکریپت، این زبان برنامه‌نویسی قابلیت اصلاح و مدیریت داده‌ها رو در سمت کلاینت داره و کاربران می‌تونن داده‌ها رو بدون نیاز به ارتباط سمت سرور، اصلاح کنن. این قابلیت پشتیبانی در برنامه‌های مختلف مانند برنامه‌های صفحه گسترده، تقویم‌ها و ابزارهای تصویرسازی داده وجود داره
نقشه‌های تعاملی
dom باعث یکپارچه‌سازی نقشه‌های تعاملی در برنامه‌های تحت وب می‌شه. توسعه‌دهنده‌ها می‌تونن المان‌های نقشه، نشانگرها و لایه‌ها رو اصلاح و مدیریت کرده و با مؤلفه‌های دیگر نقش برای دستیابی به تجربیات نگاشت شخصی‌سازی‌شده، تعامل کنن.
اپلیکیشن‌های تک‌صفحه‌ای (SPAها)
Dom کاربرد زیادی در SPA ها داره به‌نحوی‌که محتوا به‌صورت پویا در یک صفحه وب، بارگذاری و به‌روز می‌شه. SPA ها باعث ایجاد تجربه جستجوی یکپارچه می شن و نیازی به رفرش کل صفحه نیست.
انیمیشن‌های وب
dom در جاوا اسکریپت و CSS باعث شده تا توسعه‌دهنده‌ها انیمیشن‌های پیچیده و پیشرفته و ویژوال افکت‌های تعاملی رو بسازن. این انیمیشن‌ها جذابیت زیادی برای کاربران داره و باعث ارتقای تجربه حضور آن‌ها در وب می‌شه.
کلام آخر
dom در جاوا اسکریپت، از اهمیت زیادی برای برنامه‌نویس‌ها و توسعه‌دهنده‌ها برخوردار هست. قابلیت‌های dom در جاوا اسکریپت باعث شده تا این ساختار بیش از گذشته موردتوجه قرار بگیره. ما در این مقاله تلاش کردیم تا انواع روش‌های رایج dom در جاوا اسکریپت، کاربردها و بسیاری از قابلیت‌های دیگه dom رو بیان کنیم. امیدوارم از مطالب این مقاله استفاده ببرین.
