در این درس، به این خواهیم پرداخت که DOM چیست، چرا به آن نیاز است و چگونه ساخته شده است.

DOM چیست؟

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

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

DOM مدل شی سندی است که مرورگر بر اساس کد HTML که از سرور دریافت می کند در حافظه کامپیوتر ایجاد می کند.

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

در کروم، کد منبع صفحه ای که مرورگر دریافت می کند را می توان در تب "منبع" در پانل "ابزارهای توسعه دهنده وب" مشاهده کرد.

در کروم، هیچ ابزاری وجود ندارد که بتوان از آن برای مشاهده درخت DOM که ایجاد کرده است استفاده کرد. اما نمایشی از این درخت DOM در قالب کد HTML وجود دارد که در تب "Elements" موجود است. البته این نمایش DOM برای یک توسعه دهنده وب بسیار راحت تر است تا با آن کار کند. بنابراین، هیچ ابزاری وجود ندارد که DOM را به شکل یک ساختار درختی نشان دهد.

اشیاء در این مدل تقریباً از هر چیزی که در HTML است (برچسب ها، محتوای متنی، نظرات و غیره)، از جمله خود سند. روابط بین این اشیاء در مدل بر اساس چگونگی شکل می گیرد عناصر HTML نسبت به یکدیگر در کد قرار دارند.

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

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

برای کار با DOM در بیشتر موارد، جاوا اسکریپت استفاده می شود، زیرا. تا به امروز، این تنها زبان برنامه نویسی است که اسکریپت ها را می توان در مرورگر اجرا کرد.

چرا به DOM API نیاز داریم؟ما به آن نیاز داریم تا بتوانیم از جاوا اسکریپت برای تغییر صفحه در لحظه استفاده کنیم، یعنی. آن را پویا و تعاملی کنید.

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

در حال حاضر در وب عملا هیچ سایتی وجود ندارد که در اسکریپت های آن هیچ کار با DOM وجود نداشته باشد.

کد HTML برای یک صفحه چیست؟

قبل از شروع مطالعه مدل شی سند، ابتدا باید به یاد داشته باشید که کد منبع یک صفحه وب (سند HTML) چیست.

کد منبع یک صفحه وب شامل برچسب ها، ویژگی ها، نظرات و متن است. برچسب ها سینتکس اولیه HTML هستند. بیشتر آنها جفت هستند. در این صورت یکی از آنها افتتاحیه و دیگری بسته کننده است. یکی از این جفت‌ها یک عنصر HTML را تشکیل می‌دهد. عناصر HTML می توانند داشته باشند گزینه های اضافی- ویژگی های.

در یک سند برای ایجاد یک نشانه گذاری خاص، برخی از عناصر در برخی دیگر قرار دارند. در نتیجه، یک سند HTML را می توان به عنوان مجموعه ای از عناصر HTML تو در تو در نظر گرفت.

به عنوان مثال، کد HTML زیر را در نظر بگیرید:

عنوان مقاله

در این کد عنصر ریشه html است. عناصر سر و بدن درون آن تودرتو شده اند. عنصر head شامل عنوان است، در حالی که عنصر بدن حاوی h1 و div است. عنصر div به نوبه خود حاوی h2 و p است.

حال بیایید ببینیم مرورگر چگونه یک درخت DOM را بر اساس کد HTML می سازد.

درخت DOM سند چگونه ساخته می شود؟

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

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

هنگام ساختن DOM، مرورگر اشیایی را از عناصر HTML، متن، نظرات و سایر موجودات این زبان ایجاد می کند ( گره های DOM-درختان).

در بیشتر موارد، توسعه دهندگان وب فقط به اشیاء (گره ها) تشکیل شده از عناصر HTML علاقه مند هستند.

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

عناصری که مستقیماً در یک عنصر قرار دارند فرزندان آن هستند. و او برای هر یک از آنها پدر و مادر است. به علاوه همه این عناصر نسبت به یکدیگر خواهر و برادر (برادر) هستند.

علاوه بر این، در HTML، هر عنصر همیشه یک والد دارد (عنصر HTML که مستقیماً در آن قرار دارد). در HTML، یک عنصر نمی تواند چندین والدین داشته باشد. تنها استثنا عنصر html است. او پدر و مادر ندارد.

برای به دست آوردن درخت DOM همانطور که مرورگر آن را می سازد، فقط باید همه عناصر را بسته به رابطه آنها با یکدیگر "ترتیب" کنید.

ایجاد درخت DOM از بالا به پایین انجام می شود.

ریشه درخت DOM همیشه خود سند (گره سند) است. علاوه بر این، درخت بسته به ساختار کد HTML ساخته می شود.

به عنوان مثال، کد HTML که در بالا نگاه کردیم دارای درخت DOM زیر است:

در بالای این درخت گره سند قرار دارد. این گره با html مرتبط است، فرزند آن است. گره html توسط عنصر html ( ...). گره های سر ( ...) و بدن ( ...) به html تبدیل شده اند. در رابطه با یکدیگر، آنها خواهر و برادر هستند، زیرا یک پدر و مادر داشته باشد گره سر با عنوان مرتبط است (lt;title>...او فرزند اوست. گره‌های h1 و div به بدنه مربوط می‌شوند، برای آنها والد است. گره div به h2 (

...

) و p()، فرزندان آن هستند.

درخت، همانطور که در بالا ذکر شد، از سند شی (گره) شروع می شود. به نوبه خود دارای یک گره فرزند است که توسط عنصر html ( ...). عناصر سر ( ...) و بدن ( ...) در html هستند و بنابراین فرزندان آن هستند. بعد، گره سر، والد عنوان است (lt;title>...). عناصر h1 و div درون بدن قرار دارند، به این معنی که آنها فرزندان آن هستند. div مستقیماً حاوی عناصر h2 (

...

) و p(). این بدان معنی است که گره div برای هر یک از آنها والد است.

به این صورت است که درخت DOM به سادگی در مرورگر بر اساس کد HTML ساخته می شود.

چرا باید بدانید که درخت DOM چگونه ساخته می شود؟اول، درک محیطی است که می خواهید چیزی را در آن تغییر دهید. ثانیاً، بیشتر اقدامات هنگام کار با DOM به یافتن (انتخاب) عناصر ضروری می رسد. بدون دانستن نحوه چیدمان درخت DOM و اتصالات بین گره ها، یافتن یک عنصر خاص در آن بسیار دشوار خواهد بود.

ورزش

بر اساس درخت DOM نشان داده شده در شکل، کد HTML را ایجاد کنید.

مرجع حاوی توضیحاتی از تمام ویژگی ها و روش های اشیاء جاوا اسکریپت داخلی استاندارد است.

مدل شیء سند

مدل شیء سند(Document Object Model، DOM) یک رابط برنامه نویسی کاربردی (API) برای XML است که برای کار با HTML نیز گسترش یافته است.

در DOM، تمام محتوای صفحه (عناصر و متن) به صورت سلسله مراتبی از گره ها نمایش داده می شود. کد زیر را در نظر بگیرید:

سلام دنیا!

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

با نمایش یک سند به عنوان درختی از گره ها، DOM API به توسعه دهندگان کنترل کاملی بر محتوا و ساختار یک صفحه وب می دهد.

هنگام توصیف ساختار درختی DOM، از اصطلاحاتی استفاده می شود که از درختان خانوادگی وام گرفته شده است.

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

مرجع DOM حاوی توضیحاتی درباره اشیاء Document، Element، Event و NodeList است که شامل توضیحی در مورد روش ها و ویژگی های آنها می شود:

فهرست راهنمای BOM

BOM (Browser Object Model در ترجمه از انگلیسی - Browser Object Model) دسترسی به پنجره مرورگر را فراهم می کند و به شما امکان می دهد آن و عناصر آن را دستکاری کنید.

اشیاء BOM دسترسی به عملکرد مرورگر را مستقل از محتوای صفحه وب فراهم می کند. موضوع BOM جالب و در عین حال پیچیده است، زیرا به دلیل عدم وجود طولانی مدت مشخصات، سازندگان مرورگر آزادانه BOM را به دلخواه خود گسترش دادند. بسیاری از عناصر شبیه به مرورگرهای مختلف، به استانداردهایی تبدیل شده اند که تا به امروز به دلایل سازگاری متقابل رعایت می شوند. برای استانداردسازی این جنبه های اساسی جاوا اسکریپت، W3C عناصر اصلی BOM را در مشخصات HTML5 تعریف کرد.

کار با مدل DOM

هر شیء Window یک ویژگی دارد سند A که به یک شیء Document اشاره دارد. این شیء Document یک شیء مستقل نیست. این شیء مرکزی یک API وسیع است که به نام مدل شیء سند (DOM) شناخته می شود، که نحوه دسترسی به محتوای یک سند را مشخص می کند.

نمای کلی DOM

مدل شیء سند (DOM)یک رابط برنامه نویسی کاربردی اساسی است که توانایی کار با آن را فراهم می کند محتوای HTMLو اسناد XML رابط برنامه نویسی برنامه کاربردی DOM (API) چندان پیچیده نیست، اما ویژگی های معماری زیادی وجود دارد که باید از آنها آگاه باشید.

اول از همه، باید درک کرد که عناصر تو در تو اسناد HTML یا XML به عنوان درختی از اشیاء DOM نشان داده می شوند. نمای درختی یک سند HTML حاوی گره هایی است که عناصر یا برچسب ها را نشان می دهند، مانند و

و گره هایی که خطوط متن را نشان می دهند. یک سند HTML همچنین می تواند حاوی گره هایی باشد که نظرات HTML را نشان می دهند. سند HTML ساده زیر را در نظر بگیرید:

این یک سند HTML است

مثال سادهمتن

نمایش DOM این سند در نمودار زیر نشان داده شده است:

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

هر مستطیل در این نمودار یک گره سند است که با شی نشان داده می شود گره. لطفا توجه داشته باشید که شکل سه را نشان می دهد انواع مختلفگره ها ریشه درخت گره Document است که نمایانگر کل سند است. گره هایی که عناصر HTML را نشان می دهند گره هایی از نوع Element هستند و گره هایی که متن را نشان می دهند گره هایی از نوع Text هستند. Document، Element و Text زیر کلاس های کلاس Node هستند. Document و Element دو کلاس مهم در DOM هستند.

نوع Node و زیرشاخه های آن سلسله مراتب نوع نشان داده شده در نمودار زیر را تشکیل می دهند. به تفاوت های رسمی بین انواع سند و عنصر عمومی و انواع HTMLDocument و HTMLElement توجه کنید. نوع Document یک سند HTML و XML را نشان می دهد و کلاس Element عنصری از آن سند را نشان می دهد. زیر کلاس های HTMLDocument و HTMLElement به طور خاص یک سند HTML و عناصر آن را نشان می دهند:

همچنین در این نمودار تعداد زیادی زیرگروه از کلاس HTMLElement قابل توجه است که نشان دهنده انواع خاصی از عناصر HTML است. هر یک از اینها ویژگی های جاوا اسکریپت را تعریف می کند که منعکس کننده ویژگی های HTML یک عنصر خاص یا گروهی از عناصر است. برخی از این کلاس‌های خاص، ویژگی‌ها یا روش‌هایی را تعریف می‌کنند که نحو زبان نشانه‌گذاری HTML را منعکس نمی‌کنند.

انتخاب عناصر سند

کار اکثریت برنامه های مشتریبر روی جاوا اسکریپتبه نوعی با دستکاری عناصر سند مرتبط است. در حین اجرا، این برنامه ها می توانند از متغیر global document که به شی Document اشاره دارد استفاده کنند. با این حال، برای انجام هر گونه دستکاری بر روی عناصر سند، برنامه باید به نحوی اشیاء عنصر را که به آن عناصر سند ارجاع می دهند، بدست آورد یا انتخاب کند. DOM چندین راه برای انتخاب عناصر تعریف می کند. می توانید یک عنصر یا عناصر یک سند را انتخاب کنید:

با مقدار مشخصه id؛

با مقدار ویژگی نام؛

بر اساس نام برچسب؛

با نام کلاس یا کلاس های CSS؛

برای مطابقت با یک انتخابگر CSS خاص.

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

انتخاب عناصر با مقدار مشخصه id

همه عناصر HTML دارای ویژگی های id هستند. مقدار این ویژگی باید در سند منحصر به فرد باشد - هیچ دو عنصر در یک سند نباید دارای مقدار مشخصه id یکسان باشند. شما می توانید با استفاده از روش، یک عنصر را با مقدار منحصر به فرد ویژگی id انتخاب کنید getElementById()شی سند:

Var section1 = document.getElementById("section1");

این ساده ترین و رایج ترین راه برای انتخاب عناصر است. اگر اسکریپت باید بتواند مجموعه خاصی از عناصر سند را دستکاری کند، مقادیری را به ویژگی های id آن عناصر اختصاص دهید و از توانایی جستجوی آنها بر اساس آن مقادیر استفاده کنید.

نسخه ها اینترنت اکسپلوررزیر IE8 متد getElementById() مقادیر مشخصه id را به روشی غیر حساس به حروف بزرگ و کوچک جستجو می کند و همچنین عناصری را برمی گرداند که با مقدار ویژگی name مطابقت دارند.

انتخاب عناصر با مقدار مشخصه name

ویژگی نام HTML در ابتدا برای نام‌گذاری عناصر فرم در نظر گرفته شده بود، و مقدار مشخصه زمانی که داده‌های فرم به سرور ارسال می‌شد استفاده می‌شد. مانند ویژگی id، ویژگی name نیز نامی را به یک عنصر اختصاص می دهد. با این حال، برخلاف id، ارزش ویژگی name لازم نیست منحصر به فرد باشد: چندین عنصر می توانند به طور همزمان نام یکسانی داشته باشند، که زمانی که در دکمه های رادیویی و فرم های چک باکس استفاده می شود بسیار رایج است. همچنین، بر خلاف id، ویژگی name را فقط می توان در برخی از عناصر HTML، از جمله فرم ها، عناصر فرم و عناصر مشخص کرد.