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

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

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

Free-Learn

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

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

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

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

Free-Learn

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

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

مثال شماره ۱ : بدست آوردن محتوای یک تگ با استفاده از ویژگی textContent – در این مثال درون یک باکس ۲تا تگ P داریم که یکی از Pهارو با استفاده از ویژگی display در CSS مخفی کردیم، حال میخوایم ببینیم آیا ویژگی textContent میتونه اون محتوایی که مخفی شده رو برگردونه یا نه ( که بله میتونه )

امتحان کنید

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

امتحان کنید

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

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

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

Free-Learn

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

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

نام ویژگی Chrome Firefox Opera Safari IE
textContent بله بله ۹ ۳ ۹

Free-Learn

شکل نوشتاری

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

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

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


Free-Learn

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

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

Free-Learn

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