این آموزش در تاریخ ۱۴۰۱/۰۶/۰۸ آپدیت شده است.
آموزش ویژگی outerHTML در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی outerHTML در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی outerHTML در DOM جاوااسکریپت
با استفاده از ویژگی outerHTML میتونیم هم بخش بیرونی یک تگ رو بدست آوریم و هم میتونیم محتوای جدید براش تنظیم نماییم.
با استفاد از ویژگی innerHTML میتونیم به بخش درونی یک تگ دسترسی پیدا نماییم.
| مقدار برگشتی | برگشت قسمت بیرونی یک تگ از تگ شروع تا تگ پایان ( بهمراه صفت ها ) |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : تفاوت innerHTML با outerHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> function Get_Inner(){ var MyText = document.getElementById("MyText"); alert(MyText.innerHTML); } function Get_Outer(){ var MyText = document.getElementById("MyText"); alert(MyText.outerHTML); } </script> |
توضیح مثال بالا :
در مثال بالا با استفاده از ۲تا دکمه خواستم تفاوت ۲ویژگی innerHTML و outerHTML رو نشون بدم.
کاملا مشخصه که innerHTML فقط محتوای درون تگ رو بدست میاره ولی outerHTML بخش بیرونی تگ ( یعنی از تگ شروع تا پایان بهمراه صفت هاش ) بدست میاره.
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| outerHTML | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
- گرفتن مقدار :
|
1 |
Element.outerHTML; |
- ست / تنظیم مقدار جدید :
|
1 |
Element.outerHTML = "New_Value"; |
- New_Value : مقدار جدید که میتونه شامل دستورات اچ تی ام ال باشه
Free-Learn
نکات و توضیحات
- ویژگی innerHTML میتونه محتوای درونی یک تگ رو بدست بیاره و یا محتوا جدید براش تنظیم کنه.
- ویژگی outerHTML میتونه محتوای بیرونی یک تگ رو بدست بیاره و یا محتوا جدید براش تنظیم کنه.
