سلام به شما دوستای خوبم ، امیدوارم که حال شماهمیشهخوب باشه و شادوس سلامت باشین، با اموزش امروزماکه درمورد JavaScript HTML DOM Document میباشد.همراه بمانید.
در مدل شی گرای سند HTML (HTML DOM)، صفحه ی وب (web page) در واقع همان document object (شی) است.
HTML DOM Document

Document object نشانگر صفحه ی وب شما است.

Document object، مالک تمامی دیگر اشیا موجود در صفحه ی وب است.

اگر می خواهید به اشیا موجود در صفحه ی HTML دسترسی داشته باشید، اول باید به شی document دست پیدا کنید.

زیر مثال هایی از چگونگی استفاده از شی document برای دسترسی و مدیریت المان های HTML، ارائه شده.
پیدا کردن عناصر HTML

تابع

شرح

document.getElementById()

پیدا کردن و دسترسی به المان توسط شناسه ی المان مربوطه

document.getElementsByTagName()

پیدا کردن و بازیابی المان مورد نظر با استفاده از اسم تگ (tag name)

document.getElementsByClassName()

دسترسی به المان به وسیله ی اسم کلاس
اصلاح المان های HTML

متد

شرح

element.innerHTML=

Inner HTML یک المان را تغییر می دهد

element.attribute=

خصیصه ی (attribute) المان HTML را تغییر می دهد

element.setAttribute(attribute,value)

خصیصه ی (attribute) المان HTML را تغییر می دهد

element.style.property=

Style یک المان HTML را اصلاح می کند
حذف و اضافه ی المان های HTML

تابع

شرح

document.createElement()

یک المان جدید (HTML) ایجاد می کند.

document.removeChild()

یک المان را حذف می کند.

document.appendChild()

یک المان جدید اضافه می کند.

document.replaceChild()

یک المان را جایگزین می کند.

document.write(text)

نوشته داخل خروجی (output stream) HTML می نویسد به عبارتی دیگر به وسیله ی این متد می توان بطور مستقیم، خروجی HTML چاپ کرد.
افزودن event handler

متد

شرح

document.getElementById(id).onclick=function(){code}

Adding event handler code to an onclick event

کد event handler را به رویداد onclick اضافه می کند.
پیدا کردن و دسترسی به اشیا HTML

اولین نسخه ی HTML DOM که در سال ۱۹۹۸ ارائه شد، در واقع ۱۱ شی HTML، آرایه ای از اشیا (مجموعه اشیا)، خواص را تعریف کرد که هنوز در آخرین ویرایش HTML کاربرد داشته و توسط آن پشتیبانی می شود. سپس در HTML DOM 3، شاهد اضافه شدن اشیا (مجموعه اشیا) و خواص جدیدتری بودیم که برخی از این متدها در جدول زیر برای شما فهرست شده اند:

خاصیت

شرح

DOM

document.anchors

کلیه ی المان های که دارای خصیصه ی name هستند را بازیابی می کند.

۱

document.applets

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

۱

document.baseURI

URI پایه و مطلق یک صفحه را برمی گرداند.

۳

document.body

تگ را بازگردانی می نماید.

۱

document.cookie

تمام نام و مقدار cookieها را در سند برمی گرداند.

۱

document.doctype

Doctype سند را بازیابی می نماید.

۳

document.documentElement

عنصر را بازگردانی می کند.

۳

document.documentMode

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

۳

document.documentURI

Returns the URI of the document

URI (شناسانهٔ یکنواخت منبع( سند را برمی گرداند.

۳

document.domain

Domain name (اسم دامنه ی) سرور را بازمی گرداند.

۱

document.domConfig

منسوخ. پیکربندی DOM سند را برمی گرداند.

۳

document.embeds

کلیه ی تگ ها (عناصر) را بازیابی می کند.

۳

document.forms

تمامی المان های

را برمی گرداند.

۱

document.head

عنصر را بازگردانی می نماید.

۳

document.images

تمامی المان های را برمی گرداند.

۱

document.implementation

پیاده سازی DOM را بازمی گرداند / شی DOMImplementation که این سند را بکار می برد، برمی گرداند.

۳

document.inputEncoding

مجموعه کاراکترهای کدگذاری شده (encoding) سند را برمی گرداند.

۳

document.lastModified

زمان و تاریخ آخرین بروز رسانی سند را بازگردانی می نماید.

۳

document.links

تمامی المان های

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

۱

document.readyState

وضعیت یا status (بارگذاری) سند را بازگردانی می نماید.

۳

document.referrer

URI سند ارجاع دهنده (linking document) را برمی گرداند/ url صفحه ای که سند جاری را بارگذاری کرده است، بازمی گرداند.

۱

document.scripts

تمامی المان یا تگ های را بازگردانی می نماید.

۳

document.title

عنصر را بازیابی می کند.</p> <p>۱</p> <p>document.URL</p> <p>(نشانی وب) کامل سند جاری را بازمی گرداند.URL</p> <p>۱</p> <p>document.strictErrorChecking</p> <p>این خصوصیت، مشخص می کند که آیا error-checking اجرا شده است یا نه.</p> <p>آموزش HTML DOM Elements</p> <div class="clear"></div> </div> <div class="post-tags"> <a href="https://help.regiran.com/tag/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-javascript-html-dom-document/" rel="tag">آموزش JavaScript HTML DOM Document</a><a href="https://help.regiran.com/tag/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa/" rel="tag">آموزش جاوا اسکریپت</a> </div> </div> <div class="post-box-wrapper first"> <div class="post-box"> <h5>درباره نویسنده</h5> <img alt='' src='https://secure.gravatar.com/avatar/c15beff9753565d2c37ed75241a81fba?s=75&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/c15beff9753565d2c37ed75241a81fba?s=150&d=mm&r=g 2x' class='avatar avatar-75 photo' height='75' width='75' /> <p></p> </div> </div> <div class="post-box-wrapper"> <div class="post-box"> <h5>نوشته‌های مرتبط</h5> </div> </div> <div id="comments" class="post-box-wrapper"> <div class="post-box"> <!-- You can start editing here. --> <!-- If comments are open, but there are no comments. --> <div id="respond"> <h5>ارسال دیدگاه</h5> <p class="cancel-comment-reply"><a rel="nofollow" id="cancel-comment-reply-link" href="/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-javascript-html-dom-document/#respond" style="display:none;">برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک کنید.</a></p> <p>شما باید <a href="https://help.regiran.com/wp-login.php?redirect_to=https%3A%2F%2Fhelp.regiran.com%2F%25d8%25a2%25d9%2585%25d9%2588%25d8%25b2%25d8%25b4-javascript-html-dom-document%2F">وارد شوید</a> تا دیدگاهی ارسال کنید.</p> </div> </div> </div> </div> </div> <div id="secondary-sidebar-wrap" class="span-4 last"> <div class="sidebar-secondary"> <ul class="widget-wrap" style="list-style: none; padding: 0;"> <li class="widget" style="background: #fff; border: 1px solid #ccc; padding: 10px 12px; margin-bottom: 15px; border-radius: 6px;"> <a href="https://regiran.com/%d8%ae%d8%af%d9%85%d8%a7%d8%aa-%d8%b3%d8%a6%d9%88-%d9%88-%d8%a8%d9%87%db%8c%d9%86%d9%87%d8%b3%d8%a7%d8%b2%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b1%d8%aa/" target="_blank" style="font-size: 15px; color: #0044cc; font-weight: bold; text-decoration: none;">دوست داری مثل ما بیای صفحه اول گوگل؟</a> <p style="margin: 6px 0 4px; font-size: 13px;">ما رتبه سایت تون رو میکشیم بالا</p> <p style="margin: 6px 0 4px; font-size: 13px;">سئوی حرفه ای رجیران</p> <p style="margin: 6px 0 4px; font-size: 13px;">مشاوره کاملا رایگان</p> <p style="margin: 0; font-weight: bold; color: #c00;">021-22251000</p> <p style="margin: 0; font-weight: bold; color: #c00;">09122459000</p> </li> <li class="widget" style="background: #fff; border: 1px solid #ccc; padding: 10px 12px; margin-bottom: 15px; border-radius: 6px;"> <a href="https://regiran.com/%d8%ab%d8%a8%d8%aa-%d8%af%d8%a7%d9%85%d9%86%d9%87-%d8%ae%d8%b1%db%8c%d8%af-%d9%88-%d8%a7%d9%86%d8%aa%d9%82%d8%a7%d9%84-%d8%af%d8%a7%d9%85%d9%86%d9%87-%d8%a8%d8%a7-%d8%a8%d9%87%d8%aa%d8%b1%db%8c/" target="_blank" style="font-size: 15px; color: #0044cc; font-weight: bold; text-decoration: none;">هنوز سایت نداری؟</a> <p style="margin: 6px 0 4px; font-size: 13px;">الان وقتشه که کسب و کارت رو آنلاین کنی</p> <p style="margin: 6px 0 4px; font-size: 13px;">رجیران با چند سوال، سایتت رو راه میندازه</p> <p style="margin: 6px 0 4px; font-size: 13px;">مشاوره کاملا رایگان</p> <p style="margin: 0; font-weight: bold; color: #c00;">021-22251000</p> <p style="margin: 0; font-weight: bold; color: #c00;">09122459000</p> </li> <li class="widget" style="background: #fff; border: 1px solid #ccc; padding: 10px 12px; margin-bottom: 15px; border-radius: 6px;"> <a href="https://regiran.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%ad%d8%b1%d9%81%d9%87%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b3%d9%81%d8%a7%d8%b1/" target="_blank" style="font-size: 15px; color: #0044cc; font-weight: bold; text-decoration: none;">طراحی سایت با رجیران</a> <p style="margin: 6px 0 4px; font-size: 13px;">با 25 سال سابقه</p> <p style="margin: 6px 0 4px; font-size: 13px;">بهترین کیفیت با مناسب ترین قیمت</p> <p style="margin: 6px 0 4px; font-size: 13px;">مشاوره کاملا رایگان</p> <p style="margin: 0; font-weight: bold; color: #c00;">021-22251000</p> <p style="margin: 0; font-weight: bold; color: #c00;">09122459000</p> </li> </ul> </div> </div> </div> <div class="clear"></div> <div id="footer-wrapper"> <div id="footer"> <div class="sitemap-container clearfix"> <ul class="sitemap clearfix"><li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">رجیران</h4><ul><li><a title="" class="core_button_normal" href="http://members.regiran.com/clientarea.php" id="button-ct-sitemap-domains-domregistration" target="_blank"> پورتال کاربران </a></li><li><a title="" class="core_button_normal" href="http://members.regiran.com/knowledgebase.php?action=displayarticle&id=150" id="button-ct-sitemap-domains-domtransfer" target="_blank"> راهنمای پورتال</a></li><li> <a title="" class="core_button_normal" href="http://members.regiran.com/cart.php" id="button-ct-sitemap-domains-domapps0" target="_blank"> سفارش آنلاین </a></li><li><a title="" class="core_button_normal" href="http://help.regiran.com" id="button-ct-sitemap-domains-domapps" target="_blank"> آموزش وب رجیران </a></li><li> <a title="" class="core_button_normal" href="http://regiran.com/%D9%82%D9%88%D8%A7%D9%86%DB%8C%D9%86-%D9%88-%D8%B4%D8%B1%D8%A7%DB%8C%D8%B7/" id="button-ct-sitemap-domains-domapps1" target="_blank"> قوانین و توافقنامه </a></li></ul></li> <li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">نمايندگی</h4><ul><li><a title="for business users" class="" href="http://regiran.com/%d8%ab%d8%a8%d8%aa-%d8%af%d8%a7%d9%85%d9%86%d9%87/" id="button-ct-sitemap-mywebsite-business" target="_blank"> نمایندگی ثبت دامنه </a></li><li><a title="for individual users" class="" href="http://regiran.com/%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b1%db%8c%d8%b3%d9%84%d8%b1%db%8c-%d9%87%d8%a7%d8%b3%d8%aa-%d9%84%db%8c%d9%86%d9%88%da%a9/" id="button-ct-sitemap-mywebsite-personal" target="_blank"> نمايندگی هاست رجیران </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%86%d9%85%d8%a7%db%8c%d9%86%d8%af%da%af%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b1%db%8c%d8%b3%d9%84%d8%b1%db%8c-%d9%87%d8%a7%d8%b3%d8%aa-%d9%84%db%8c%d9%86%d9%88%da%a9/" id="button-ct-sitemap-hosting-sitedesign" target="_blank"> نمايندگی اعتباری </a></li> </ul></li> <li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;"> سرورها</h4><ul><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%b3%d8%b1%d9%88%d8%b1-%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b5%db%8c/" id="button-ct-sitemap-hosting-linuxhosting" target="_blank"> سرورهای اختصاصی </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b5%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%d8%b2%d9%85%d8%a7%d9%86%db%8c/" id="button-ct-sitemap-hosting-windowshosting" target="_blank"> سرور مجازی لينوکس </a></li> <li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b5%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%d8%b2%d9%85%d8%a7%d9%86%db%8c/" id="button-ct-sitemap-hosting-windowshosting" target="_blank"> سرور مجازی ويندوز </a></li> </ul></li> <li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">طراحی سایت</h4><ul><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/" id="button-ct-sitemap-mail-instantmail" target="_blank"> سايت ساز صفحه نگار </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%81%d8%b1%d9%88%d8%b4%da%af%d8%a7%d9%87-%d8%a7%db%8c%d9%86%d8%aa%d8%b1%d9%86%d8%aa%db%8c/" id="button-ct-sitemap-mail-mailxchange" target="_blank"> فروشگاه ساز صفحه نگار </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%86%d9%85%d9%88%d9%86%d9%87-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa/" id="button-ct-sitemap-mail-msexchange" target="_blank"> نمونه کارها </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b1%d8%aa%d8%a8%d9%87-%d8%af%d8%b1-%da%af%d9%88%da%af%d9%84/" id="button-ct-sitemap-mail-smartphoneapps" target="_blank"> افزایش رتبه در گوگل </a></li> <li><a title="" class="core_button_normal" href="http://www.regiran.com/Safhe_Negar.zip" id="button-ct-sitemap-mail-smartphoneapps" target="_blank"> دريافت کاتالوگ قبل از خريد </a></li> </ul></li> <li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">هاست</h4><ul><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d9%84%db%8c%d9%86%d9%88%da%a9%d8%b3-%d9%87%d8%a7%d8%b3%d8%aa-%d9%84%db%8c%d9%86%d9%88%da%a9%d8%b3-%d8%b1%d8%ac%db%8c%d8%b1%d8%a7%d9%86-linux/" id="button-ct-sitemap-server-dedicated" target="_blank"> هاست لينوکس </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d9%88%db%8c%d9%86%d8%af%d9%88%d8%b2-%d9%87%d8%a7%d8%b3%d8%aa-%d9%88%db%8c%d9%86%d8%af%d9%88%d8%b2-%d8%b1%d8%ac%db%8c%d8%b1%d8%a7%d9%86-windows/" id="button-ct-sitemap-server-virtual" target="_blank"> هاست ويندوز 2008 </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b5%db%8c-%d9%85%db%8c%d8%b2%d8%a8%d8%a7%d9%86%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%d8%b2%d9%85%d8%a7%d9%86%db%8c/" id="button-ct-sitemap-server-dcs" target="_blank"> هاست اختصاصي </a></li><li><a title="" class="core_button_normal" href="http://members.regiran.com/knowledgebase.php?action=displaycat&catid=5" id="button-ct-sitemap-server-smartphoneapps" target="_blank"> سوالات متداول </a></li></ul></li> <li class="column"><h4 style="color: #244590; font-family: Tahoma; font-size: 18px; font-weight: normal; padding-bottom: 10px;">ثبت دامنه</h4><ul><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%ab%d8%a8%d8%aa-%d8%af%d8%a7%d9%85%d9%86%d9%87/" id="button-ct-sitemap-ecommerce-sharepoint" target="_blank"> تعرفه دامنه </a></li><li><a title="" class="core_button_normal" href="http://members.regiran.com/cart.php?a=add&domain=register" id="button-ct-sitemap-ecommerce-eshops" target="_blank"> سفارش آنلاین دامنه </a></li><li><a title="" class="core_button_normal" href="http://regiran.com/%d8%a7%d9%86%d8%aa%d8%ae%d8%a7%d8%a8-%d9%86%d8%a7%d9%85-%d8%af%d8%a7%d9%85%db%8c%d9%86-domain-%d8%af%d8%a7%d9%85%d9%86%d9%87/" id="button-ct-sitemap-ecommerce-listlocal" target="_blank"> نکاتی درباره انتخاب دامنه </a></li><li><a title="" class="core_button_normal" href="http://members.regiran.com/knowledgebase.php?action=displaycat&catid=3" id="button-ct-sitemap-ecommerce-sem" target="_blank"> سوالات متداول </a></li> <li><a title="" class="core_button_normal" href="http://members.regiran.com/domainchecker.php" id="button-ct-sitemap-ecommerce-sem" target="_blank"> جستجوگر دامنه </a></li> </ul></li></ul> </div> </div> </div> <div id="bottom-wrapper"> <div id="bottom"> <span class="totop"><a href="#">Back to Top</a></span> <span class="left"><p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:44px;height:16px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /> </a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:44px;height:16px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /> </a> </p> </span> <span class="right"><div align="center"><font size="1" face="tahoma" color="#fff"> رجيران ® علامت تجاري ثبت شده است و هرگونه کپي برداري و ايجاد تشابه پيگرد قانوني دارد. 1391-1380© </font></div> <div align="center"><font size="1" face="tahoma" color="#fff"> Copyright © 2001 - 2012 REGIRAN ® All rights reserved. Portal System Powered by <a href="http://regiran.com"><font size="1px" face="tahoma" color="#fff">Safhe Negar ® v2.1 </a> </font></div> </div></span> </div> </div> <script type='text/javascript' src='https://help.regiran.com/wp-includes/js/wp-embed.min.js?ver=4.7.29'></script> </body> </html>