تغییر محتوای HTML و CSS از طریق DOM و جاوا اسکریپت

3
528
تغییر محتوای HTML و CSS از طریق DOM و Javascript

تغییر دادن محتوای HTML

ما با استفاده از زبان جاوا اسکریپت و DOM می توانیم محتوای HTML یک صفحه را تغییر دهیم. برای ایجاد کردن چیزی که در HTML وجود ندارد معمولا از دستور ()document.write استفاده می شود. این دستور مستقیما چیزی را که بخواهیم وارد سند HTML می کند. به طور مثال:

مشاهده ی خروجی در JSBin

می بینید که تاریخ را مستقیما به صفحه ی خود اضافه کرده ایم.

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

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

برای تغییر محتوای عناصر HTML توسط innerHTML باید از ساختار زیر پیروی کنید:

در مثال زیر می خواهیم عنصر <p> را تغییر دهیم:

مشاهده ی خروجی در JSBin

اگر به کدهای مثال بالا دقت کنید متوجه می شوید که محتوای پاراگراف در ابتدا Hello World بوده است اما دیگر چنین چیزی برای ما نمایش داده نمی شود. دلیل آن استفاده از کد جاوا اسکریپت برای تغییر این محتوا است. طبق چیزی که در قسمت قبل یاد گرفتیم از "id="p1 استفاده کردیم تا عنصر را در DOM دریافت کنیم. سپس با استفاده از innerHTML محتوای آن را تغییر دادیم.

نکته: بسیاری از اوقات هنگام کار با DOM (مانند مثال بالا)، سورس کد HTML تغییر نمی کند و تغییر در خروجی قابل مشاهده است بنابراین اگر با چنین مواردی برخورد کردید تصور نکنید که برنامه تان دچار مشکل شده است.

اگر بخواهید مقدار یک attribute را تغییر دهید چطور؟ برای این کار نیز ساختار ساده ای وجود دارد:

به طور مثال در کد زیر می خواهیم src را برای <img> تغییر دهیم:

مشاهده ی خروجی در JSBin

ابتدا myImage که id عنصر ما بوده است را از طریق دستور getElementById گرفته ایم. سپس مقدار attribute ای که src نام دارد را به تصویر دیگری تغییر داده ایم.

تغییر دادن محتوای CSS

وقتی می گوییم تغییر محتوای CSS توسط جاوا اسکریپت منظورمان یک نوع CSS است:

  • CSS ای که به صورت inline نوشته شده باشد.

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

سوال: اگر کد های CSS ما به صورت external یا internal باشند، نمی توانیم آن ها را تغییر دهیم؟

پاسخ: درست است! شما نمی توانید با جاوا اسکریپت به فایل CSS خارجی که روی سرور تان است دسترسی داشته باشد. همچنین نمی توانید قسمت style در سورس کد HTML (به صورت internal) را تغییر دهید. اما اگر با استفاده از جاوا اسکریپت، کد CSS ای را به صورت inline بنویسید، کدهای آن قسمت در فایل خارجی و … بی تاثیر می شوند. اگر یادتان باشد در مورد آبشاری بودن و اولویت داشتن کدهای CSS صحبت کرده بودیم و گفته بودیم که کدهای CSS ای که inline باشند اولویت بالاتری دارند.

برای ایجاد استایل های جدید می توانیم از این ساختار استفاده کنیم:

به طور مثال در کد زیر می خواهیم عنصر <p> را استایل دهی کنیم:

مشاهده ی خروجی در JSBin

همچنین اگر یادتان باشد در دوره ی جاوا اسکریپت و قسمت های قبل به صورت خلاصه اشاره کردیم که جاوا اسکریپت می تواند رویداد یا event تعریف کند. event ها رویداد هایی هستند که هنگام اتفاق خاصی اجرا می شوند. به طور مثال در قسمت خاصی از صفحه کلیک شود، صفحه بارگذاری شود، فایلی تغییر کند، موس کاربر روی فلان عنصر برود و … . تمام این موارد یک رویداد هستند. حالا ما می توانیم از رویداد ها را در زمینه ی CSS نیز استفاده کنیم:

مشاهده ی خروجی در JSBin

در کد بالا عنصری با آیدی id1 را دریافت کردیم (دستور getElementById) و سپس گفتیم که اگر کاربر روی فلان دکمه کلیک کند (onclick) رنگ متن ما در h1 را تغییر بده! شما می توانید به خروجی کد بالا بروید و با کلیک کردن روی این دکمه، این تغییر را مشاهده کنید.

یک مثال پیشرفته تر، ظاهر کردن و غیب کردن یک متن است:

مشاهده ی خروجی در JSBin

میبینید که کار با DOM بسیار آسان است و با کمی تمرین می توانید بر آن مسلط شوید. امیدوارم از این قسمت لذت برده باشید

ترتیبی که روکسو برای یادگیری مطالب سری جاوا اسکریپت پیشرفته به شما توصیه می‌کند:

3 دیدگاه

  1. توش آموزش گفتین که نمیشه css external با جاوااسکریپت تغییر داده پس چطوری با jquery میگیم وقتی اتفاق خاصی مثلا hover افتاد رنگ المنت عنصر عوض بشه یا مثلا سایزش تغییر کنه و …..؟
    در حالی که قبلش با css رنگ یا سایزش مشخص کردیم

    • سلام دوست عزیز

      وقتی با jquery یا جاوااسکریپت خالی استایل یک عنصر رو دستکاری میکنیم، اون استایل ها به صورت inline اضافه میشن (توی خود HTML) و استایل های inline همیشه اولویت دارن نسبت به بقیه ی استایل ها بنابراین استایل های قبلی تغییر نمیکنن فقط override میشن؛ یعنی باطل میشن و استایل های جدید جای اون ها رو میگیرن. برای همین بهتره موقع کار با استایل ها، به جای تغییر مستقیم استایل، کلاس ها رو تغییر بدیم (به شکلی که داخل کلاس های مختلف استایل های مختلف داشته باشیم و این استایل ها با تغییر کلاس روی عنصر اعمال بشن).

ارسال دیدگاه

لطفا دیدگاه خود را وارد کنید!
نام خود را وارد کنید