مثال های مربوط به DOM

در مثال های زیر، JavaScriptبا استفاده از مدل DOM، می تواند به تمام عناصر صفحه HTML دسترسی داشته باشد.

شیء Document

()document.write - نوشتن یک متن در خروجی
()document.write - نوشتن تگ های HTML در خروجی
length - برگرداندن تعداد لینک های داخل صفحه
innerHTML - برگرداندن متن اولین لینک استفاده شده در صفحه
length - برگرداندن تعداد فرم های استفاده شده در یک صفحه
name - برگرداندن مقدار خصوصیت name فرم
length - برگرداندن تعداد عکس های استفاده شده در صفحه
id - برگرداندن id اولین عکس در صفحه
length - برگرداندن تعداد لینک های یک صفحه
id - برگرداندن id اولین لینک در صفحه
document.cookie - برگرداندن نام و مقدار کل Cookieی ها
domain - برگرداندن نام دامنه
lastModified - برگردان زمان آخرین باری که صفحه اصلاح شده
referrer - برگرداندن URL صفحه
title - برگرداندن عنوان صفحه
URL - برگرداندن کل URL صفحه
open - باز کردن یک صفحه جدید در فریم جاری و نوشتن متن داخل آن
open - باز کردن یک صفحه در پنجره جدید و نوشتن متن داخل آن
تفاوت بین write و writeln
innerHTML - نمایش محتوای یک عنصر با id مشخص
length - نمایش تعداد عناصری که name یکسانی دارند
length - نمایش تعداد یک tag خاص در صفحه

شیء Anchor (لینک)

charset - برگرداندن و یا تنظیم خصوصیت charset در یک لینک
href - برگرداندن مقدر خصوصیت href یک لینک
hreflang - برگرداندن و تنظیم خصوصیت hreflang
name - برگردان مقدار خصوصیت name یک لینک
rel - برگرداندن مقدار خصوصیت rel لینک
target - تغییر مقدار خصوصیت target لینک
type - برگرداندن مقدار خصوصیت type لینک

شیء Button

disabled - غیرفعال کردن یک دکمه
name - برگرداندن خصوصیت name یک دکمه
type - برگرداندن خصوصیت type یک دکمه
value - برگرداندن متن نمایش داده شده روی یک دکمه
id - برگرداندن id فرمی که شامل یک دکمه است

شیء Form

value - برگرداندن مقادیر تنظیم شده عناصر داخل یک فرم
acceptCharset - برگرداندن مقدار خصوصیت accept-charset در یک فرم
action - برگرداندن مقدار خصوصیت action در یک فرم
enctype - برگرداندن مقدار خصوصیت enctype در یک فرم
length - برگرداندن تعداد عناصر داخل یک فرم
method - برگرداندن متد تنظیم شده در فرم برای ارسال اطلاعات به سرور
name - برگرداندن نام فرم
target - برگرداندن مقدار خصوصیت target در یک فرم
reset - خالی کردن و یا به حالت اول برگرداندن عناصر داخل فرم
submit - استفاده از یک دکمه معمولی برای ارسال فرم به سرور

شیء Frame/IFrame

align - ترازبندی یک iframe
backgroundColor - تغییر رنگ پس زمینه یک iframe
frameBorder - برگردان مقدار تنظیم شده برای خصوصیت frameborder
frameBorder - حذف لبه های یک iframe
height/width - تغییر عرض و ارتفاع یک iframe
longDesc - برگردان مقدار خصوصیت longdesc در یک iframe
marginHeight - برگردان مقدار خصوصیت marginheight در یک iframe
marginWidth - برگردان مقدار خصوصیت marginwidth در یک iframe
name - برگردان نام یک iframe
scrolling - برگردان و یا تنظیم خصوصیت scrolling در یک iframe
src - تغییر آدرس یک iframe

شیء Image

align - ترازبندی عکس...
alt - برگرداندن متن جایگزین یک عکس
border - اضافه کردن لبه به عکس
height/width - تغییر عرض و ارتفاع یک عکس
hspace/vspace - تنظیم فاصله افقی و عمودی عکس از عناصر مجاور
longDesc - برگرداندن مقدار خصوصیت longdesc یک عکس
lowsrc - ایجاد یک لینک برای نمایش یک عکس در حالت با کیفیت پایین تر
name - برگرداندن نام یک عکس
src - تغییر آدرس یک عکس
useMap - برگرداندن مقدار تنظیم شده برای خصوصیت usemap در یک عکس

شیء Event

onblur - زمانی که کاربر TextBox را ترک می کند، کاراکترهای داخل آن به حروف بزرگ تبدیل می شود
onchange - زمانی که محتوای TextBox تغییر داده شود...
onclick - زمانی که کاربر روی دکمه کلیک کند...
ondblclick - زمانی که کاربر روی متن دابل کلیک کند...
onerror - اگر زمان بارگذاری عکس، خطایی رخ دهد...
onfocus - زمانی که مکان نما روی TextBox قرار می گیرد...
onkeydown - قبل از رها کردن دکمه ی کیبورد...
onkeypress - قبل از رها کردن دکمه ی کیبورد...
onkeyup - بعد از رها کردن دکمه ی کیبورد...
onload - بلافاصله بعد از اینکه صفحه بارگذاری شد...
onload - بلافاصله بعد از اینکه عکس بارگذاری شد...
onmousedown + onmouseup - قبل از رها کردن کلیک موس/بعد از رها کردن کلیک موس...
onmousedown - قبل از رها کردن یکی از دکمه های موس، متوجه شوید کدام یک از دکمه های موس را کلیک کرده اید...
onmousedown - قبل از رها کردن کلیک موس، متوجه شوید که روی کدام عنصر کلیک کرده اید...
onmousemove + onmouseout - با حرکت موس، مختصات X و Y ظاهر می شود...
onmouseover + onmouseout - با قرار گرفتن و خروج موس از روی تصویر...
onresize - با تغییر اندازه پنجره مرورگر...
onselect - بعد از انتخاب متن داخل TextBox، پیغامی ظاهر می شود...
onunload - قبل از اینکه پنجره مرورگر بسته شود...
onkeyup - بعد از رها کردن یکی از کلیدهای کیبورد، شماره آن کلید، نمایش داده می شود....
onmousedown - بعد از فشردن کلیک موس، مختصات اشاره گر نسبت به Frame، نمایش داده می شود...
onmousedown - بعد از فشردن کلیک موس، مختصات اشاره گر نسبت به صفحه مونیتور نمایش داده می شود...
onmousedown - اگر همزمان با فشردن کلیک موس، دکمه Shift نیز فشرده شده باشد...
onmousedown - با فشردن کلیک موس، نوع رویداد که همان onmousedown است نمایش داده می شود...

شیء Option و Select

disabled - فعال و غیرفعال کردن Dropdown List
id - برگرداندن شناسه (ID) فرمی که شامل یک Dropdown List است
length - برگرداندن تعداد گزینه های یک Dropdown List
size - تبدیل Dropdown List به MultiLine List
multiple - فعال و غیر فعال کردن حالت چند انتخابه در MultiLine List
options - نمایش همه ی گزینه های یک Dropdown List در یک پنجره Alert
selectedIndex - نمایش شماره (Index) گزینه انتخاب شده در یک Dropdown List
text - تغییر متن گزینه انتخاب شده در یک Dropdown List
remove - حذف گزینه انتخاب شده در یک Dropdown List

شیء Table

border - تغییر ضخامت لبه های بیرونی یک جدول
cellSpacing - تنظیم فاصله محتوای سلول ها از لبه - cellPadding و فاصله سلول ها با یکدیگر
frame - تنظیم اینکه کدام یک از لبه های بیرونی جدول نمایش داده شود
rules - تنظیم اینکه کدام یک از لبه های داخلی جدول نمایش داده شود
innerHTML - نمایش محتوای ردیف اول یک جدول در یک پنجره
innerHTML - نمایش محتوای یک سلول از جدول
()createCaption - ایجاد - Caption برای یک جدول
()deleteRow - حذف یک ردیف از جدول
()insertRow - اضافه کردن ردیف به یک جدول
()insertCell - اضافه کردن سلول به یک ردیف از جدول
align - میزان کردن محتوای سلول های یک ردیف بصورت افقی
vAlign - میزان کردن محتوای سلول های یک ردیف بصورت عمودی
align - میزان کردن محتوای یک سلول مشخص به صورت افقی
vAlign - میزان کردن محتوای یک سلول مشخص به صورت عمودی
innerHTML - تغییر محتوای یک سلول
colSpan - ادغام کردن سلول های یک ردیف