این آموزش در تاریخ ۱۴۰۱/۰۴/۲۲ آپدیت شده است.
آموزش ویژگی body در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی body در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی body در DOM جاوااسکریپت
با استفاده از ویژگی body در جاوا اسکریپت میتونیم هم محتوای موجود در تگ Body ( بدنه اصلی یک صفحه وب ) رو بگیریم و هم محتوای جدید داخلش قرار بدیم.
| مقدار برگشتی | محتوای موجود در تگ Body |
|---|---|
| نسخه DOM | DOM Level 1 |
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : گرفتن محتوا / مقدار موجود در تگ body و نمایشش در خروجی
|
1 2 3 4 |
<script> var Result = document.getElementById("Result"); Result.innerHTML = document.body.innerHTML; </script> |
مثال شماره ۲ : ریختن محتوای جدید درون تگ body
|
1 2 3 4 5 6 7 |
<script> function Show(){ document.body.innerHTML = "<h2>سایت آموزشی فری لرن</h2>"; } </script> |
مثال شماره ۳ : وقتی بروی دکمه کلیک شد، رنگ زمینه و رنگ متن صفحه تغییر پیدا میکنه
|
1 2 3 4 5 6 7 8 |
<script> function Change(){ document.body.style.backgroundColor = "#282C34"; document.body.style.color = "#fff"; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| body | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
|
1 |
document.body |
Free-Learn
نکات و توضیحات
- وقتی بخوایم محتوای جدید در body قرار بدیم، این محتوای جدید بروی تمامی محتوا موجود در صفحه میشیند و عملا محتوای قبلی پاک میشود. ( همانند مثال شماره ۲ )
- برای انتخاب تگ html از صفحه باید از ویژگی documentElement استفاده کرد.
