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

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

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

Free-Learn

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

با استفاده از ویژگی outerHTML میتونیم هم بخش بیرونی یک عنصر ( تگ ) را بدست آوریم و یا هم محتوای جدید براش تنظیم نماییم.

با استفاد از ویژگی innerHTML نیز میتونیم به بخش درونی ( داخل ) یک عنصر ( تگ ) دسترسی پیدا نماییم و هم محتواشو بدست آوریم و هم محتوای جدید براش تنظیم نماییم.

مقدار برگشتی یک رشته که نشان دهنده محتوای HTML یک عنصر می باشد
مقدار برگشتی شامل تگ شروع و تگ پایان و صفت های عنصر نیز می باشد

Free-Learn

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

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

مثال شماره ۱ : گرفتن مقدار و تنظیم مقدار جدید یک تگ با استفاده از ویژگی outerHTML

امتحان کنید

مثال شماره ۲ : بدست آوردن بخش درونی یک عنصر ( با innerHTML ) و بخش بیرونی عنصر ( با outerHTML )

امتحان کنید

توضیح مثال بالا :

در مثال بالا با استفاده از ۲تا دکمه خواستم تفاوت ۲ویژگی innerHTML و outerHTML رو نشون بدم.

کاملا مشخصه که innerHTML فقط محتوای درون عنصر رو بدست میاره ولی outerHTML خوده عنصر رو از تگ شروع تا تگ پایان بهمراه صفت هاش بدست میاره.

Free-Learn

پشتیبانی مرورگرها

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

نام ویژگی Chrome Firefox Opera Safari IE
outerHTML ۳۳ ۱۱ ۱۰ ۹ ۶

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.

  • گرفتن مقدار :

  • ست / تنظیم مقدار جدید :

  • New_Value : مقدار جدید که میتونه شامل دستورات اچ تی ام ال باشه

Free-Learn

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

  • ویژگی innerHTML هم میتونه محتوای درون یک عنصر رو بدست بیاره و هم محتوای جدید براش تنظیم کنه، ولی outerHTML میتونه محتوای بیرونی ( خوده عنصر رو از تگ شروع تا تگ پایان ) بهمراه صفت هاش بدست بیاره و هم محتوای جدید براش تنظیم کنه.

Free-Learn

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