آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش تغییر محتوای عناصر HTML DOM

دوره های مرتبط با این مقاله

تغییر محتوای عناصر HTML- HTML DOM

مدل شی گرای سند HTML به جاوا اسکریپت این امکان را می دهد که محتویات المان ها را تغییر دهد.

تغییر stream(جریان) خروجی HTML

جاوا اسکریپت این قابلیت را دارد که محتوای پویا dynamic) HTML) ایجاد کند:

                        Date: Sun Jul 26 2015 12:37:06 GMT+0430 (Iran Daylight Time)

در جاوا اسکریپت می توان بطور مستقیم، خروجی HTML چاپ کرد. این کار با استفاده از متد ()document.write امکان پذیر می باشد:

نمونه یک

document.write(Date());
امتحان کنید
توجه:

هیچگاه پس از اتمام بارگذاری صفحه (document)، از متد ()document.write استفاده نکنید. این کار باعث می شود روی صفحه ی مورد نظر، بازنویسی (overwrite) صورت گیرد.

تغییر محتوای عناصر HTML

ساده ترین روش برای اصلاح محتویات یک عنصر HTML، استفاده از خاصیت (property) innerHTML می باشد.
جهت مدیریت و اصلاح محتویات تگ HTML، کافی است از ساختار نگارشی (syntax) زیر استفاده کنید:

                        document.getElementById(id).innerHTML = new HTML

مثال زیر محتوای المان

را تغییر می دهد:

نمونه دو

        document.getElementById("p1").innerHTML = "New text!";
    
    

The paragraph above was changed by a

امتحان کنید

این مثال محتویات (content) المان <h1> را اصلاح می کند:

نمونه سه

        var element = document.getElementById("header");
        element.innerHTML = "New Header";
امتحان کنید
تشریح مثال:

سند HTML مثال بالا، دربردانده ی یک المان <h1> است که شناسه ی آن "header"می باشد.
با استفاده از HTML DOM المانی که شناسه ی آن "header" می باشد را بازیابی کردیم.
کد جاوا اسکریپت محتویات عنصر مزبور را تغییر می دهد.

تغییر مقدار یک خصیصه (attribute value)

به منظور اصلاح مقدار یک خصیصه ی HTML، باید از ساختار نگارشی (syntax) زیر بهره جست:

                        document.getElementById(id).attribute=new value

این مثال مقدار خصیصه ی src المان <img> را تغییر می دهد:

نمونه چهار

        document.getElementById("image").src = "index.jpg";
امتحان کنید
شرح مثال:

سند HTML مثال فوق دارای یک المان <img> با شناسه "myImage"است.
با بهره گیری از مدل شی گرای سند HTML ( (HTML DOM عنصری که شناسه ی آن "myImage"می باشد را بازیابی می کنیم.
کد جاوا اسکریپت خصیصه ی src المان مذکور را از "smiley.gif" به "landscape.jpg" تغییر می دهد.


مشاهده فیلم آموزشی

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده بوده و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

  • 2396
  •    1792
  • تاریخ ارسال :   1394/08/13

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .