این آموزش در تاریخ ۱۴۰۱/۰۴/۲۵ آپدیت شده است.
آموزش ویژگی documentElement در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی documentElement در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی documentElement در DOM جاوااسکریپت
با استفاده از ویژگی documentElement میتونیم تگ html رو از صفحه بگیریم ، تگ html هم که میدونید دیگه، میشه ستون اصلی یک صفحه وب، یعنی از تگ باز <html> تا تگ بسته <html/>
تفاوت این ویژگی با ویژگی document.body در اینه که ، document.body تگ Body رو از صفحه میگیره ولی documentElement میتونه تگ html رو بگیره.
| مقدار برگشتی | برگشت تگ html |
|---|---|
| نسخه DOM | DOM Level 1 |
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : در مثال زیر میخوایم تگ html رو بگیریم و محتوای داخلشو بریزیم داخل تگ TextArea و در خروجی نمایشش بدیم.
|
1 2 3 4 5 6 |
<script> var Result = document.getElementById("Result"); Result.innerHTML = document.documentElement.innerHTML; </script> |
مثال شماره ۲ : ایجاد یک صفحه جدید ( یعنی از تگ html باز تا html بسته یه صفحه html طراحی کردیم )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script> function Set_HTML(){ var My_HTML_Tag = document.documentElement; My_HTML_Tag.innerHTML = "<html>"+ "<head>"+ "<style>"+ "body{"+ "background-color:black;"+ "color:#fff;"+ "}"+ "h2{"+ "text-align:center;"+ "}"+ "</style>"+ "</head>"+ "<body>"+ "<h2>سایت آموزشی فری لرن</h2>"+ "<h2>سایت آموزشی فری لرن</h2>"+ "<h2>سایت آموزشی فری لرن</h2>"+ "</body>"+ "</html>"; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| documentElement | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
- برای گرفتن محتوای داخل تگ html :
|
1 |
document.documentElement.innerHTML; |
- برای ریختن محتوای جدید در تگ html :
|
1 |
document.documentElement.innerHTML = " محتوا در اینجا "; |
Free-Learn
نکات و توضیحات
- این ویژگی یک ویژگی فقط خواندنی یا Read-Only می باشد.
- این ویژگی بطور کلی تگ html رو برگشت میده و تگ html هم همونطور که میدونید میشه جَد تمامی تگ های موجود در صفحه می باشد.
- برای بدست آوردن تگ body میتونید از ویژگی document.body استفاده نمایید.
