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

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

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

Free-Learn

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

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

ویژگی innerText در ظاهر شبیه ویژگی textContent می باشد ولی در اصل باهم فرق میکنند :

  • ویژگی textContent میتونه محتوای تمامی عناصر موجود در یک صفحه رو بدست بیاره و برگشت بده ولی ویژگی innerText میتونه محتوای تمامی عناصر موجود در یک صفحه رو به جز محتوای تگ های <script> و <style> بدست بیاره و برگشت بده.
  • اگر متن / محتوایی توسط زبان CSS پنهان ( مخفی ) شده باشه ویژگی innerText نمیتونه برگشتش بده ولی textContent میتونه.
مقدار برگشتی یک رشته / متن که نشان دهنده محتوای گره و تمام فرزندان آن می باشد

Free-Learn

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

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

مثال شماره ۱ : بدست آوردن محتوای یک تگ با استفاده از ویژگی innerText

امتحان کنید

مثال شماره ۲ : نشان دادن تفاوت ۳ویژگی innerText و innerHTML و textContent

امتحان کنید

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

در مثال بالا خواستیم تفاوت ۳ ویژگی innerText و innerHTML و textContent رو با همدیگه ببینیم.

  • innerHTML : میتونه محتوای یک عنصر رو که شامل دستورات HTML و خط فاصله بین کلمات می باشد برگردونه.
  • innerText : میتونه فقط خوده محتوارو ( بدون محاسبه خط فاصله ها و دستورات HTML ) برگردونه.
  • textContent : میتونه محتوای یک عنصر رو که فقط شامل خط فاصله می باشد برگردونه.

Free-Learn

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

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

نام ویژگی Chrome Firefox Opera Safari IE
innerText ۴ ۴۵ ۹٫۶ ۳ ۶

Free-Learn

شکل نوشتاری

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

  • بدست آوردن محتوای متن یک گره :

  • تنظیم / ست کردن محتوای جدید :


Free-Learn

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

  • ویژگی innerHTML میتونه محتوای یک عنصر رو که شامل دستورات HTML و خط فاصله بین کلمات می باشد برگردونه.
  • ویژگی innerText میتونه فقط خوده محتوارو ( بدون محاسبه خط فاصله بین کلمات و دستورات HTML ) برگردونه.
  • ویژگی textContent میتونه محتوای یک عنصر رو که فقط شامل خط فاصله می باشد برگردونه.

Free-Learn

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