Javascript

|

اموزش جاوا اسکرپت

در این مقاله قصد داریم در مورد مدل dom در زبان جاوا اسکریپت صحبت کنیم. Dom مخفف document object model هست مدلی که در واقع تک تک عناصر صفحه وب رو با اشیایی در زبان جاوا اسکریپت نگاشت میکنه. شما با استفاده از این مدل می توانید به هر یک عناصر و تگ های html موجود در صفحه وب دسترسی داشته باشید میتونید اون ها رو تغییر بدید حذف کنید.

مدل DOM :

مدل dom عناصر موجود در صفحه وب رو به صورت یک درخت نگاه میکنه در واقع ما اگه ریشه درخت رو تگ html بگیریم که همه ی تگ های دیگر رو درون خودش داره تگ های دیگه میشن فرزندان اون و این روند به صورت بازگشتی برای هر کدام از تگ های دیگه اعمال میشه.

در اینجا یک درخت میبینید که ریشش خود سند html هست و یک فرزند داره که تگ html هست تگ html ۲ فرزند داره که یکی head هست یکی هم body . که اگر شما کد های یک صفحه html رو درون ذهنتون داشته باشید میدونید که درون یک تگ html ۲ تا تگ وجود داره که یکی head هست و دیگری body .

javascript

در تگ هد مشخصاتی مربوط به هدر صفحه مثل عنوان صفحه ، تگ های متا ، لینک هایی که به استایل شیت ها و بدنه اصلی در تگ body هست.

مدل dom به این شکل به عناصر صفحات وب نگاه میکنه . جاوا اسکریپت با بهره گیری از این مدل قدرت بسیار ویژه ای میگیره به طوری که شما میتونید با جاوا اسکریپت و با استفاده از مدل dom تگ های مختلفی را به صفحه اضافه کنید و حتی میتونید به attribute ها ، استایل شیت ها و ... رو تغییر بدید با زبان جاوا اسکریپت.

در جاوا اسکریپت به صورت پایه ۳ روش پیشنهاد شده :

1. دسترسی به تگ ها با استفاده از id

2.با ساتفاده از نام تگ

3.با استفاده از نام کلا ان تگ

درسترسی با استفاده از id اون تگ در مقالات گذشته بیان کردیم برای یاد اوری :

Var x=document.getElementById( “intro”)

روش دیگه استفاده از نام تگ هست که به طور مثال ما اگر بخواهیم تمام تگ های p یا پاراگراف های درون یک تگ جاوا اسکریپت که id =main داره استفاده می کنیم .

Var x=document.getElementById( “main”);

Var y=x.getElementByTagName(“p”);

در اینجا ما تگی که id=main داره رو میگیریم و در متغییر x تعریف می کنیم بعد روی متغییر x متد getElementByTagName رو برای تگ p صدا میزنیم. به این صورت تمامی پاراگراف های موجود در تگ x ذخیره شده در یک ارایه درون متغییر y ذخیره میشه.

این ها را در مثال به صورت جامع تری توضیح خواهم داد.

روش سوم که استفاده از کلاس تگ هست معمولا در همه ی مرورگرها پشتیبانی نمیشه مخصوصا در اینترنت اکسپلورر ... بنابراین توصیه میشه که از همان ۲ روش اول در تگ های مختلف در زبان جاوا اسکریپت استفاده بکنیم.

مثال:

ما یک صفحه وب داریم که کد صفحه به این شکل هست:

<html>

<head>

<title> blog.dotineco.ir : java script

</title>

</head>

<body>

<div id=”main”>

<h1> the html Dom </h1>

<p id=”p1” > satre aval </p>

<p id=”p2” > satre dovom </p>

<p id=”p3” > satre sevom </p>

</div>

</body>

</html>

خب حال میخواهیم محتوای تگ تایتل صفحه که الان به صورت the html Dom هست را تغییر بدیم از چنین کدی استفاده میکنیم.

<script type=”text/javascript”>

Document.getElementById( ‘ title ‘ ) . innerHTML = ‘ new title from javascript’ ;

</script>

Document.getElementById تگ hq رو به ما میده که اسمش تایتل هست و اتریبیوت innerHTML محتوای درون تگ رو مشخص میکنه که الان ما مشخص کردیم innerHTML تگ رو تغییر بده به new title from javascript .

حال میخواهیم اون تگی که ایدیش p1 هست رنگش رو ابی کنیم:

<script type=”text/javascript”>

Document.getElementById( ‘ p1 ‘ ) . style.color = ‘blue’ ;

</script>

همان طور که میبینید با یک style میتونیم همه Css ها را به دلخواه خود تعویض کنیم.

حال میخواهیم بک گراند تگی به اسم p2 رو قرمز کنیم:

<script type=”text/javascript”>

Document.getElementById( ‘ p2 ‘ ) . style.backgroundColor = ‘ red ’ ;

</script>

دریافت آخرین مطالب وبلاگ در کانال داتینه

بهاره شهسواری

بهاره شهسواری ، کارشناس نرم افزار هستم .
از سال 91 مشغول به یادگیری زبان های css ,html , javascript و jquery شدم
و از سال 93 به صورت اختصاصی به فعالیت در حوزه css و html پرداختم. علاوه بر کد نویسی به گرافیک هم علاقه مند هستم.

نظرات
نظر بدهید