آموزش جاوا اسکریپت – جلسه ۱۱

آموزش جاوا اسکریپت از مبتدی تا پیشرفته
جلسه ۱۱

سلام،با جلسه یازدهم از اموزش برنامه نویس جاوا اسکریپت در خدمت شما عزیزان هستم،در این جلسه میخواهیم آموزش گرفتن element ها توسط جاوا اسکریپت. document شی مهمی در جاوا اسکریپت است که یکسری توابع مهم داره یه تعداد مهمشو با هم کار میکنیم. مثل getElementById, getElementsByName, getElementsByClassName.

معمولا در زبان های برنامه نویسی مختلف، برخی خاصیت ها و متدها بیشتر از سایر موارد به کار می روند که می توان اصطلاح متدهای پرکاربرد را برای آنها به کار برد، در کدنویسی با جاوا اسکریپت، دو متد پرکاربرد getElementById و innerHTML جز برجسته ترین این موارد هستند، البته عبارت متد (Method) بیشتر در برنامه نویسی شی گرا کاربرد دارد و مواردی مانند innerHTML را خاصیت می نامند، با این وجود و به جهت اینکه این موضوع در جاوا اسکریپت چندان مصداق ندارد، به اختصار و در این آموزش به هر دو، متد خواهیم گفت، به هر صورت برای آشنایی بیشتر و جهت تکمیل دانستنی هایی که تا این لحظه آموخته ایم.

متد getElementById

از getElementById در جاوا اسکریپت برای تعیین یک مرجع (reference) به یک عنصر (element) با توجه به ID آن استفاده میکنیم، به زبان ساده تر یعنی انتخاب یک عنصر HTML (به فرض تگ div) با توجه به ID آن، به طور مثال اگر بخواهیم مقادیر value یک input را با توجه به ID آن استخراج کنیم، خواهیم نوشت:

<input id="test" type="text" value="1">
<script type="text/javascript">
var input = document.getElementById('test').value;
alert(input);
</script>

 

نکته ۱: همان طور که در مثال بالا مشخص است، متد getElementById خود وابسته به شی (object) دیگری به نام document است، لذا الزاما باید به همراه آن استفاده شود.

نکته ۲: متد getElementById نسبت به بزرگ یا کوچک بودن مقادیر ID حساس است، به طور مثال Id با id در این متد دو مقدار متفاوت هستند.

متد innerHTML

از innerHTML در جاوا اسکریپت برای دریافت یک مقدار از درون تگ های HTML یا اختصاص دادن یک مقدار به تگ ها و تغییر محتوای آنها استفاده می شود، به مثال زیر توجه کنید.

<script type="text/javascript">
function SetValue(id){
    var element = document.getElementById(id);
    //دریافت مقادیر از عنصر مورد نظر
    var value = element.innerHTML;
    alert(value);
}
</script>
<input type="button" onclick="SetValue('result');" value="کلیک کنید">
<div id="result">این یک تست است</div>

 

همان طور که اشاره شد، کاربرد innerHTML محدود به دریافت یک مقدار نیست و می توان برای اختصاص مقادیر به عناصر HTML از آن استفاده کرد، به مثال زیر توجه کنید.

<script type="text/javascript">
function SetValue(id, value){
    var element = document.getElementById(id);
    //اختصاص مقدار به عنصر مورد نظر
    element.innerHTML = value;
}
</script>
<input type="button" onclick="SetValue('result', 'این یک تست است');" value="کلیک کنید">
<div id="result"></div>

 

نکته ۱: همان طور که ملاحظه می کنید innerHTML وابسته به متد و آبجکت پیش از خود (document و getElementById) است.

نکته ۲: استفاده از متد innerHTML برای تغییر محتوای یک عنصر والد (parent) باعث حذف تگ های فرزند (child) آن نیز می شود، به فرض اگر درون تگ div از چند تگ تو در تو استفاده شده باشد، با به کار بردن innerHTML برای تگ والد، محتوای آن هر چه باشد (شامل تگ های div تو در تو) حذف و با مقادیر جدید جایگزین می شود.

نکته ۳: برای دریافت مقادیر از تگ input یا تغییر محتوای آن، باید از متد value به جای innerHTML استفاده شود.

خب تا اینجا با دوتا از متد ها پر کاربرد در جاوا اسکریپت اشنا شدید،در ادامه جلسات با بقیه متد ها اشنایی پیدا میکنید،موفق و سربلند باشید