ساختار صفحات وب و DOM

ناصر نادری | 1393/11/19


بنام خدا . برای اینکه بتونید با اجزای یک  صفحه وب کار کنید (که کار اصلی جاوا اسکریپ هست) , نیاز دارید که در ابتدا از مدل  اون اطلاع پیدا کنید چرا که این سلسله مراتب همیشه با شماست و شمارو توهیچ قسمتی از طراحی وب تنها نمیذاره!!

تحلیل کلی اجزای  مدل شی سند (document object model)

window : این آبجکت دربر دارنده تمام اجزایی هست که در یک فایل وب میشناسیم . اشاره اصلی این شی به پنجره مرورگری هست که دارید باهاش صفحه وب رو میبینید . یعنی شما برای دسترسی به تمام اجزا مثل document یا location از این شی عبور میکنید . self,frame,top,parent اشاره به نوع باز شدن پنجره دراه یعنی مثلا self یعنی در خود این پنجره باز بشه و یا frame یعنی داخل یک فریم لود شه و ...

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

location : مکان فعلی سند وب یعنی ادرس url صفحه ای که توش هستید رو در خودش داره و با استفاده از متدهای این شی میشه یک صفکه جدید لود کرد و ....

document : پر اهمیت ترین شی یک سند وب هست و اصلا هر چیزی که شما بصورت بصری میبینید و تمام اجزا بخش head یک صفحه در این شی قرار دارند . برای دسترسی به تک تک تگهای وب ازجمله فرمها و تصاویر و لینکها شما از این شی عبور میکنید . خود این شی دارای یک ساختار درختی از تگهای html هست ازجمله

- form : که شامل فرم وب ازجمله جعبه متن و رادیو باتن ها و تمام اجزایی که به کاربر امکان ورود داده رو میده میشه (در برنامه نویسی سمت سرور این بخس از صفحه وب پردازش میشه)

- link : ایده ساخته شدن صفحات وب یا hyper text markup langauge  رو با این لینکها پیاده سازی کردن اینها همون ابر متن هستن یعنی یک متنی که میتونه به متون دیگه اشاره کنه .

- anchor : یکی از راههای برقراری عمل link هست

برای اینکه با کار این object ها و المانها آشنا بشید به مثال زیر توجه کنید .

 function GoBack()
{
    window.history.back();//با اجرای این متد یک صفحه به عقب  برمیگردید
}
function GetUrl()
{
    return window.location.pathname();// مسیر جاری رو برمیگردونه
}
function GetHostMame()
{
    return window.location.hostname();// نام میزبان مسیر جاری رو  برمیگردونه
}

var url=GetUrl();
var host=GetHostMame();

window.document.write("url is : " + url + " and hostName is "+ host);//استفاده  از شی document که قبلا هم ازش استفاده کردید

نکته :  در تمامی بخشهایی که از window استفاده کردیم میتونید این شی رو حذف کنید چون بصورت پیش فرض شما در شی window قرار دارید

 window.document.write();
document.write();//هردوی این دستوارات برابرند  

تا جلسه بعد  در پناه خدا ...


فایلهای ضمیمه
توجه! هیچ فایل ضمیمه ای برای این مطلب یافت نشد

نظرات شما نظر جدید