آموزش ویژگی documentElement در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی documentElement در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی documentElement در DOM جاوااسکریپت
با استفاده از ویژگی documentElement میتونیم تگ html رو از صفحه بگیریم ، تگ html هم که میدونید شامل تمامی بخش های یک صفحه وب می باشد. ( یعنی از تگ باز <html> تا تگ بسته <html/> )
تفاوت این ویژگی با ویژگی document.body در اینه که ، document.body فقط محتوای موجود در تگ Body رو برمیگردونه ولی documentElement میتونه محتوای کل یک صفحه وب رو برگردونه.
| مقدار برگشتی | کل یک صفحه وب رو بصورت شئ برمیگرداند |
|---|---|
| نسخه DOM | Core Level 1 Document Object |
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : با کلیک بروی یک دکمه، کل محتوای موجود در صفحه در یک باکس پیغام نمایش داده میشود.
|
1 2 3 4 5 6 7 8 9 |
<script> function get_content(){ var a; a = document.documentElement.innerHTML; alert(a); } </script> |
مثال شماره ۲ : قرار دادن محتوا ( تگ و.. ) جدید در صفحه
|
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 |
<script> function set_content(){ var a; a = document.documentElement; a.innerHTML = "<html>"+ "<head>"+ "<style>"+ "body{"+ "background-color:lightgreen;"+ "color:#fff;"+ "}"+ "h2{"+ "text-align:center;"+ "}"+ "</style>"+ "</head>"+ "<body>"+ "<h2>سایت آموزشی فری لرن</h2>"+ "</body>"+ "</html>"; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| documentElement | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
برای گرفتن تگ html :
|
1 |
document.documentElement |
برای گرفتن محتوای کل صفحه :
|
1 |
document.documentElement.innerHTML; |
برای ریختن محتوای جدید در صفحه :
|
1 |
document.documentElement.innerHTML = " محتوا در اینجا "; |
Free-Learn
نکات و توضیحات
- این ویژگی یک ویژگی فقط خواندنی یا Read-Only می باشد.
- این ویژگی بطور کلی تگ html رو برگشت میده و تگ html هم همونطور که میدونید جَد تمامی عناصر موجود در صفحه می باشد. پس اگه شما محتوای تگ html رو بدست آورید یعنی عملا تمامی محتوای موجود در یک صفحه وب رو بدست آوردید. ( همانند مثال شماره ۱ )
