مثال های مربوط به 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 - ادغام کردن سلول های یک ردیف
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 31636
دیدگاهها
سلام چطوری میشه آیتم انتخاب شده رو توی دراپ داون با استفاده از متد get تعریف کرد
مثلا ما یه منو کشوی داریم حاوی مشاغل مورد نیاز وقتی متد گت شغل بازاریاب رو میاره چطوره میشه اون رو شغل بازاریاب رو تو منوی کشویی فعال کرد ؟ حتما میخوام منوی کشویی باشه که کاربر بتونه دوباره تغییر بده شغل مورد نظرش رو
با تشکر
با سلام.
اگه منظورتون این هست که در لیست کشویی قصد دارید آیتم خاصی رو انتخاب کنید، باید به این نحو عمل کنید که شغلها رو به نحوی (مثلا آرایه) ذخیره کنید و توسط حلقهی for یا foreach تک تک مشاغل رو پیمایش کنید. بعد به شغل موردنظر که رسیدید به دراپداون خاصیت selected بدید.
سلام من الان css , html , java script رو تفریبا یاد گرفتم میتونم بگم که یک طراح سایت هستم یا نیازمند چیزی دیگه رو یاد بگیرم یا در حالت کلی به چه کسی میشه گفت طراحی سایت بلده؟؟
با سلام.
قانون مشخصی برای سطح بندی نیست.
اگر شما قادر به اجرا و فهم کدهای مذکور هستید، میشه گفت طراح سایت هستید و اگر نه که هیچ!!!
شما باید دقت کنید که در بازار علاوه بر علم، تجربه هم نیاز هست. خیلی وقتها تجربه هست که مشکل شما رو رفع میکنه و نه لزوما علم اون چیز.
در مورد یادگیری که شما همیشه باید در حال یادگیری باشید، بالخصوص دنیای وب که همیشه در حال پیشرفت هست.
سلام و خسته نباشی با جاوا اسکریپت این امکان وجود دارد که مثلا تعداد سطر و ستون جدول وارد کنیم بعد جدول ایجاد شود
سلام
بله. کد مورد نظرتون رو در آدرس زیر ایجاد کردیم:
codepen.io/sbaloot/pen/dojYje
مثال:
قبل از اینکه پنجره مرورگر بسته شود ...
کار نکرد
رویداد onUnload ممکن است بخاطر تنظیمات مختلف مرورگرها آنطور که انتظار دارید اجرا نشود ...!
برای اطمینان بیشتر، از کد زیر استفاده کنید:
<script type="text/java script">
function goodByeFromOnBe foreUnload() {
return "Hey, this window is getting closed !!!!";
}
function goodByeFromOnUn load() {
window.open('newpage.html', '_blank');
}
window.onbeforeunload = goodByeFromOnBeforeUnload;
window.onunload = goodByeFromOnUn load;
</script>