ترتیبی که روکسو برای مطالعه‌ی دروس سری جاوا اسکریپت پیشرفته
توصیه می‌کند:
29
تغییر محتوای HTML و CSS از طریق DOM و جاوا اسکریپت
21 فروردین 1398
درس 12 از سری جاوا اسکریپت پیشرفته
تغییر دادن محتوای HTML
ما با استفاده از زبان جاوا اسکریپت و DOM می توانیم محتوای HTML یک صفحه را تغییر دهیم. برای ایجاد کردن چیزی که در HTML وجود ندارد معمولا از دستور ()document.write استفاده می شود. این دستور مستقیما چیزی را که بخواهیم وارد سند HTML می کند. به طور مثال:
<!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html>
می بینید که تاریخ را مستقیما به صفحه ی خود اضافه کرده ایم.
هشدار: هیچ گاه پس از بارگذاری کامل صفحه از ()document.write استفاده نکنید! اگر صفحه بارگذاری شده باشد، ()document.write تمام صفحه را overwrite می کند؛ بدین معنی که تمام محتوای شما پاک شده و تنها محتوای جدیدی که به ()document.write داده اید نمایش داده می شود!
با اینکه این دستور قدرتمند است اما کمتر از آن استفاده می شود چرا که برخی از اوقات مشکلاتی را به وجود می آورد. اکثر اوقات قصد ما این است که محتوای فعلی و موجود را تغییر دهیم. آسان ترین راه برای این کار استفاده از innerHTML است.
برای تغییر محتوای عناصر HTML توسط innerHTML باید از ساختار زیر پیروی کنید:
document.getElementById(id).innerHTML = new HTML
در مثال زیر می خواهیم عنصر <p> را تغییر دهیم:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript can Change HTML</h2>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
<p>متن اصلی این پاراگراف توسط کد های جاوا اسکریپت تغییر داده شده است</p>
</body>
</html>
اگر به کدهای مثال بالا دقت کنید متوجه می شوید که محتوای پاراگراف در ابتدا Hello World بوده است اما دیگر چنین چیزی برای ما نمایش داده نمی شود. دلیل آن استفاده از کد جاوا اسکریپت برای تغییر این محتوا است. طبق چیزی که در قسمت قبل یاد گرفتیم از "id="p1 استفاده کردیم تا عنصر را در DOM دریافت کنیم. سپس با استفاده از innerHTML محتوای آن را تغییر دادیم.
نکته: بسیاری از اوقات هنگام کار با DOM (مانند مثال بالا)، سورس کد HTML تغییر نمی کند و تغییر در خروجی قابل مشاهده است بنابراین اگر با چنین مواردی برخورد کردید تصور نکنید که برنامه تان دچار مشکل شده است.
اگر بخواهید مقدار یک attribute را تغییر دهید چطور؟ برای این کار نیز ساختار ساده ای وجود دارد:
document.getElementById(id).attribute = new value
به طور مثال در کد زیر می خواهیم src را برای <img> تغییر دهیم:
<!DOCTYPE html>
<html>
<body>
<img id="image" src="https://www.roxo.ir/blog-panel/wp-content/uploads/2019/03/instagram-logo.jpg" width="160" height="120">
<script>
document.getElementById("image").src = "https://www.roxo.ir/blog-panel/wp-content/uploads/2019/03/best-code-editors.jpg";
</script>
<p>تصویر اصلی که در سورس کد می بینید لوگوی اینستاگرام بوده است اما در تصویر جدید بنر یکی از آموزش های روکسو قرار داده شده است</p>
</body>
</html>
ابتدا myImage که id عنصر ما بوده است را از طریق دستور getElementById گرفته ایم. سپس مقدار attribute ای که src نام دارد را به تصویر دیگری تغییر داده ایم.
تغییر دادن محتوای CSS
وقتی می گوییم تغییر محتوای CSS توسط جاوا اسکریپت منظورمان یک نوع CSS است:
- CSS ای که به صورت inline نوشته شده باشد.
بنابراین جاوا اسکریپت می تواند کدهای CSS ای را تغییر دهد که درون سند HTML باشند.
سوال: اگر کد های CSS ما به صورت external یا internal باشند، نمی توانیم آن ها را تغییر دهیم؟
پاسخ: درست است! شما نمی توانید با جاوا اسکریپت به فایل CSS خارجی که روی سرور تان است دسترسی داشته باشد. همچنین نمی توانید قسمت style در سورس کد HTML (به صورت internal) را تغییر دهید. اما اگر با استفاده از جاوا اسکریپت، کد CSS ای را به صورت inline بنویسید، کدهای آن قسمت در فایل خارجی و ... بی تاثیر می شوند. اگر یادتان باشد در مورد آبشاری بودن و اولویت داشتن کدهای CSS صحبت کرده بودیم و گفته بودیم که کدهای CSS ای که inline باشند اولویت بالاتری دارند.
برای ایجاد استایل های جدید می توانیم از این ساختار استفاده کنیم:
document.getElementById(id).style.property = new style
به طور مثال در کد زیر می خواهیم عنصر <p> را استایل دهی کنیم:
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
همچنین اگر یادتان باشد در دوره ی جاوا اسکریپت و قسمت های قبل به صورت خلاصه اشاره کردیم که جاوا اسکریپت می تواند رویداد یا event تعریف کند. event ها رویداد هایی هستند که هنگام اتفاق خاصی اجرا می شوند. به طور مثال در قسمت خاصی از صفحه کلیک شود، صفحه بارگذاری شود، فایلی تغییر کند، موس کاربر روی فلان عنصر برود و ... . تمام این موارد یک رویداد هستند. حالا ما می توانیم از رویداد ها را در زمینه ی CSS نیز استفاده کنیم:
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>
در کد بالا عنصری با آیدی id1 را دریافت کردیم (دستور getElementById) و سپس گفتیم که اگر کاربر روی فلان دکمه کلیک کند (onclick) رنگ متن ما در h1 را تغییر بده! شما می توانید به خروجی کد بالا بروید و با کلیک کردن روی این دکمه، این تغییر را مشاهده کنید.
یک مثال پیشرفته تر، ظاهر کردن و غیب کردن یک متن است:
<!DOCTYPE html>
<html>
<body>
<p id="p1">
This is a text.
This is a text.
This is a text.
This is a text.
</p>
<input type="button" value="متن را مخفی کن" onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="متن را نمایش بده" onclick="document.getElementById('p1').style.visibility='visible'">
</body>
</html>
میبینید که کار با DOM بسیار آسان است و با کمی تمرین می توانید بر آن مسلط شوید. امیدوارم از این قسمت لذت برده باشید
ترتیبی که روکسو برای مطالعه‌ی دروس سری جاوا اسکریپت پیشرفته
توصیه می‌کند:
دوره‌های آموزشی مرتبط
مقالات مرتبط
22 اردیبهشت 1401
16 اردیبهشت 1401
21 اسفند 1400
17 اسفند 1400
16 اسفند 1400
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.