خانه آموزش زبان جاوااسکریپت آموزش DOM در جاوااسکریپت ویژگی documentElement در DOM جاوااسکریپت

ویژگی documentElement در DOM جاوااسکریپت

توسط

۱۳۹۹-۱۱-۲۵

آموزش ویژگی documentElement در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی documentElement در DOM جاوااسکریپت با من همراه باشید.

ویژگی documentElement در DOM جاوااسکریپت

Free-Learn

آنچه در این جلسه میخوانید :

1 ویژگی documentElement در DOM جاوااسکریپت
2 مثال از این ویژگی
3 پشتیبانی مرورگرها
4 شکل نوشتاری
5 نکات و توضیحات

ویژگی documentElement در DOM جاوااسکریپت

با استفاده از ویژگی documentElement میتونیم تگ html رو از صفحه بگیریم ، تگ html هم که میدونید شامل تمامی بخش های یک صفحه وب می باشد. ( یعنی از تگ باز <html> تا تگ بسته <html/> )

تفاوت این ویژگی با ویژگی document.body در اینه که ، document.body فقط محتوای موجود در تگ Body رو برمیگردونه ولی documentElement میتونه محتوای کل یک صفحه وب رو برگردونه.

مقدار برگشتی	کل یک صفحه وب رو بصورت شئ برمیگرداند
نسخه DOM	Core Level 1 Document Object

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.

مثال شماره ۱ : با کلیک بروی یک دکمه، کل محتوای موجود در صفحه در یک باکس پیغام نمایش داده میشود.

<script>

function get_content(){
 var a;
 a = document.documentElement.innerHTML;
 alert(a);
}

</script>

function get_content(){

var a;

a = document.documentElement.innerHTML;

alert(a);

}

</script>

امتحان کنید

مثال شماره ۲ : قرار دادن محتوا ( تگ و.. ) جدید در صفحه

<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>

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 :

document.documentElement

1	document.documentElement

برای گرفتن محتوای کل صفحه :

document.documentElement.innerHTML;

1	document.documentElement.innerHTML;

برای ریختن محتوای جدید در صفحه :

document.documentElement.innerHTML = " محتوا در اینجا ";

1	document.documentElement.innerHTML = " محتوا در اینجا ";

Free-Learn

نکات و توضیحات

این ویژگی یک ویژگی فقط خواندنی یا Read-Only می باشد.
این ویژگی بطور کلی تگ html رو برگشت میده و تگ html هم همونطور که میدونید جَد تمامی عناصر موجود در صفحه می باشد. پس اگه شما محتوای تگ html رو بدست آورید یعنی عملا تمامی محتوای موجود در یک صفحه وب رو بدست آوردید. ( همانند مثال شماره ۱ )

Free-Learn

دریافت PDF یا پرینت این مطلب