آموزش HTML - مدل شیء سند (DOM)
مدل شیء سند HTML (DOM)
مدل شیء سند HTML (به اختصار HTML DOM) تمام عناصر یک سند HTML را به صورت سلسله‌مراتبی (یا ساختار درختی) نشان می‌دهد. به‌طوری که هر گره (node) از این درخت، نماینده یک عنصر در سند HTML است.
دسترسی و تغییر در HTML DOM
با استفاده از متدهای HTML DOM می‌توانیم به درخت دسترسی پیدا کرده و ساختار یا محتوای سند HTML مربوطه را تغییر دهیم. همچنین می‌توانیم رویدادهایی (events) را به گره‌ها متصل کنیم.
ساختار درختی HTML DOM
به عنوان مثال، اگر سند HTML شما شامل عناصری مانند <html>، <head>، <body>، <title>، <link>، <img> و <p> باشد، مرورگر یک درخت DOM از سند HTML ایجاد می‌کند که می‌توان آن را به صورتی که در نمودار زیر نشان داده شده است نمایش داد -
لطفاً توجه داشته باشید که هر سند HTML شامل تگ‌های <html>، <head> و <body> است. عنصر ریشه (root element) همان <html> است و تگ‌های <head> و <body> عناصر فرزند آن هستند.
مدل شیء سند (Document Object Model) چیست؟
مدل شیء سند (DOM) یک رابط برنامه‌نویسی است که به عنوان پل ارتباطی بین صفحات وب و اسکریپت‌ها یا زبان‌های برنامه‌نویسی عمل می‌کند. این مدل، یک سند وب (مانند HTML یا XML) را به عنوان درختی از اشیاء نشان می‌دهد که در آن هر شاخه از درخت به یک گره ختم می‌شود و هر گره شامل اشیاء است.
روی دکمه زیر کلیک کنید تا آن را به طور کامل درک کنید. این کار یک درخت DOM ایجاد می‌کند.
مجموعه متدهای ارائه شده توسط DOM به زبان‌های برنامه‌نویسی مانند جاوا اسکریپت اجازه می‌دهد تا به درخت DOM دسترسی داشته باشند. با استفاده از این متدها، می‌توانید ساختار، استایل یا محتوای سند را تغییر دهید. این امر باعث تعاملی و پویا شدن صفحه وب می‌شود.
مدل DOM یک زبان برنامه‌نویسی نیست، بلکه به گونه‌ای طراحی شده است که مستقل از زبان باشد. اکثر توسعه‌دهندگان وب از طریق جاوا اسکریپت از DOM استفاده می‌کنند، با این حال، پیاده‌سازی‌های DOM را می‌توان برای هر زبانی ساخت.
تفاوت HTML DOM و JavaScript DOM
ما از HTML برای ساختاردهی به صفحه وب و از JavaScript برای تعاملی کردن آن استفاده می‌کنیم. با این حال، جاوا اسکریپت نمی‌تواند مستقیماً یک صفحه وب را درک کند و از HTML DOM کمک می‌گیرد. هنگامی که یک صفحه HTML بارگذاری می‌شود، مرورگر یک مدل شیء از صفحه می‌سازد که جاوا اسکریپت می‌تواند با آن تعامل داشته باشد تا محتوا، ساختار و استایل‌های صفحه را دستکاری کند.
جاوا اسکریپت می‌تواند عملیات زیر را با کمک مدل شیء انجام دهد -
- دسترسی به عناصر HTML و جایگزینی آن‌ها.
- دسترسی به ویژگی‌های (attributes) HTML و جایگزینی آن‌ها.
- تغییر تمام استایل‌های CSS در صفحه.
- پاسخ به رویدادهای کاربر.
- افزودن پویانمایی (انیمیشن) به صفحه وب.
جدول زیر تفاوت بین HTML DOM و JavaScript DOM را توضیح می‌دهد -
| HTML DOM | JavaScript DOM |
|---|---|
|
مدل HTML DOM یک مدل شیء برای HTML است که تمام عناصر یک سند HTML را در یک ساختار درختی‌شکل نشان می‌دهد. |
مدل HTML DOM یک API برای جاوا اسکریپت است که به افزودن، تغییر و جایگزینی عناصر، ویژگی‌ها و رویدادهای یک سند HTML کمک می‌کند. |
مرجع متدهای DOM
در زیر لیستی از متدهای مهم DOM آورده شده است -
| شماره | متد و توضیحات |
|---|---|
| ۱. | toString()
برای تبدیل یک عنصر HTML به فرمت رشته‌ای (string) استفاده می‌شود. |
| ۲. | setAttribute()
این متد به شما اجازه می‌دهد ویژگی‌هایی را برای یک عنصر خاص تعریف کنید. |
| ۳. | setAttributeNode()
این متد به شما اجازه می‌دهد یک گره ویژگی خاص را روی یک عنصر خاص تعریف کنید. |
| ۴. | scrollIntoView()
با تنظیم موقعیت اسکرول، اطمینان حاصل می‌کند که یک عنصر خاص در صفحه وب یا کانتینر قابل اسکرول ظاهر و قابل مشاهده شود. |
| ۵. | querySelector()
برای انتخاب و دسترسی به اولین عنصر HTML که با انتخابگر(های) CSS داده شده درون سند مطابقت دارد استفاده می‌شود. |
| ۶. | querySelectorAll()
این متد به شما اجازه می‌دهد تمام عناصر HTML که با انتخابگر(های) CSS داده شده درون سند مطابقت دارند را انتخاب کرده و به آن‌ها دسترسی داشته باشید. |
| ۷. | remove()
این متد می‌تواند یک عنصر را به طور کامل از صفحه وب حذف کند. |
| ۸. | removeAttribute()
این متد برای حذف هر ویژگی که روی یک عنصر HTML در ساختار DOM تنظیم شده است استفاده می‌شود. |
| ۹. | removeAttributeNode()
به شما اجازه می‌دهد یک گره ویژگی مشخص را از یک عنصر حذف کنید. |
| ۱۰. | removeChild()
برای حذف عنصر فرزند انتخاب شده از عنصر والد آن استفاده می‌شود. |
| ۱۱. | removeEventListener()
این متد به شما اجازه می‌دهد یک شنونده رویداد (event listener) که قبلاً به یک عنصر اختصاص یافته بود را حذف کنید. |
| ۱۲. | replaceChild()
این متد امکان جایگزینی یک عنصر فرزند را با عنصر فرزند دیگر در یک عنصر والد فراهم می‌کند. |
| ۱۳. | hasAttribute()
برای بررسی وجود یک ویژگی در یک عنصر HTML استفاده می‌شود. |
| ۱۴. | hasAttributes()
این متد بررسی می‌کند که آیا یک عنصر در HTML DOM دارای ویژگی هست یا خیر. |
| ۱۵. | hasChildNodes()
برای بررسی اینکه آیا یک عنصر HTML دارای عنصر فرزند در داخل خود هست یا خیر استفاده می‌شود. |
| شماره | متد و توضیحات |
|---|---|
| ۱۶. | getAttribute()
مقدار یک ویژگی مشخص شده متعلق به یک عنصر HTML را برمی‌گرداند. |
| ۱۷. | getBoundingClientRect()
این متد برای به دست آوردن اندازه یک عنصر و موقعیت آن نسبت به پنجره نمایش (viewport) استفاده می‌شود. |
| ۱۸. | closest()
این متد نزدیک‌ترین نیاکان عنصر فعلی (یا خود عنصر فعلی) که با انتخابگر CSS داده شده مطابقت دارد را برمی‌گرداند. اگر چنین نیاکانی وجود نداشته باشد، مقدار null را برمی‌گرداند. |
| ۱۹. | contains()
با استفاده از این متد می‌توانید بررسی کنید که آیا یک عنصر DOM شامل عنصر دیگری در زیردرخت خود هست یا خیر. |
| ۲۰. | click()
متد click() یک کلیک موس را روی یک عنصر فعال می‌کند. |
| ۲۱. | normalize()
برای ادغام گره‌های متنی مجاور در یک عنصر HTML از طریق حذف گره‌های متنی خالی استفاده می‌شود. |
| ۲۲. | isDefaultNamespace()
برای بررسی اینکه آیا یک URI فضای نام مشخص، فضای نام پیش‌فرض برای عناصر داخل یک سند یا عنصر است استفاده می‌شود. |
| ۲۳. | isEqualNode()
این متد با مقایسه ویژگی‌ها، انواع و گره‌های فرزند، برابر بودن دو گره را بررسی می‌کند. |
| ۲۴. | isSameNode()
بررسی می‌کند که آیا دو ارجاع گره به یک شیء گره یکسان در سند HTML اشاره می‌کنند یا خیر. |
| ۲۵. | isSupported()
این متد برای بررسی اینکه آیا مرورگر وب می‌تواند از یک قابلیت یا عملکرد خاص در صفحه وب پشتیبانی کند یا خیر استفاده می‌شود. |
| ۲۶. | insertAdjacentElement()
این متد به شما اجازه می‌دهد یک عنصر جدید HTML را دقیقاً در جایی که نیاز دارید نسبت به عنصر دیگر در صفحه وب درج کنید. |
| ۲۷. | insertBefore()
این متد به شما اجازه می‌دهد یک عنصر فرزند جدید را داخل یک عنصر والد اضافه کنید و موقعیت آن را نسبت به یک عنصر فرزند دیگر مشخص نمایید. |
| ۲۸. | blur()
این متد به شما اجازه می‌دهد به صورت پویا فوکوس را از یک عنصر در HTML DOM بردارید. |
| ۲۹. | matches()
این متد بررسی می‌کند که آیا یک عنصر با انتخابگرهای CSS داده شده مطابقت دارد یا خیر. |
| ۳۰. | insertAdjacentHTML()
به شما کمک می‌کند تا یک کد HTML مشخص را در موقعیت خاصی نسبت به عنصری که این متد را فراخوانی می‌کند درج کنید. |
| ۳۱. | addEventListener()
برای ثبت هندلرهای رویداد (event handlers) روی عناصر استفاده می‌شود. |
| ۳۲. | cloneNode()
یک گره را همراه با ویژگی‌ها و گره‌های فرزندش کپی می‌کند. |
| ۳۳. | appendChild()
این متد برای افزودن یک گره (عنصر) فرزند جدید به عنوان آخرین فرزند گره والد مشخص‌شده استفاده می‌شود. |
| ۳۴. | compareDocumentPosition()
با مقایسه موقعیت دو عنصر (گره) DOM، درک ساختار سند را امکان‌پذیر می‌سازد و یک بیت‌ماسک (مقدار عددی) برمی‌گرداند. |
| ۳۵. | focus()
این متد فوکوس را روی عناصر خاص صفحه وب تنظیم می‌کند. |
| ۳۶. | getAttributeNode()
برای دریافت شیء گره ویژگی استفاده می‌شود. |
| ۳۷. | getElementsByClassName()
این متد یک HTMLCollection زنده از عناصری که با نام کلاس مشخص‌شده درون سند یا یک عنصر خاص مطابقت دارند را بازیابی می‌کند. |
| ۳۸. | getElementsByTagName()
یک HTMLCollection زنده از عناصری که با نام تگ مشخص‌شده مطابقت دارند را بازیابی می‌کند. |
| ۳۹. | insertAdjacentText()
به شما اجازه می‌دهد محتوای متنی را در یک موقعیت مشخص نسبت به عنصری که این متد را فراخوانی کرده درج کنید. |
| ۴۰. | namedItem()
برای دریافت اولین عنصر از مجموعه‌ای که id یا نام آن با نام ذکر شده در پارامتر مطابقت دارد استفاده می‌شود. |
| ۴۱. | item()
عنصری را از HTMLCollection که در اندیس مشخص‌شده در پارامتر قرار دارد برمی‌گرداند. |
| ۴۲. | entries()
این متد یک تکرارکننده (iterator) را بازیابی می‌کند که به ما اجازه می‌دهد روی تمام جفت‌های کلید/مقدار در شیء پیمایش کنیم. |
| ۴۳. | forEach()
این متد تابع کال‌بک (callback) ذکر شده در پارامتر را یک بار برای هر جفت مقدار در لیست به ترتیب درج آن‌ها فراخوانی می‌کند. |
| ۴۴. | item()
این متد یک گره را از NodeList مشخص‌شده توسط اندیس در پارامتر بازیابی می‌کند. |
| ۴۵. | keys()
این متد یک تکرارکننده را بازیابی می‌کند که به ما اجازه می‌دهد تمام کلیدهای موجود در NodeList را پیمایش کنیم. |
| ۴۶. | writeln()
این متد قابلیت نوشتن مستقیم عبارت‌های HTML یا JavaScript را در سند فراهم می‌کند و بعد از هر عبارت یک کاراکتر خط جدید اضافه می‌کند. |
| ۴۷. | write()
این متد قابلیت نوشتن مستقیم عبارت‌های HTML یا JavaScript را در یک سند فراهم می‌کند. |
| ۴۸. | hasFocus()
برای تعیین اینکه آیا سند یا هر عنصری در داخل سند دارای فوکوس هست یا خیر استفاده می‌شود. |
| ۴۹. | renameNode()
برای تغییر نام گره‌ها استفاده می‌شود. |
| ۵۰. | open()
این متد یک سند را برای نوشتن باز می‌کند. |
| ۵۱. | normalizeDocument()
این متد کل یک سند HTML را استانداردسازی (normalize) می‌کند. |
| ۵۲. | normalize()
گره‌های متنی خالی را حذف می‌کند و گره‌های متنی مجاور را از گره والد پیوند می‌دهد. |
| ۵۳. | adoptNode()
این متد یک گره را از سند دیگری به سند فعلی منتقل و پذیرش می‌کند. |
| ۵۴. | addEventListener()
برای راه اندازی تابعی استفاده می‌شود که هر زمان رویداد مشخص شده به هدف تحویل داده شد فراخوانی شود. |
| ۵۵. | execCommand()
این متد برای اجرای یک دستور مشخص شده روی بخش قابل ویرایش که توسط کاربر انتخاب شده است استفاده می‌شود. |
| ۵۶. | createTextNode()
برای ایجاد یک گره متنی با متن مشخص شده استفاده می‌شود. |
| ۵۷. | createEvent()
برای ایجاد یک شیء رویداد که نوع رویداد آن در پارامتر مشخص شده استفاده می‌شود. |
| ۵۸. | createDocumentFragment()
یک قطعه سند خالی جدید ایجاد می‌کند که در حافظه قرار می‌گیرد. |
| ۵۹. | createComment()
این متد برای ایجاد یک گره کامنت (توضیحات) با متن داده شده استفاده می‌شود. |
| ۶۰. | createAttribute()
برای ایجاد یک ویژگی با نامی خاص با استفاده از جاوا اسکریپت برای یک عنصر HTML و برگرداندن شیء Attr استفاده می‌شود. |
| ۶۱. | close()
جریان خروجی (output stream) را می‌بندد. |
| ۶۲. | getElementsByTagName()
یک متد فقط‌خواندنی است که برای دریافت مجموعه تمام عناصری در سند که دارای نام تگ مشخص شده در پارامتر هستند استفاده می‌شود. |
| ۶۳. | getElementsByName()
این متد برای برگرداندن مجموعه عناصری با ویژگی name مشخص شده در پارامتر استفاده می‌شود. |
| ۶۴. | getElementsByClassName()
این متد برای دریافت مجموعه تمام عناصر موجود در سند با نام کلاس مشخص شده استفاده می‌شود. |
| ۶۵. | getElementById()
عنصر مربوط به ID داده شده را برمی‌گرداند. |
| ۶۶. | createElement()
این متد یک عنصر HTML مشخص شده توسط نام تگ یا نام عنصر را ایجاد می‌کند. |
| ۶۷. | add()
این متد یک یا چند توکن مشخص شده در پارامتر را به DOMTokenList اضافه می‌کند. |
| ۶۸. | contains()
این متد بررسی می‌کند که آیا لیست شامل توکن مشخص شده است یا خیر و بر این اساس یک مقدار بولین برمی‌گرداند. |
| ۶۹. | entries()
این متد تکرارکننده‌ای برمی‌گرداند که اجازه پیمایش تمام جفت‌های کلید/مقدار را می‌دهد. |
| ۷۰. | forEach()
این متد تابع کال‌بک ذکر شده در پارامتر را یک بار برای هر جفت مقدار در لیست به ترتیب درج آن‌ها فراخوانی می‌کند. |
| ۷۱. | item()
این متد توکنی را از DOMTokenList که توسط اندیس در پارامتر مشخص شده است برمی‌گرداند. |
| ۷۲. | keys()
این متد تکرارکننده‌ای برمی‌گرداند که به شما امکان می‌دهد تمام کلیدهای موجود در لیست توکن را پیمایش کنید. |
| ۷۳. | remove()
این متد یک یا چند توکن مشخص شده در پارامتر را از DOMTokenList حذف می‌کند. |
| ۷۴. | replace()
این متد توکن موجود در DomTokenList را با توکن جدید مشخص شده در پارامتر جایگزین می‌کند. |
| ۷۵. | supports()
این متد بررسی می‌کند که آیا توکن مشخص شده در پارامتر در DOMTokenList پشتیبانی می‌شود یا خیر. |
| ۷۶. | toggle()
این متد به صورت پویا یک توکن یا کلاس را از ویژگی class عنصر اضافه یا حذف می‌کند. |
| ۷۷. | values()
این متد تکرارکننده‌ای برمی‌گرداند که به ما امکان می‌دهد تمام مقادیر موجود در لیست توکن را پیمایش کنیم. |
مرجع ویژگی‌های DOM
در زیر لیستی از ویژگی‌های مهم DOM آورده شده است -
| شماره | روش و توضیحات |
|---|---|
| ۱. | title
به ما کمک می‌کند تا به مقدار ذخیره شده در ویژگی title یک عنصر دسترسی پیدا کرده و آن را به روز کنیم. |
| ۲. | textContent
این ویژگی برای دسترسی و به روز رسانی محتوای متنی یک عنصر HTML و تمام عناصر فرزند آن به عنوان یک رشته واحد استفاده می‌شود. |
| ۳. | tagName
نام تگ HTML را با حروف بزرگ که یک عنصر را در صفحه وب تعریف می‌کند به شما می‌دهد. |
| ۴. | style
با استفاده از این ویژگی، می‌توانید استایل‌های CSS را که مستقیماً برای یک عنصر خاص تنظیم شده‌اند دریافت کنید. |
| ۵. | tabIndex
برای دسترسی و به روز رسانی مقدار ویژگی tabIndex برای یک عنصر استفاده می‌شود. |
| ۶. | scrollLeft
این ویژگی برای دسترسی و به روز رسانی میزان اسکرول افقی محتوای یک عنصر استفاده می‌شود. |
| ۷. | scrollTop
برای دسترسی و به روز رسانی میزان اسکرول عمودی محتوای یک عنصر استفاده می‌شود. |
| ۸. | scrollWidth
این ویژگی عرض افقی کلی محتوای یک عنصر را به پیکسل به شما می‌دهد. |
| ۹. | scrollHeight
با استفاده از این ویژگی می‌توانید ارتفاع عمودی کلی محتوای یک عنصر را به پیکسل به دست آورید. |
| ۱۰. | id
ویژگی id برای تنظیم و بازیابی مقدار ویژگی id عنصر استفاده می‌شود. |
| ۱۱. | innerText
به ما اجازه می‌دهد محتوای متنی مرئی را مستقیماً درون یک عنصر HTML در صفحه وب بازیابی کرده یا تغییر دهیم. |
| ۱۲. | isContentEditable
برای بررسی اینکه آیا یک عنصر صفحه وب می‌تواند مستقیماً توسط کاربران ویرایش شود یا خیر استفاده می‌شود. |
| ۱۳. | lang
ویژگی lang مشخصه‌‌ای از یک عنصر HTML است که کد زبان را تعیین می‌کند. |
| ۱۴. | lastChild
ویژگی lastChild گره‌ای را برمی‌گرداند که به آخرین گره فرزند یک عنصر والد خاص اشاره دارد. |
| ۱۵. | lastElementChild
گره‌ای را برمی‌گرداند که آخرین عنصر فرزند یک عنصر والد را نگه می‌دارد. |
| شماره | ویژگی‌ها و توضیحات |
|---|---|
| ۱۶. | namespaceURI
ویژگی namespaceURI یک عنصر، URI فضای نام اختصاص داده شده به عنصر را ارائه می‌دهد. |
| ۱۷. | nextElementSibling
با استفاده از این ویژگی می‌توانید گره بعدی بلافاصله را در دنباله یک عنصر خاص به دست آورید. |
| ۱۸. | nextSibling
برای دسترسی به گره بعدی بلافاصله در دنباله از گره فعلی درون درخت DOM استفاده می‌شود. |
| ۱۹. | nodeName
این ویژگی برای شناسایی نوع و نام گره بر اساس محتوای آن استفاده می‌شود. |
| ۲۰. | nodeType
ویژگی nodeType یک مقدار عددی صحیح برمی‌گرداند که نشان‌دهنده نوع یک گره است. |
| ۲۱. | nodeValue
برای دسترسی و به روز رسانی مقدار یک گره استفاده می‌شود. |
| ۲۲. | offsetHeight
این ویژگی برای به دست آوردن ارتفاع قابل مشاهده کامل آن عنصر در صفحه وب، شامل پدینگ عمودی و حاشیه‌ها (borders)، بر حسب پیکسل استفاده می‌شود. |
| ۲۳. | offsetLeft
اندازه‌گیری مبتنی بر پیکسل فاصله از مرز چپ عنصر تا مرز چپ نزدیک‌ترین والد موقعیت‌دهی شده آن را برمی‌گرداند. |
| ۲۴. | offsetParent
برای یافتن نزدیک‌ترین عنصر نیاکان که بر موقعیت‌دهی عنصر دیگر تأثیر می‌گذارد استفاده می‌شود. |
| ۲۵. | offsetWidth
ویژگی offsetWidth یک عنصر، عرض مرئی کل آن عنصر را در صفحه وب به شما می‌دهد. |
| ۲۶. | outerHTML
ویژگی outerHTML کل کد HTML یک عنصر را بازیابی می‌کند. |
| ۲۷. | outerText
این ویژگی می‌تواند به محتوای متنی یک عنصر HTML، شامل تمام متن‌ها و عناصر تودرتو درون آن، دسترسی پیدا کرده یا آن را به روز کند. |
| ۲۸. | ownerDocument
شیء مربوط به گره سندی که حاوی یک عنصر خاص است را به شما می‌دهد. |
| ۲۹. | parentElement
به شما اجازه می‌دهد به عنصر والد بلافاصله یک عنصر خاص در داخل عنصر HTML دسترسی پیدا کنید. |
| ۳۰. | parentNode
این ویژگی برای دسترسی به گره والد بلافاصله یک گره خاص درون عنصر HTML استفاده می‌شود. |
| ۳۱. | classList
به عنوان یک کانتینر فعال عمل می‌کند که مجموعه‌ای از کلاس‌های CSS اختصاص داده شده به ویژگی class یک عنصر را نگه می‌دارد. |
| ۳۲. | childNodes
برای بازیابی تمام گره‌های فرزند یک عنصر، شامل عناصر، گره‌های متنی و کامنت‌ها استفاده می‌شود. |
| ۳۳. | className
با استفاده از این ویژگی می‌توانید به مقدار ویژگی class یک عنصر دسترسی پیدا کرده یا آن را تغییر دهید. |
| ۳۴. | clientTop
برای به دست آوردن موقعیت دقیق عنصر و محاسبه اندازه در چیدمان‌های صفحه وب استفاده می‌شود. |
| ۳۵. | firstElementChild
اولین عنصر فرزند را درون یک عنصر والد داده شده ارائه می‌دهد. |
| ۳۶. | offsetTop
با استفاده از این ویژگی، می‌توانید فاصله عمودی بر حسب پیکسل را از لبه بالایی عنصر تا لبه بالایی نزدیک‌ترین نیاکان موقعیت‌دهی شده آن به دست آورید. |
| ۳۷. | attributes
یک 'NameNodeMap' حاوی مجموعه ویژگی‌های یک عنصر HTML را برمی‌گرداند |
| ۳۸. | accesskey
این ویژگی به شما اجازه می‌دهد یک میانبر صفحه کلید را به یک عنصر در صفحه وب اختصاص دهید. |
| ۳۹. | firstChild
به شما کمک می‌کند به اولین گره فرزند یک عنصر والد داده شده در HTML DOM دسترسی پیدا کنید. |
| ۴۰. | innerHTML
این ویژگی به ما اجازه می‌دهد محتوای HTML موجود یک عنصر را بخوانیم و آن را با محتوای HTML جدید به روز کنیم. |
| ۴۱. | dir
دسترسی لازم برای تنظیم و بازیابی مقدار ویژگی dir هر عنصری در HTML را فراهم می‌کند. |
| ۴۲. | contentEditable
با استفاده از این ویژگی می‌توانید محتوای متنی داخل عناصر HTML را قابل ویرایش کنید. |
| ۴۳. | clientWidth
عرض یک عنصر را شامل پدینگ اما بدون مارجین، حاشیه یا عرض نوار اسکرول برمی‌گرداند. |
| ۴۴. | clientLeft
این ویژگی برای به دست آوردن عرض حاشیه چپ یک عنصر، بدون پدینگ یا مارجین چپ استفاده می‌شود. |
| ۴۵. | clientHeight
برای به دست آوردن ارتفاع داخلی یک عنصر شامل پدینگ اما بدون مارجین، حاشیه یا عرض نوار اسکرول استفاده می‌شود. |
| ۴۶. | children
این ویژگی مجموعه‌ای از عناصر فرزند را برمی‌گرداند. |
| ۴۷. | childElementCount
تعداد عناصر فرزند مستقیم یک عنصر مشخص شده را برمی‌گرداند. |
| ۴۸. | src
این ویژگی برای عناصری مانند <img>، <script> یا <iframe> برای دریافت یا تنظیم URL منبع استفاده می‌شود. |
| ۴۹. | href
این ویژگی برای عناصر لنگر <a> جهت دریافت یا تنظیم ارجاع ابرپیوند استفاده می‌شود. |
| ۵۰. | checked
این ویژگی برای دریافت یا تنظیم وضعیت علامت‌خورده (checked) یک چک‌باکس یا دکمه رادیویی استفاده می‌شود. |
| ۵۱. | disabled
این ویژگی برای دریافت یا تنظیم وضعیت غیرفعال (disabled) یک عنصر ورودی استفاده می‌شود. |
| ۵۲. | length
تعداد عناصر موجود در یک HTMLCollection را برمی‌گرداند. |
| ۵۳. | length
این متد تعداد آیتم‌های موجود در NodeList را برمی‌گرداند. |
| ۵۴. | value
این ویژگی برای تنظیم یا دریافت مقدار یک ویژگی استفاده می‌شود. |
| ۵۵. | specified
بررسی می‌کند که آیا ویژگی ذکر شده مشخص شده است یا خیر. |
| ۵۶. | name
برای دریافت نام ویژگی استفاده‌شده روی یک عنصر استفاده می‌شود. |
| ۵۷. | isId
این ویژگی تعیین می‌کند که آیا یک ویژگی HTML یک ویژگی 'id' است یا خیر. |
| ۵۸. | URL
یک ویژگی فقط‌خواندنی است که URL کامل سند از جمله پروتکل را برمی‌گرداند. |
| ۵۹. | title
این ویژگی برای تنظیم یا دریافت عنوان سند استفاده می‌شود. |
| ۶۰. | strictErrorChecking
برای تعیین اینکه آیا سند بررسی سخت‌گیرانه خطا را اعمال می‌کند یا خیر استفاده می‌شود. |
| ۶۱. | scripts
یک ویژگی فقط‌خواندنی است که برای برگرداندن تمام عناصر اسکریپت موجود در سند HTML به عنوان یک مجموعه استفاده می‌شود. |
| ۶۲. | links
ویژگی links یک ویژگی فقط‌خواندنی است که مجموعه‌ای از تمام لینک‌های مربوط به عناصر a و area دارای ویژگی href را برمی‌گرداند. |
| ۶۳. | lastModified
این ویژگی تاریخ و زمان آخرین تغییر سند فعلی را برمی‌گرداند. |
| ۶۴. | inputEncoding
ویژگی inputEncoding یک رشته (String) برمی‌گرداند که نشان‌دهنده انکودینگ کاراکترهای سند است. |
| ۶۵. | implementation
یک شیء DOMImplementation را برمی‌گرداند که با سند فعلی مرتبط است. |
| ۶۶. | images
یک ویژگی فقط‌خواندنی است که برای برگرداندن تمام عناصر img موجود در سند HTML به عنوان یک مجموعه استفاده می‌شود. |
| ۶۷. | head
ویژگی head عنصر head مربوط به HTML را برمی‌گرداند. |
| ۶۸. | forms
ویژگی forms یک ویژگی فقط‌خواندنی است که برای برگرداندن تمام عناصر فرم موجود در سند HTML به عنوان یک مجموعه استفاده می‌شود. |
| ۶۹. | embeds
یک ویژگی فقط‌خواندنی است که تمام عناصر embed موجود در سند HTML را به عنوان یک مجموعه برمی‌گرداند. |
| ۷۰. | domConfig
این ویژگی منسوخ شده است و به همین دلیل در همه مرورگرهای جدید مقدار undefined را برمی‌گرداند. |
| ۷۱. | documentURI
این ویژگی برای تنظیم یا برگرداندن مکان سند استفاده می‌شود. |
| ۷۲. | documentMode
ویژگی documentMode یک ویژگی IE8 است که حالت رندر مورد استفاده توسط مرورگر را تعیین می‌کند. |
| ۷۳. | documentElement
عنصر documentElement را به عنوان یک شیء Element برمی‌گرداند. |
| ۷۴. | doctype
این ویژگی DTD (اعلامیه نوع سند) مرتبط با سند HTML فعلی را برمی‌گرداند. |
| ۷۵. | designMode
به ما کمک می‌کند تعیین کنیم آیا کل سند قابل ویرایش است یا خیر. |
| ۷۶. | defaultView
برای برگرداندن شیء پنجره (window) سند استفاده می‌شود. |
| ۷۷. | cookie
ویژگی cookie در سند HTML DOM برای ایجاد، خواندن و حذف کوکی‌ها استفاده می‌شود. |
| ۷۸. | charset
رمزگذاری کاراکترهای سند HTML را برمی‌گرداند. |
| ۷۹. | applets
برای برگرداندن لیستی از تمام عناصر applets در یک سند استفاده می‌شود، اما این ویژگی اکنون منسوخ شده است. |
| ۸۰. | characterSet
این ویژگی برای دریافت رمزگذاری کاراکترهای سند استفاده می‌شود. |
| ۸۱. | anchors
ویژگی anchors یک ویژگی فقط‌خواندنی است که تمام تگ‌های "a" دارای ویژگی name را در سند لیست می‌کند. |
| ۸۲. | baseURI
برای برگرداندن شناسه یکنواخت منبع (URI) پایه سند استفاده می‌شود. |
| ۸۳. | length
این متد تعداد توکن‌های موجود در یک لیست توکن را برمی‌گرداند. |
| ۸۴. | value
این متد مقدار DOMTokenList را که به صورت یک رشته سریال‌سازی شده است برمی‌گرداند. |
| ۸۵. | domain
برای به دست آوردن نام دامنه سروری که سند در حال حاضر روی آن در حال اجرا است استفاده می‌شود. |
سوالات متداول درباره DOM
سوالات متداول (FAQ) متعددی درباره DOM وجود دارد، این بخش تلاش می‌کند به برخی از آن‌ها به طور مختصر پاسخ دهد.
شکل کامل DOM عبارت است از Document Object Model (مدل شیء سند).
در جاوا اسکریپت، DOM برای تعامل با صفحات وب HTML و دستکاری محتوا، ساختار و استایل‌های صفحه استفاده می‌شود.
خیر، DOM یک زبان برنامه‌نویسی نیست. این یک رابط برنامه‌نویسی است که صفحات وب را به زبان‌های برنامه‌نویسی متصل می‌کند.
رابط‌های DOM متدها و ویژگی‌های مختلفی را برای تعامل و دستکاری صفحات وب ارائه می‌دهند. برخی از رابط‌های رایج عبارتند از Document، Element، Event و غیره.
پیشرفت مطالعه: وضعیت خوانده‌شدن این درس فقط در همین مرورگر ذخیره می‌شود؛ بدون نیاز به حساب کاربری.