نمای درختی HTML. WDH: DHTML - مدل شیء سند

DOM API خیلی پیچیده نیست، اما قبل از اینکه در مورد برنامه نویسی با DOM بحث کنیم، برخی از مسائل معماری DOM وجود دارد که باید درک شود.

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

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

نمونه سند

این یک است سادهسند

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

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

گره ها
ساختار درختی DOM درختی از اشیاء Node در انواع مختلف است. رابط Node1 ویژگی ها و روش هایی را برای پیمایش و دستکاری درخت تعریف می کند. ویژگی childNodes یک شی Node لیستی از گره های فرزند را برمی گرداند؛ ویژگی های firstChild، lastChild، nextSibling، previousSibling و parentNode راهی برای عبور از گره های درختی ارائه می دهند. متدهایی مانند appendChild()، removeChild()، replaceChild() و insertBefore() به شما این امکان را می دهند که گره ها را به درخت سند اضافه کنید و آنها را حذف کنید.

انواع گره ها
انواع گره ها در درخت سند با زیرواسط های ویژه رابط Node نشان داده می شوند. هر شی Node دارای ویژگی nodeType است که نوع گره را تعیین می کند. اگر ویژگی nodeType یک گره برابر است مثلاً با Node.ELEMENT_NODE ثابت، شی Node نیز یک شی Element است و می توانید از تمام متدها و خصوصیات تعریف شده توسط رابط Element با آن استفاده کنید.

ویژگی document-Element این شی به یک شی Element اشاره دارد که عنصر ریشه سند را نشان می دهد. برای اسناد HTML، این برچسبی است که به طور صریح یا ضمنی در سند وجود دارد. (علاوه بر عنصر ریشه، یک گره سند می تواند عناصر فرزند دیگری مانند اشیاء Comment داشته باشد.)

بخش عمده ای از درخت DOM شامل اشیاء عنصر است که نشان دهنده برچسب هایی مانند و است و اشیاء متنی که خطوط متن را نشان می دهند. اگر تجزیه کننده سند نظرات را ذخیره کند، آن نظرات در درخت به عنوان اشیاء نظر DOM نشان داده می شود.

ویژگی های
ویژگی های عنصر (به عنوان مثال، ویژگی های src و width یک تگ ) را می توان با استفاده از متدهای getAttribute()، set-Attribute() و removeAttribute() از رابط Element خواند، تنظیم و حذف کرد.

یکی دیگر از روش‌های کمتر راحت برای کار با ویژگی‌ها، متد getAttribute-Node() است که یک شی Attr را نشان‌دهنده ویژگی و مقدار آن برمی‌گرداند. (یکی از دلایل انتخاب این فناوری کمتر راحت این است که رابط Attr دارای یک ویژگی مشخص است، که به شما امکان می دهد تعیین کنید که آیا یک ویژگی مشخص به صراحت در سند مشخص شده است یا دارای یک مقدار پیش فرض است.) اما توجه داشته باشید که اشیاء Attr نیستند. در آرایه childNodes عنصر وجود دارد و مستقیماً مانند گره های Element و Text بخشی از درخت سند نیستند.

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

DOM HTML API
استاندارد DOM برای کار با XML و HTML طراحی شده است. API اصلی DOM - Node، Element، Document و سایر رابط‌ها - نسبتاً جهانی است و برای هر دو نوع سند کاربرد دارد. استاندارد DOM همچنین شامل واسط های خاص اسناد HTML است. HTMLDocument یک زیرواسط خاص HTML از رابط Document است و HTMLElement یک زیررابط خاص HTML از رابط Element است. علاوه بر این، DOM برای بسیاری از عناصر HTML، واسط های خاص برچسب را تعریف می کند. این رابط‌ها، مانند HTMLBodyElement و HTMLTitleElement، معمولاً مجموعه‌ای از ویژگی‌ها را تعریف می‌کنند که ویژگی‌های یک تگ HTML معین را منعکس می‌کنند. رابط HTMLDocument ویژگی ها و روش های مختلفی را تعریف می کند که قبل از استاندارد W3C توسط مرورگرها پشتیبانی می شدند. اینها شامل ویژگی location، آرایه forms و متد write() می باشد.

رابط HTMLElement ویژگی‌های id، style، title، lang، dir و className را تعریف می‌کند که دسترسی راحت به مقادیر id، style، title، lang، dir و ویژگی‌های کلاس را فراهم می‌کند که می‌تواند با تمام HTML استفاده شود. برچسب ها

تگ های HTML هیچ ویژگی دیگری به جز شش مورد ذکر شده را نمی پذیرند و بنابراین به طور کامل توسط رابط HTMLElement نشان داده می شوند.

برای تمام تگ های HTML دیگر در بخشی از مشخصات DOM مربوط به
به HTML، رابط های ویژه تعریف شده است. برای بسیاری از تگ های HTML
این رابط ها هیچ کاری جز ارائه مجموعه ای از ویژگی های مربوط به ویژگی های HTML انجام نمی دهند. به عنوان مثال، تگو

یک رابط HTMLU ListElement مربوطه وجود دارد، و برچسب دارای یک رابط HTMLBodyElement مربوطه است. از آنجایی که این رابط‌ها به سادگی ویژگی‌هایی را تعریف می‌کنند که در HTML استاندارد شده‌اند، در این کتاب با جزئیات مستند نشده‌اند.

شما می توانید با خیال راحت فرض کنید که شی HTMLElement که یک تگ HTML خاص را نشان می دهد دارای ویژگی های هر یک از ویژگی های استاندارد آن برچسب است (به قراردادهای نامگذاری در بخش بعدی مراجعه کنید). توجه داشته باشید که استاندارد DOM برای راحتی اسکریپت‌نویسان، ویژگی‌های HTML را تعریف می‌کند. یک روش رایج (و شاید ترجیح داده شده) برای خواندن و تنظیم مقادیر ویژگی توسط متدهای getAttribute() و setAttribute() شی Element ارائه می شود. برخی از اینترفیس‌های توصیف شده در HTML DOM، ویژگی‌ها یا روش‌های دیگری غیر از آنهایی که با مقادیر ویژگی HTML مطابقت دارند، تعریف می‌کنند. به عنوان مثال، رابط HTMLInputElement متدهای focus() و blur() را تعریف می کند و رابط HTMLFormElement متدهای submit() و reset() و ویژگی length را تعریف می کند. چنین روش‌ها و ویژگی‌هایی عموماً قبل از استانداردسازی DOM وجود داشتند و بخشی از استاندارد برای سازگاری با برنامه‌نویسی پذیرفته‌شده بودند. چنین رابط‌هایی در مرجع W3C DOM (قسمت پنجم) مستند شده‌اند. به‌علاوه، اطلاعات مربوط به بخش‌های «بهترین عمل» این رابط‌ها را می‌توان در قسمت چهارم مرجع جاوا اسکریپت سمت کلاینت یافت، اگرچه این اطلاعات اغلب با نامی که قبل از استانداردسازی DOM استفاده می‌شد، فهرست می‌شوند، مانند HTMLFormElement و HTMLInputElement در مرجع برای جاوا اسکریپت سمت کلاینت" در بخش های "فرم" و "ورودی" توضیح داده شده است.

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

هنگامی که نام ویژگی HTML با کلمه کلیدی جاوا اسکریپت تضاد داشته باشد، برای حل این تضاد، پیشوند نام با "html" قرار می گیرد. برای مثال، ویژگی for یک تگ به ویژگی htmlFor رابط کاربری HTMLLabelElement ترجمه می شود. استثنای این قانون، ویژگی کلاس است (که می تواند برای هر عنصر HTML مشخص شود) - به ویژگی className1 رابط HTMLElement ترجمه می شود.

سطوح و قابلیت های DOM
دو نسخه یا دو "سطح" از استاندارد DOM وجود دارد. DOM Level 1 در اکتبر 1998 استاندارد شد. این رابط‌های DOM پایه مانند Node، Element، Attr و Document و همچنین واسط‌های مختلف HTML خاص را تعریف می‌کند. DOM Level 2 در نوامبر 2000 استاندارد شد.2 علاوه بر برخی تغییرات در رابط های اصلی، این نسخه از DOM با تعریف APIهای استاندارد برای کار با رویدادهای سند و شیوه نامه های آبشاری (CSS) و همچنین ارائه ابزارهای اضافی برای کار با مناطق مستمر اسناد در زمان نگارش این کتاب گروه کاری DOM W3C سطح 3 DOM را استاندارد می کند. علاوه بر این، گاهی اوقات ممکن است ارجاعاتی به DOM Level 0 مشاهده کنید. این اصطلاح به هیچ استاندارد رسمی اشاره نمی کند، اما به عنوان یک مرجع غیررسمی به امکانات مدل شی سند رایج در نت اسکیپ و اینترنت اکسپلورر اجرا می شود. قبل از استانداردسازی توسط کنسرسیوم W3C. با DOM Level 2، استاندارد مدولار شد. ماژول اصلی، که ساختار درختی اصلی یک سند را با استفاده از رابط های Document، Node، Element و Next تعریف می کند، تنها ماژول مورد نیاز است. همه ماژول های دیگر اختیاری هستند و بسته به اجرا ممکن است پشتیبانی شوند یا نباشند. بدیهی است که پیاده سازی DOM یک مرورگر وب باید از ماژول HTML پشتیبانی کند، زیرا اسناد وب در HTML نوشته شده اند. مرورگرهایی که از شیوه نامه های CSS پشتیبانی می کنند، معمولاً از StyleSheets و ماژول های CSS پشتیبانی می کنند، زیرا سبک های CSS نقش کلیدی در برنامه نویسی پویا HTML دارند. به همین ترتیب، از آنجایی که بیشتر برنامه‌های جاوا اسکریپت به مدیریت رویداد نیاز دارند، می‌توان انتظار داشت که مرورگرهای وب از ماژول رویدادهای مشخصات DOM پشتیبانی کنند.

متأسفانه، ماژول رویدادها به تازگی توسط مشخصات DOM Level 2 تعریف شده است و در زمان نگارش این مقاله به طور گسترده پشتیبانی نمی شود.

مطابقت با DOM
در زمان نگارش این مقاله، هیچ مرورگری وجود ندارد که به طور کامل با استاندارد DOM مطابقت داشته باشد. نسخه‌های اخیر موزیلا به این موضوع نزدیک‌تر شده‌اند، و سازگاری کامل DOM سطح 2 هدف پروژه موزیلا است. مرورگر Netscape 6.1 با اکثر ماژول‌های مهم سطح 2 مطابقت دارد، در حالی که Netscape 6.0 سازگاری نسبتاً خوبی دارد، اما با برخی شکاف‌ها. Internrt Explorer 6 بیشتر با DOM Level 1 سازگار است (با حداقل یک استثناء تاسف بار)، اما بسیاری از ماژول های سطح 2، به ویژه ماژول رویدادها را پشتیبانی نمی کند. Internet Explorer 5 و 5.5 دارای شکاف های سازگاری قابل توجهی هستند، اما از روش های کلیدی DOM سطح 1 به اندازه کافی برای اجرای بیشتر نمونه های این فصل پشتیبانی می کنند. نسخه مکینتاش اینترنت اکسپلورر دارای پشتیبانی قابل توجهی جامع تری از DOM نسبت به IE 5 برای ویندوز است. علاوه بر موزیلا، نت اسکیپ، اینترنت اکسپلورر و چندین مرورگر دیگر حداقل از DOM پشتیبانی می کنند. تعداد مرورگرهای موجود بسیار زیاد شده است، و تغییرات در پشتیبانی استانداردها خیلی سریع اتفاق می‌افتد تا این کتاب سعی کند به طور قطعی مشخص کند که یک مرورگر خاص از چه ویژگی‌های DOM پشتیبانی می‌کند. بنابراین، برای تعیین سازگاری اجرای DOM در هر مرورگر، باید به منابع اطلاعاتی دیگر تکیه کنید. یکی از منابع اطلاعات سازگاری، خود پیاده سازی است. در یک پیاده سازی سازگار، ویژگی پیاده سازی شی Document به یک شیء DOMImplementation اشاره می کند که متدی به نام hasFeature() را تعریف می کند. این روش (در صورت وجود) می تواند برای به دست آوردن اطلاعاتی در مورد اینکه آیا یک ماژول (یا ویژگی) استاندارد DOM خاص پشتیبانی می شود استفاده شود. به عنوان مثال، می توانید تعیین کنید که آیا پیاده سازی DOM یک مرورگر وب از رابط های پایه DOM سطح 1 برای کار با اسناد HTML با استفاده از کد زیر پشتیبانی می کند یا خیر:

اگر (document.implementation &&
document.implementation.hasFeature &&
document.implementation.hasFeature("html"، "1.0")) (
// مرورگر ادعا می کند که از رابط های پایه سطح 1 پشتیبانی می کند
// و رابط های HTML
}

متد hasFeature() دو آرگومان می گیرد: اولی نام ماژول در حال بررسی است و دومی شماره نسخه به عنوان یک رشته است. اگر نسخه مشخص شده ماژول مشخص شده پشتیبانی شود، مقدار true را برمی گرداند.

به عنوان مثال، اگر hasFeature() نشان می دهد که ماژول MouseEvents پشتیبانی می شود، به این معنی است که ماژول UIEvents نیز پشتیبانی می شود، که به نوبه خود به معنای پشتیبانی از ماژول های Events، Views و Core است. در اینترنت اکسپلورر 6 (در ویندوز)، hasFeature () فقط برای ماژول "HTML" و نسخه "1.0" true را برمی گرداند. سازگاری با ماژول های دیگر را گزارش نمی کند

در Netscape 6.1، hasFeature() برای اکثر نام ماژول ها و شماره نسخه ها، به استثنای ماژول های Traversal و Mutation-Events، true را برمی گرداند. این روش برای ماژول های Core و CSS2 نسخه 2.0 false را برمی گرداند که نشان دهنده سازگاری ناقص است (حتی اگر پشتیبانی از این ماژول ها بسیار خوب است).

این کتاب رابط‌هایی را که همه ماژول‌های DOM را تشکیل می‌دهند مستند می‌کند. ماژول های Core، HTML، Traversal و Range در این فصل پوشش داده شده اند. ماژول‌های StyleSheets، CSS و CSS2 در فصل 18 پوشش داده شده‌اند، و ماژول‌های مختلف مرتبط با رویداد (به استثنای MutationEvents) در فصل 19 پوشش داده شده‌اند. قسمت پنجم، مرجع W3C DOM، شامل توضیحات کاملهمه ماژول ها

متد hasFeature() کاملا قابل اعتماد نیست. همانطور که در بالا ذکر شد، IE 6 سازگاری سطح 1 را با ابزارهای HTML گزارش می دهد، حتی اگر برخی مشکلات سازگاری وجود داشته باشد. از سوی دیگر، Netscape 6.1 عدم سازگاری با Level 2 Core را گزارش می دهد، حتی اگر این مرورگر تقریباً با این ماژول سازگار است. در هر دو مورد، اطلاعات دقیق تری در مورد اینکه دقیقاً چه چیزی سازگار است و چه چیزی نیست، مورد نیاز است. اما حجم این اطلاعات بسیار زیاد و متغیر است که در یک نشریه چاپی گنجانده شود.

کسانی که در توسعه وب فعال هستند بدون شک از قبل می دانند یا به زودی در مورد بسیاری از جزئیات سازگاری خاص مرورگرها یاد خواهند گرفت. همچنین منابعی در اینترنت وجود دارد که ممکن است مفید باشد. مهمتر از همه، W3C (با همکاری موسسه ملی استاندارد و فناوری ایالات متحده) در حال کار برای ایجاد یک جعبه ابزار متن باز برای آزمایش پیاده سازی DOM است. بر
از زمان نگارش این مقاله، توسعه مجموعه آزمایشی تازه شروع شده است، اما باید ابزار ارزشمندی برای آزمایش دقیق سازگاری اجرای DOM ارائه کند. جزئیات را می توان در http://www.w3c.org/DOM/Test/ یافت.

سازمان موزیلا چندین مجموعه آزمایشی برای استانداردهای مختلف، از جمله DOM Level 1 (موجود در http://www.mozilla.org/qualitybrowser_sc.html) دارد. نت اسکیپ یک مجموعه آزمایشی منتشر کرده است که شامل چند آزمایش برای سطح 2 DOM است (موجود در http://developer.netscape.com/evangelism/tools/testsuites/). نت اسکیپ همچنین مقایسه سازگاری DOM جانبدارانه (و قدیمی) نسخه های اولیه موزیلا و IE 5.5 را منتشر کرد (موجود در http://home.netscape.com/browsers/future/standards.html). در نهایت، شما همچنین می توانید اطلاعات سازگاری و انطباق را در سایت های مستقل در اینترنت پیدا کنید. یکی از سایت های قابل ذکر توسط پیتر پل کخ منتشر شده است. پیوندی به جدول سازگاری DOM را می توان در صفحه اصلی جاوا اسکریپت آن (http://www.xs4all.nl/~ppk/js/) پیدا کرد.

سازگاری اینترنت اکسپلورر DOM
از آنجایی که اینترنت اکسپلورر پرکاربردترین مرورگر وب است، چند نکته ویژه در مورد سازگاری آن با مشخصات DOM در اینجا لازم است. IE 5 و نسخه های بعدی از ویژگی های پایه سطح 1 و HTML به اندازه کافی برای اجرای مثال های این فصل پشتیبانی می کند و از ویژگی های کلیدی سطح 2 CSS به اندازه کافی برای اجرای بیشتر مثال ها پشتیبانی می کند. متأسفانه IE 5، 5.5 و 6 از ماژول رویدادها از DOM Level 2 پشتیبانی نمی کنند، حتی اگر مایکروسافت در تعریف این ماژول نقش داشته باشد و زمان زیادی برای پیاده سازی آن در IE 6 داشته باشد. همانطور که در فصل 19، پردازش رویدادها خواهیم دید. نقش کلیدی در جاوا اسکریپت سمت کلاینت ایفا می کند و عدم پشتیبانی IE از یک مدل استاندارد مدیریت رویداد، توسعه برنامه های کاربردی وب غنی سمت کلاینت را دشوار می کند. اگرچه IE 6 ادعا می کند (از طریق روش hasFeature()) از DOM سطح 1 هسته و رابط های HTML پشتیبانی می کند، در واقع این پشتیبانی کامل نیست. بارزترین مشکلی که احتمالاً با آن روبرو خواهید شد، یک مشکل کوچک اما آزاردهنده است: IE از ثابت های نوع گره تعریف شده در رابط Node پشتیبانی نمی کند. به یاد داشته باشید که هر گره در یک سند دارای ویژگی nodeType است که نوع آن گره را مشخص می کند. مشخصات DOM همچنین بیان می‌کند که رابط Node ثابت‌هایی را تعریف می‌کند که نشان‌دهنده هر یک از انواع گره‌هایی است که تعریف می‌کند. به عنوان مثال، ثابت Node.ELEMENT_NODE یک گره عنصر را نشان می دهد. در IE (حداقل تا و شامل نسخه 6) این ثابت ها به سادگی وجود ندارند.

مثال‌های این فصل برای کار در اطراف این مانع اصلاح شده‌اند و به جای ثابت‌های نمادین مربوطه، اعداد صحیح را شامل می‌شوند.

مثلا:
if (n.nodeType == 1 /*Node.ELEMENT_NODE*/)
// بررسی کنید که n یک شی Element باشد

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

اگر (!window.Node) (
var Node = ( // اگر شی Node وجود ندارد، تعریف کنید
ELEMENT_NODE: 1، // آن را با خواص و مقادیر زیر.
ATTRIBUTE_NODE: 2، // توجه داشته باشید که اینها فقط انواع گره هستند
TEXT_NODE: 3، // HTML. برای گره های XML باید تعریف کنید
COMMENT_NODE: 8، // ثابت های دیگر در اینجا.
DOCUMENT_NODE: 9،
DOCUMENT_FRAGMENT_NODE: 11
}
}

رابط های DOM مستقل از زبان
اگرچه استاندارد DOM از تمایل به داشتن یک API مشترک برای برنامه نویسی HTML پویا زاده شد، DOM فقط مورد توجه برنامه نویسان وب نیست. در واقع، این استاندارد اکنون بیشتر توسط برنامه های سرور جاوا و C++ برای تجزیه و دستکاری اسناد XML استفاده می شود. استاندارد DOM به دلیل موارد استفاده زیاد، مستقل از زبان تعریف شد. این کتاب فقط اتصال DOM API به جاوا اسکریپت را پوشش می دهد، اما چند نکته دیگر وجود دارد که باید در نظر داشته باشید. ابتدا، توجه داشته باشید که ویژگی های شی در پیوندهای جاوا اسکریپت معمولاً با جفت متد get/set در زبان های دیگر مطابقت دارد. بنابراین، هنگامی که یک برنامه نویس جاوا از شما در مورد متد getFirstChild() رابط Node می پرسد، باید بدانید که در جاوا اسکریپت اتصال Node API متد getFirst-Child() را تعریف نمی کند. در عوض، به سادگی خاصیت firstChild را تعریف می کند و خواندن این ویژگی در جاوا اسکریپت معادل فراخوانی متد getFirstChild() در جاوا است. یکی دیگر از ویژگی های مهم اتصال DOM API به جاوا اسکریپت این است که برخی از اشیاء DOM مانند آرایه های جاوا اسکریپت عمل می کنند. اگر یک اینترفیس متدی به نام item() را تعریف کند، اشیاء پیاده‌سازی کننده آن واسط مانند آرایه‌های فقط خواندنی با یک شاخص عددی عمل می‌کنند. فرض کنید در نتیجه خواندن ویژگی childNodes یک گره، یک شی NodeList به دست می آید. اشیاء Node جداگانه از یک لیست را می توان اولاً با ارسال تعداد گره مورد نظر به متد item() و ثانیاً با در نظر گرفتن شی NodeList به عنوان یک آرایه و دسترسی به آن توسط شاخص بدست آورد. کد زیر این دو احتمال را نشان می دهد:

Var n = document.documentElement; // این یک شی Node است.
var children = n.childNodes; // این یک شی NodeList است.
var head = Children.item(0); // این یک راه است
// از NodeList استفاده کنید.
var body = کودکان; // اما یک راه ساده تر وجود دارد!

به همین ترتیب، اگر یک شی DOM دارای متد namedItem() باشد، ارسال رشته به آن متد مانند استفاده از رشته به عنوان شاخص آرایه است. به عنوان مثال، خطوط کد زیر راه های معادل برای دسترسی به یک عنصر فرم را نشان می دهد:

Var f = document.forms.namedItem("myform");
var g = document.forms["myform"];
var h = document.forms.myform;

استاندارد DOM را می توان به روش های مختلفی مورد استفاده قرار داد، بنابراین توسعه دهندگان استاندارد با دقت DOM API را به گونه ای تعریف کردند که توانایی توسعه دهندگان دیگر برای پیاده سازی API را محدود نکند. به طور خاص، استاندارد DOM به جای کلاس ها، رابط ها را تعریف می کند. در برنامه نویسی شی گرا، کلاس یک نوع داده ثابت است که باید دقیقاً همانطور که تعریف شده است پیاده سازی شود. از طرف دیگر، یک رابط مجموعه ای از متدها و خصوصیات است که باید با هم پیاده سازی شوند. بنابراین، یک پیاده‌سازی DOM می‌تواند هر کلاسی را که مناسب می‌بیند تعریف کند، اما آن کلاس‌ها باید روش‌ها و ویژگی‌های رابط‌های مختلف DOM را تعریف کنند. این معماری چند پیامد مهم دارد. اول، نام کلاس های مورد استفاده در پیاده سازی ممکن است مستقیماً با نام های رابط استفاده شده در استاندارد DOM (و در این کتاب) مطابقت نداشته باشد. دوم اینکه یک کلاس می تواند بیش از یک رابط را پیاده سازی کند. برای مثال یک شی Document را در نظر بگیرید. این شی نمونه ای از کلاسی است که توسط پیاده سازی مرورگر وب تعریف شده است. ما نمی دانیم چه کلاسی است، اما می دانیم که رابط Document را پیاده سازی می کند. یعنی تمام متدها و خصوصیات تعریف شده توسط رابط Document از طریق شی Document در دسترس ما هستند. از آنجایی که مرورگرهای وب با اسناد HTML کار می کنند، ما همچنین می دانیم که شی Document رابط را پیاده سازی می کند
HTMLDocument و اینکه ما همچنین به تمام روش ها و ویژگی های تعریف شده توسط این رابط دسترسی داریم. علاوه بر این، اگر مرورگر وب از شیوه نامه های CSS پشتیبانی می کند و ماژول CSS DOM را پیاده سازی می کند، شی Document رابط های DocumentStyle و DocumentCSS DOM را نیز پیاده سازی می کند. و اگر مرورگر وب ماژول های Events و Views را پشتیبانی کند، Document رابط های DocumentEvent و DocumentView را نیز پیاده سازی می کند.

DOM به ماژول های مستقل تقسیم می شود، بنابراین چندین رابط فرعی اضافی مانند DocumentStyle، DocumentEvent و DocumentView تعریف می کند، که هر کدام تنها یک یا دو روش را تعریف می کنند. چنین واسط‌هایی هرگز مستقل از واسط Document پیاده‌سازی نمی‌شوند، و به همین دلیل من آنها را جداگانه توضیح نمی‌دهم. اگر شرح رابط Document را در مرجع W3C DOM بخوانید، متوجه می شوید که روش ها و ویژگی های رابط های اضافی مختلف را نیز فهرست می کند. به همین ترتیب، با مشاهده توضیحات واسط های اضافی، به سادگی یک مرجع متقابل به رابط پایه ای که با آن مرتبط هستند پیدا خواهید کرد. استثناهای این قانون مواردی هستند که رابط اضافی پیچیده است. به عنوان مثال، رابط HTMLDocument همیشه توسط همان شی که رابط Document را پیاده سازی می کند، پیاده سازی می شود، اما از آنجایی که HTMLDocument
مقدار قابل توجهی از قابلیت های جدید را اضافه می کند، من صفحه شخصی خود را به آن داده ام.

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

Var t = متن جدید ("این یک گره متن جدید است"); // چنین سازنده ای وجود ندارد!

استاندارد DOM نمی تواند سازنده ها را تعریف کند، اما چندین روش کارخانه مفید را در رابط Document برای ایجاد اشیا تعریف می کند. بنابراین، برای ایجاد یک گره متنی جدید در سند، باید بنویسید:

Var t = document.createTextNode("این یک گره متن جدید است");

متدهای کارخانه ای تعریف شده در DOM نام هایی دارند که با کلمه "create" شروع می شوند. علاوه بر روش‌های کارخانه‌ای که توسط رابط Document تعریف شده‌اند، چندین روش کارخانه از این قبیل توسط رابط DOMImplementation تعریف شده‌اند و از طریق document.implementation قابل دسترسی هستند.

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

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

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

• رابط ها و اشیایی که برای نمایش و دستکاری یک سند استفاده می شوند.
• معناشناسی این رابط ها و اشیاء، از جمله ویژگی ها و واکنش های آنها به رویدادها.
• روابط بین این رابط ها و اشیاء.

تا به امروز، W3C سطوح DOM یک و دو (DOM 1 و DOM 2) را استاندارد کرده است. DOM 3 در مرحله پیش نویس کار است. این کلمات اختصاری به ترتیب مخفف موارد زیر هستند:

• DOM 1 نمایش اولیه اسناد XML و HTML را به عنوان درختان اشیا توصیف می کند.
• DOM 2 رابط های اصلی DOM 1 را گسترش می دهد و پشتیبانی از رویدادها و سبک ها را اضافه می کند.
• DOM 3 بارگیری و تجزیه اسناد و همچنین نمایش و قالب بندی آنها را توصیف می کند.

با توجه به وضعیت فعلی، ما فقط DOM 2 (و DOM 1 موجود در آن) را در اینجا در نظر می گیریم. DOM 2 از گروه های زیر از رابط های مرتبط تشکیل شده است:

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

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

DOM 2 Core اسناد XML را به‌عنوان درخت‌هایی متشکل از گره‌ها نشان می‌دهد که به نوبه خود نیز اشیا هستند و رابط‌های تخصصی‌تری را پیاده‌سازی می‌کنند. برخی از انواع گره ها می توانند فرزند داشته باشند، یعنی خود آنها زیردرخت هستند، در حالی که برخی دیگر برگ هستند، یعنی بچه ندارند. جدول زیر تمام انواع گره سند انتزاعی ممکن را خلاصه می کند. برای هر نوع گره، گره هایی که می توانند فرزندان آن باشند فهرست شده اند. برای مفاهیم مربوط به گره های فهرست شده، به توضیح ساختار سند XML مراجعه کنید.

علاوه بر این، DOM 2 Core شامل مشخصات NodeList (فهرست های مرتب شده از گره ها که بر اساس تعداد در لیست قابل دسترسی هستند) و NamedNodeMap (لیست های نامرتب گره هایی که با نام آنها قابل دسترسی هستند) است. این اشیاء هستند زنده، یعنی هر تغییری در یک سند به طور خودکار مستلزم تغییر در تمام لیست های مرتبط با آن است.

لازم به ذکر است که DOM 2 Core شامل دو مجموعه رابط است که هر کدام از آنها دسترسی کامل به تمام عناصر سند را فراهم می کند. مجموعه اول یک رویکرد شی گرا را با سلسله مراتب وراثت زیر نشان می دهد: عناصر تشکیل دهنده آن ویژگی ها و محتوای متن را مستند کنید. هنگام در نظر گرفتن درخت سند به این ترتیب، ما در مورد آن صحبت می کنیم سلسله مراتب شی. رویکرد دوم مبتنی بر اصل "همه چیز گره است (Nodes)" است. در اینجا تمام اجزای سند به عنوان گره های مساوی درخت آن در نظر گرفته می شوند و فقط می توان در مورد آن صحبت کرد سلسله مراتب گره. بنابراین، DOM 2 ذاتاً زائد است، اما بسته به وظیفه، توانایی مشاهده یک سند را به هر طریقی به ما می دهد.

تمام رابط های DOM 2 Core به پایه (بنیادی) و اضافی (گسترده) تقسیم می شوند. رابط های اصلی عبارتند از , , , , Node , NodeList , NamedNodeMap , CharacterData , Attr , Element , Text و Comment . این رابط ها باید توسط تمام پیاده سازی های DOM، برای اسناد XML و HTML پشتیبانی شوند. رابط های اضافی اسناد XML را هدف قرار می دهند، بنابراین پیاده سازی های HTML DOM ممکن است از آنها پشتیبانی نکنند. اینها عبارتند از CDATASection، DocumentType، Notation، Entity، EntityReference و ProcessingInstruction.

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

در زیر آمده است توضیح کوتاهتمام رابط های DOM نشان دهنده سطح مدل (DOM 1 یا DOM 2) که در آن این یا آن ویژگی رابط تعریف شده است. مشخصات W3C به زبان مستقل از پلتفرم IDL نوشته شده است. ما آنها را مطابق با سینتکس جاوا اسکریپت که امروزه زبان اصلی برنامه نویسی است، ارائه می کنیم.

همراه با شرح استاندارد، شرح مختصری از پیاده سازی آن در مدل های شی مایکروسافت و Gecko ارائه می دهیم. لازم به ذکر است که پیاده سازی های مایکروسافت برای XML و HTML کاملاً مستقل هستند (به ترتیب توسط مؤلفه های نرم افزار XMLDOM و MSHTML پیاده سازی می شوند) در حالی که در Gecko مدل شی برای اسناد HTML و XML یکسان است. بحث زیر بر روی DOM برای HTML متمرکز است. XML DOM به تفصیل در قسمت هشتم مورد بحث قرار خواهد گرفت.

شی DOMException نمونه اولیه تمام استثناهایی است که می تواند در هنگام پردازش یک سند رخ دهد. دارای یک کد دارایی واحد از نوع Number است که مطابق جدول زیر شامل شماره استثنا است:

رابط DOMImplementation شامل متدهایی است که اجرای آنها به یک مدل شی سند خاص بستگی ندارد. از طریق شی قابل دسترسی است.

متد createCSSStyleSheet یک شی CSSStyleSheet جدید ایجاد می کند و یک اشاره گر به آن برمی گرداند. این روش فقط باید توسط پیاده سازی های DOM که از CSS پشتیبانی می کنند پشتیبانی شود. شی خارج از زمینه سند ایجاد می شود. DOM 2 به شما اجازه نمی دهد که یک شیوه نامه جدید ایجاد شده را در یک سند اضافه کنید. آرگومان عنوان عنوان برگه سبک را مشخص می کند و رسانه فهرستی از دستگاه های نمایشگر جدا شده با کاما را مشخص می کند.

متد createDocument یک شی جدید ایجاد می کند و یک اشاره گر به آن برمی گرداند. برای ایجاد اسناد XML طراحی شده است و ممکن است برای اسناد HTML پشتیبانی نشود. آرگومان namespaceURI URI فضای نام عنصر ریشه سند را مشخص می‌کند، نام واجد شرایط آن را نام‌گذاری می‌کند، و نوع سند در حال ایجاد را تعیین می‌کند (می‌تواند تهی باشد).

متد createDocumentType یک گره DocumentType خالی ایجاد می کند و یک اشاره گر به آن برمی گرداند. برای اسناد XML در نظر گرفته شده است و ممکن است برای اسناد HTML پشتیبانی نشود. آرگومانqualifiedName نام واجد شرایط نوع سندی که باید ایجاد شود، publicId شناسه عمومی بخش خارجی است و systemId شناسه سیستم بخش خارجی است.

اگر اجرای DOM از ویژگی مشخص شده پشتیبانی کند، متد hasFeature مقدار true را برمی‌گرداند و در غیر این صورت false. نام ویژگی (در هر صورت) با آرگومان ویژگی مشخص می شود. باید از قراردادهای نامگذاری XML پیروی کند. آرگومان version نام نسخه ویژگی مورد بررسی را مشخص می کند. اگر مشخص نشده باشد، اگر حداقل برخی از نسخه‌های این ویژگی پشتیبانی شود، true برگردانده می‌شود.

در Gecko، مقادیر ویژگی می تواند رشته های "XML" و "HTML" و مقدار نسخه می تواند رشته های "1.0" و "2.0" باشد. مثال:

هشدار(document.implementation.hasFeature("HTML"، "1.0")); alert(document.implementation.hasFeature("HTML"، "2.0")); alert(document.implementation.hasFeature("HTML"، "3.0"));

دو عبارت هشدار اول رشته true و سومی false خروجی خواهد داد.

در Microsoft XMLDOM، مقادیر ویژگی می تواند رشته های "XML"، "DOM" و "MS-DOM" و مقدار نسخه می تواند رشته "1.0" باشد. مثال:

Var objDoc = new ActiveXObject("Microsoft.XMLDOM"); alert(objDoc.implementation.hasFeature("XML", "1.0")); alert(objDoc.implementation.hasFeature("XML"، "2.0"));

عبارت هشدار اول خروجی رشته true و دومی false خواهد بود.

رابط DocumentFragment از نسل رابط Node است و تمام ویژگی ها و روش های آن را به ارث می برد. همانطور که از نام آن پیداست، برای عملیات با تکه هایی از اسناد(استخراج بخشی از درخت سند، ایجاد یک قطعه سند جدید، درج یک قطعه به عنوان فرزند یک گره و غیره). توجه داشته باشید که هنگام درج یک شی از نوع DocumentFragment در گره ای که می تواند فرزند داشته باشد، همه فرزندان آن شی درج می شوند، اما نه خود شی. برای مثال، رابط Node را ببینید.

رابط Document مربوط به یک سند XML یا HTML است. مبنایی برای دسترسی به محتوای سند و ایجاد اجزای آن است.

ویژگی doctype نوع این سند را برمی گرداند (نوع DocumentType). برای اسناد HTML و برای اسناد XML که اعلان نوع سند ندارند، null برگردانده می شود.

ویژگی documentElement عنصر ریشه این سند (از نوع Element) را برمی گرداند. برای اسناد HTML، عنصر HTML برگردانده می شود. مثال: اپراتور

هشدار(document.documentElement.tagName);

یک رشته HTML را به صفحه نمایش می دهد.

ویژگی پیاده سازی یک شی از نوع توصیف را برمی گرداند این پیاده سازی DOM.

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

متد createAttribute یک شی جدید از نوع Attr ایجاد می کند و یک اشاره گر به آن برمی گرداند. آرگومان name نام صفتی که باید ایجاد شود را مشخص می کند. شی جدید دارای یک ویژگی nodeName از نام و یک localName، پیشوند و ویژگی های namespaceURI از null است. پس از آن، ویژگی ایجاد شده را می توان با استفاده از روش Element.setAttributeNode به هر عنصری نسبت داد.

نمونه ای از ایجاد یک ویژگی برای یک عنصر HTML:

Var myDiv = document.getElementById("idDiv"); var attr = document.createAttribute("temp"); attr.value = "موقت"; myDiv.setAttributeNode(attr); alert(myDiv.getAttribute("temp"));!}

اپراتور هشدار رشته را به طور موقت چاپ می کند.

نمونه ای از ایجاد یک ویژگی در Microsoft XMLDOM:

Var xmlDoc = ActiveXObject جدید ("Microsoft.XMLDOM"); xmlDoc.async = نادرست; xmlDoc.load("c:\My Documents\books.xml"); var root = xmlDoc.documentElement; var newAttr = xmlDoc.createAttribute("temp"); newAttr.value = "موقت"; root.setAttributeNode(attr); alert(root.getAttribute("temp"));!}

در اینجا اپراتور هشدار نیز رشته را به طور موقت چاپ می کند.

متد createAttributeNS یک شی Attr جدید ایجاد می کند و یک اشاره گر به آن برمی گرداند. برای اسناد XML در نظر گرفته شده است و ممکن است برای اسناد HTML پشتیبانی نشود. آرگومان namespaceURI URI فضای نام را مشخص می‌کند وqualifiedName نام واجد شرایط ویژگی است که در آن فضای نام ایجاد می‌شود. شی ایجاد شده از نوع Attr دارای ویژگی های زیر است:

پس از آن، ویژگی ایجاد شده را می توان با استفاده از روش Element.setAttributeNode به هر عنصری نسبت داد.

متد createCDATASection یک شی CDATASection جدید ایجاد می کند و یک اشاره گر به آن برمی گرداند. این فقط برای اسناد XML در نظر گرفته شده است. تلاش برای فراخوانی آن در HTML DOM یک استثنا NOT_SUPPORTED_ERR ایجاد می کند. آرگومان داده، محتوای مورد ایجاد شده را مشخص می کند. نمونه ای از ایجاد یک بخش CDATA در Microsoft XMLDOM:

Var xmlDoc = ActiveXObject جدید ("Microsoft.XMLDOM"); xmlDoc.async = نادرست; xmlDoc.load("c:\My Documents\books.xml"); var root = xmlDoc.documentElement; var newSection = xmlDoc.createCDATASection("سلام جهان!"); root.appendChild(newSection);

متد createComment یک شی Comment جدید ایجاد می کند و یک اشاره گر به آن برمی گرداند. آرگومان داده، محتوای کامنتی را که قرار است ایجاد شود، مشخص می کند. نمونه ای از ایجاد نظر در Gecko:

Var root = document.documentElement.firstChild; var comm = document.createComment("این یک نظر است."); root.appendChild(comm);

متد createDocumentFragment یک شیء خالی جدید از نوع ایجاد می کند و یک اشاره گر به آن برمی گرداند. نمونه ای از ایجاد یک قطعه سند در Gecko:

Var elem = document.documentElement.firstChild; var o = document.createDocumentFragment(); elem.appendChild(o);

متد createElement یک شی جدید از نوع Element ایجاد می کند و یک اشاره گر به آن برمی گرداند. آرگومان tagName تگ عنصر در حال ایجاد را مشخص می کند. ویژگی nodeName شیء جدید tagName است و ویژگی های localName، پیشوند و namespaceURI آن null هستند. اگر یک شی دارای ویژگی هایی با مقادیر پیش فرض باشد، گره های Attr متناظر به طور خودکار ایجاد و به عنصر متصل می شوند.

یادداشت:

تهیه شده توسط: Evgeny Ryzhkov تاریخ انتشار: 1389/11/15

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

درخت سند در هنگام نوشتن قوانین CSS و اسکریپت های جاوا اسکریپت به توسعه دهنده وب کمک می کند.

درخت سند را با مدل شیء سند (DOM) اشتباه نگیرید. DOM مفهوم پیچیده تری است (ما کمی بعد در مورد آن خواهیم نوشت).

برای اینکه وارد توضیحات طولانی و خسته کننده نشویم که چرا درخت سند درخت نامیده می شود، بیایید به یک مثال نگاه کنیم - یک کد HTML ساده را در نظر بگیرید:

عنوان صفحه عنوان اصلی

پاراگراف متن

• بند 1
• نقطه 2

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

ارتباطات خاصی بین عناصر درخت سند وجود دارد. بیایید به آنها نگاه کنیم.

از تصویر شماتیک درخت و از خود کد HTML، مشخص است که برخی از عناصر درون برخی دیگر تودرتو هستند. عناصری که شامل دیگران هستند، اجداد (اجداد) هر چیزی هستند که در آن تعبیه شده است. تودرتوها نیز به نوبه خود اولاد آن (فرزند) هستند.

برای وضوح، یک شاخه از درخت ما را در نظر بگیرید:

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

والد جد بلافصل (جد سطح اول) یک عنصر است. برعکس، به فرزند فوری (کودک سطح اول) کودک می گویند.

هر یک از والدین می توانند تعداد نامحدودی دختر داشته باشند. عنصر فرزند فقط یک والد خواهد داشت.

به عنصر والد، جد مستقیم نیز گفته می شود و عنصر فرزند یک نسل مستقیم است. اینها چیزی شبیه اسامی معنایی هستند.

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

عناصر مجاور، عناصر خواهری هستند که در "محله" قرار دارند.

همه چیز در اینجا باید از نام خود اصطلاحات مشخص باشد. خواهر و برادر قبلی - عنصر خواهر قبلی توسط کد. با استفاده از شاخه مثال ما برای

خواهد بود

برای

- و هیچ خواهرخواندگی قبلی وجود نخواهد داشت.

به همین ترتیب، خواهر زیر (به دنبال خواهر و برادر): برای -

برای

—

، برای
- نه
قبلی و بعدی

عنصر قبلی (قبلی) - همان عنصر قبلی طبق کد، فقط بدون محدودیت روابط خواهر. برای شعبه ما: برای

خواهد بود

برای

- ، برای - .

و XHTML که در تعاریف نحوی خودش تعریف شده بود، HTML5 با تعاریف Document Object Model (DOM) - با استفاده از یک نمایش درخت داخلی برای نمایش سند توصیف می‌شود. به عنوان مثال، یک سند بسیار کوچک متشکل از عنوان صفحه، عنوان و بدنه پاراگراف را تصور کنید. درخت DOM ممکن است به شکل زیر باشد:

درخت DOM شامل یک عنصر عنوان در بلوک سر و یک عنصر h1 و p در بدنه است.

مزیت توصیف HTML5 در تعاریف مدل شی سند این است که زبان را می توان مستقل از نحو تعریف کرد. اصولاً دو نحو زبان برای نمایش اسناد وجود دارد: سریال سازی HTML (HTML5) و سریال سازی XML (XHTML5).

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

یک نمونه سند HTML

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

سریال سازی XML از نحو و فضای نام XML 1.0، مشابه XHTML 1.0، مشتق شده است.

یک نمونه سند HTML

این یک نمونه سند HTML است.

جدای از تفاوت در وجود و عدم وجود ویژگی xmlns، این دو مثال معادل هستند.

مرورگرها از نوع MIME برای انتخاب استفاده می کنند. هر سندی که به‌عنوان متن/html اعلام می‌شود باید الزامات مشخصات HTML را برآورده کند و هر سندی که به‌عنوان نوع XML MIME اعلام می‌شود (مانند application/xhtml+xml) باید با مشخصات XML مطابقت داشته باشد.

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

مزایای استفاده از HTML
• سازگاری معکوس با مرورگرهای موجود
• نحو آشنا
• نحو بی تکلف (در صورت بروز خطا، "صفحه زرد مرگ" وجود نخواهد داشت).
• نحوی که اجازه حذف برخی از برچسب ها و ویژگی ها را می دهد.
مزایای استفاده از XHTML
• نحو قوی XML که برخی از سازندگان ممکن است راحت از آن پشتیبانی کنند.
• مستقیماً با دیگر واژگان XML (مانند SVG و MathML) پیوند می‌یابد.
• پیاده سازی پردازش XML.
مشارکت

کار بر روی HTML5 به سرعت در حال پیشرفت است، اما انتظار می رود طی چند سال آینده تکمیل شود. برای انجام آزمایش‌های مختلف و دستیابی به قابلیت همکاری پیاده‌سازی‌هایی که الزامات را برآورده می‌کنند، طبق برآوردهای فعلی، از 10 تا 15 سال کار به طول می‌انجامد. در طول مرحله توسعه، بازخورد طیف گسترده ای از کاربران، از جمله طراحان وب، توسعه دهندگان، CMS و سازندگان ابزار توسعه و سازندگان مرورگر برای دستیابی به موفقیت بسیار مهم است. مشارکت در توسعه HTML5 نه تنها مورد استقبال قرار می گیرد، بلکه به طور فعال تشویق می شود.

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

• تفاوت ها با HTML 4 پیکربندی ها را در مقایسه با نسخه قبلی HTML مشخص می کند
• اصول طراحی HTML اصولی را مورد بحث قرار می دهد که به تصمیم گیری کمک می کند. آنها به شما کمک می کنند تا اساس راه حل های طراحی موجود را درک کنید.
• راهنمای توسعه دهندگان وب برای HTML5، منبعی است که اخیراً راه اندازی شده است که برای کمک به طراحان و توسعه دهندگان وب طراحی شده است تا همه چیزهایی را که برای نوشتن اسناد مطابق با HTML5 باید بدانند، درک کنند. اصول راهنما ارائه شده و بهترین راه حل ها شرح داده شده است.

روش های زیادی برای مشارکت در طراحی خود وجود دارد. شما می‌توانید به HTML WG W3C بپیوندید و در فهرست‌های پستی HTML WG یا ویکی مشترک شوید/ مشارکت کنید. همچنین می توانید در انجمن WHATWG شرکت کنید، نظرات خود را بنویسید یا در وبلاگ WHATWG مقاله بنویسید.

کار با مدل DOM

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

نمای کلی DOM

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

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

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

نمونه سند این یک سند HTML است

مثال سادهمتن

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

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

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

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



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

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

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

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

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

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

توسط کلاس CSS یا نام کلاس ها؛

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

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

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

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

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

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

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

انتخاب عناصر بر اساس مقدار ویژگی نام

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

می توانید عناصر HTML را بر اساس مقادیر ویژگی های نام آنها با استفاده از متد getElementsByName() شی Document انتخاب کنید:

Var radiobuttons = document.getElementsByName("favorite_color");

متد getElementsByName () توسط کلاس Document تعریف نمی شود، بلکه توسط کلاس HTMLDocument تعریف می شود، بنابراین فقط در اسناد HTML موجود است و در اسناد XML موجود نیست. یک شی NodeList را برمی گرداند، که مانند یک آرایه فقط خواندنی از اشیاء Element رفتار می کند.

در اینترنت اکسپلورر، متد getElementsByName() نیز عناصری را برمی گرداند که مقدار مشخصه id آنها با مقدار مشخص شده مطابقت دارد. برای اطمینان از سازگاری بین مرورگرها، هنگام انتخاب مقادیر مشخصه باید مراقب باشید و از رشته های مشابه مقادیر برای ویژگی های name و id استفاده نکنید.

موارد را بر اساس نوع انتخاب کنید

متد getElementsByTagName() شیء Document به شما امکان می دهد تمام عناصر HTML یا XML از یک نوع مشخص (یا با نام تگ) را انتخاب کنید. به عنوان مثال، می توانید یک شیء آرایه مانند فقط خواندنی دریافت کنید که شامل اشیاء Element تمام عناصر موجود در سند است مانند این:

Var spans = document.getElementsByTagName("span");

مشابه متد getElementsByName()، getElementsByTagName() یک شی NodeList را برمی گرداند. عناصر سند به همان ترتیبی که در سند ظاهر می شوند در آرایه NodeList گنجانده می شوند. عنصر اول

در سند می توانید انتخاب کنید:

Var firstParagraph = document.getElementsByTagName("p");

نام تگ‌های HTML به حروف بزرگ و کوچک حساس نیستند، و زمانی که getElementsByTagName() روی یک سند HTML اعمال می‌شود، مقایسه‌ای با نام تگ انجام می‌دهد. به عنوان مثال، متغیر spans ایجاد شده در بالا، شامل تمام عناصری است که به صورت نوشته شده اند.

با ارسال کاراکتر عام "*" به متد getElementsByTagName() می توانید یک NodeList حاوی تمام عناصر یک سند دریافت کنید.

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

شما می توانید این کار را به صورت زیر انجام دهید:

Var firstParagraph = document.getElementsByTagName("p"); var firstParagraphSpans = firstParagraph.getElementsByTagName("span");

به دلایل تاریخی، کلاس HTMLDocument ویژگی های خاصی را برای دسترسی به انواع خاصی از گره ها تعریف می کند. خواص تصاویر, تشکیل می دهدو پیوندهابرای مثال، به اشیایی که مانند آرایه‌های فقط خواندنی حاوی عناصر رفتار می‌کنند، اشاره کنید ، و (اما فقط آن برچسب ها که دارای ویژگی href هستند). این ویژگی‌ها به اشیاء HTMLCollection اشاره می‌کنند که بسیار شبیه به اشیاء NodeList هستند، اما علاوه بر این می‌توانند با مقادیر ویژگی‌های id و name ایندکس شوند.

شی HTMLDocument همچنین ویژگی‌های مترادف تعبیه‌شده و افزونه‌ها را که مجموعه‌ای از عناصر HTMLCollection هستند، تعریف می‌کند. ویژگی anchors غیر استاندارد است، اما می توان از آن برای دسترسی به عناصر استفاده کرد ، که دارای ویژگی نام است اما ویژگی href ندارد. ویژگی scripts توسط استاندارد HTML5 تعریف شده است و مجموعه ای از عناصر HTMLCollection است.

علاوه بر این، شی HTMLDocument دو ویژگی را تعریف می کند که هر کدام به یک مجموعه اشاره نمی کند، بلکه به یک عنصر واحد اشاره دارد. ویژگی document.body نشان دهنده عنصر سند HTML است و ویژگی document.head نشان دهنده . این ویژگی ها همیشه در سند تعریف می شوند: حتی اگر سند منبع حاوی عناصر و عناصر نباشد، مرورگر آنها را به طور ضمنی ایجاد می کند. ویژگی documentElement یک شی Document به عنصر ریشه سند اشاره دارد. در اسناد HTML همیشه نشان دهنده .

انتخاب عناصر بر اساس کلاس CSS

مقدار ویژگی کلاس HTML لیستی از شناسه های صفر یا بیشتر است که با فاصله از هم جدا شده اند. این به شما امکان می دهد مجموعه ای از عناصر سند مرتبط را تعریف کنید: هر عنصری که شناسه یکسانی در ویژگی کلاس دارد، بخشی از همان مجموعه است. کلمه class در جاوا اسکریپت رزرو شده است، بنابراین جاوا اسکریپت سمت سرویس گیرنده از ویژگی className برای ذخیره مقدار ویژگی کلاس HTML استفاده می کند.

معمولاً ویژگی کلاس همراه با شیوه نامه های آبشاری CSS برای اعمال یک سبک رندر مشترک برای همه اعضای یک مجموعه استفاده می شود. با این حال، علاوه بر این، استاندارد HTML5 متد ()getElementsByClassName را تعریف می‌کند که به شما امکان می‌دهد چندین عنصر سند را بر اساس شناسه‌های ویژگی‌های کلاس آنها انتخاب کنید.

مانند متد getElementsByTagName()، متد getElementsByClassName() را می توان هم در اسناد HTML و هم در عناصر HTML فراخوانی کرد و یک شی NodeList زنده را که حاوی تمام نوادگان سند یا عنصری است که با معیارهای جستجو مطابقت دارند، برمی گرداند.

متد getElementsByClassName() یک آرگومان رشته ای می گیرد، اما خود رشته می تواند شامل چندین شناسه باشد که با فاصله از هم جدا شده اند. تمام عناصری که ویژگی‌های کلاس آن‌ها همه شناسه‌های مشخص‌شده را شامل می‌شوند، مطابقت داده می‌شوند. ترتیب شناسه ها مهم نیست. توجه داشته باشید که هم در صفت کلاس و هم در آرگومان متد ()getElementsByClassName، شناسه‌های کلاس با فاصله از هم جدا می‌شوند تا کاما.

در زیر چند نمونه از استفاده از متد getElementsByClassName() آورده شده است:

// یافتن تمام عناصر با کلاس "warning" var warnings = document.getElementsByClassName("warning"); // یافتن همه فرزندان یک عنصر با شناسه "log" // با کلاس های "error" و "fatal" var log = document.getElementById("log"); var fatal = log.getElementsByClassName("خطای مرگبار");

انتخاب عناصر با استفاده از انتخابگرهای CSS

CSS Cascading Style Sheets دارای ساختارهای نحوی بسیار قدرتمندی است که به عنوان انتخابگر شناخته می شوند که به شما امکان می دهد عناصر یا مجموعه هایی از عناصر را در یک سند توصیف کنید. در کنار استانداردسازی انتخابگرهای CSS3، استاندارد دیگری از W3C که به نام Selectors API شناخته می‌شود، روش‌های جاوا اسکریپت را برای بازیابی عناصری که با یک انتخابگر مشخص مطابقت دارند، تعریف می‌کند.

کلید این API متد querySelectorAll() شیء Document است. یک آرگومان رشته ای با یک انتخابگر CSS می گیرد و یک شی NodeList را نشان می دهد که تمام عناصر سند را نشان می دهد که با انتخابگر مطابقت دارد.

علاوه بر متد ()querySelectorAll، شی document یک متد querySelector() را نیز تعریف می‌کند، که شبیه به querySelectorAll() است با این تفاوت که فقط اولین عنصر منطبق (به ترتیب سند) را برمی‌گرداند، یا اگر عناصر منطبقی وجود نداشته باشد، null را برمی‌گرداند. .

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

ساختار سند و ناوبری اسناد

پس از انتخاب یک عنصر سند، گاهی اوقات لازم است بخش های مرتبط با ساختار سند (والد، خواهر و برادر، فرزند) را پیدا کنید. یک شی Document را می توان به عنوان درختی از اشیاء Node در نظر گرفت. نوع Node ویژگی هایی را تعریف می کند که به شما امکان می دهد چنین درختی را پیمایش کنید. رابط کاربری دیگری برای پیمایش اسناد وجود دارد، مانند درخت شی Element.

اسناد به عنوان درخت گره

شی Document، اشیاء Element آن، و اشیاء Text که قطعات متن را در سند نشان می دهند، همگی اشیاء Node هستند. کلاس Node ویژگی های مهم زیر را تعریف می کند:

node پدر و مادر

گره والد این گره یا تهی برای گره هایی که والد ندارند، مانند Document.

childNodes

یک شیء آرایه مانند قابل خواندن (NodeList) که نمایشی از گره های فرزند را ارائه می دهد.

اولين فرزند، آخرين فرزند

اولین و آخرین گره فرزند، یا اگر گره داده شده گره فرزند نداشته باشد، تهی است.

خواهر بعدی، خواهر و برادر قبلی

گره های برادر بعدی و قبلی. گره های خواهر و برادر دو گره هستند که والد یکسانی دارند. ترتیب ظاهر شدن آنها با ترتیب در سند مطابقت دارد. این ویژگی‌ها گره‌ها را به یک لیست دوگانه پیوند می‌دهند.

nodeType

نوع این گره گره های نوع Document دارای مقدار 9 در این ویژگی هستند. گره های نوع Element - مقدار 1. گره های متنی از نوع Text - مقدار 3. گره های نوع Comments - مقدار 8 و گره ها از نوع DocumentFragment - مقدار 11.

nodeValue

محتوای متن گره های متن و نظر.

nodeName

نام یک تگ Element با تمام کاراکترها به حروف بزرگ تبدیل شده است.

با استفاده از این ویژگی های کلاس Node، می توانید به گره فرزند دوم اولین گره فرزند شی Document، همانطور که در زیر نشان داده شده است، ارجاع دهید:

Document.childNodes.childNodes == document.firstChild.firstChild.nextSibling

فرض می کنیم که سند مورد نظر دارد نمای بعدی:

TestHello World!

سپس گره فرزند دوم گره فرزند اول عنصر خواهد بود. در ویژگی nodeType حاوی مقدار 1 و در ویژگی nodeName حاوی مقدار "BODY" است.

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

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

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

اولین قسمت این رابط کاربری، ویژگی فرزند اشیاء Element است. مانند ویژگی childNodes، مقدار آن یک شی NodeList است. با این حال، بر خلاف ویژگی childNodes، لیست فرزندان فقط شامل اشیاء Element است.

توجه داشته باشید که گره های Text و Comment گره فرزند ندارند. این بدان معناست که ویژگی Node.parentNode که در بالا توضیح داده شد هرگز گره هایی از نوع Text یا Comment را بر نمی گرداند. مقدار ویژگی parentNode هر شیء Element همیشه یک شیء Element دیگر یا ریشه درخت خواهد بود - یک شیء Document یا DocumentFragment.

بخش دوم رابط برنامه ناوبری عنصر سند، ویژگی های شی Element است، مشابه ویژگی های دسترسی به گره های فرزند و خواهر و برادر شی Node:

firstElementChild، lastElementChild

مشابه ویژگی های firstChild و lastChild است، اما عناصر فرزند را برگردانید.

nextElementSibling، previousElementSibling

مشابه ویژگی های nextSibling و previousSibling است، اما عناصر sibling را برگردانید.

childElementCount

تعداد عناصر فرزند همان مقدار ویژگی child.length را برمی گرداند.

این ویژگی های دسترسی عنصر فرزند و خواهر در همه مرورگرهای فعلی به جز IE استاندارد و پیاده سازی شده است.