این آموزش در تاریخ ۱۴۰۱/۰۵/۲۴ آپدیت شده است.
آموزش ویژگی textContent در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی textContent در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی textContent در DOM جاوااسکریپت
با استفاده از ویژگی textContent میتونیم متن / محتوای درون یک تگ رو بدست آوریم یاهم مقدار جدید براش تعریف نماییم.
تفاوت ویژگی innerText و ویژگی textContent
- ویژگی textContent میتونه محتوای تمامی تگ های موجود در یک صفحه رو بدست بیاره و برگشت بده ولی ویژگی innerText میتونه همه تگ هارو به جز تگ های <script> و <style> برگشت بده.
- اگر متن / محتوایی توسط زبان CSS پنهان ( مخفی ) شده باشه ویژگی innerText نمیتونه برگشتش بده ولی textContent میتونه.
| مقدار برگشتی | برگشت متن / محتوای داخل تگ |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : نشان دادن تفاوت ۲ویژگی textContent و innerText
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> function Get_1(){ var MyBox , Result; MyBox = document.getElementById("MyBox"); Result = document.getElementById("Result"); Result.innerHTML = MyBox.textContent; } function Get_2(){ var MyBox , Result; MyBox = document.getElementById("MyBox"); Result = document.getElementById("Result"); Result.innerHTML = MyBox.innerText; } </script> |
مثال شماره ۲ : نشان دادن تفاوت ۳ویژگی innerText و innerHTML و textContent
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> function IH(){ var MyText = document.getElementById("MyText").innerHTML; alert(MyText) } function IT(){ var MyText = document.getElementById("MyText").innerText; alert(MyText) } function TC(){ var MyText = document.getElementById("MyText").textContent; alert(MyText) } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| textContent | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
- بدست آوردن محتوای تگ :
|
1 |
Element.textContent; |
- تنظیم / ست کردن محتوای جدید :
|
1 |
Element.textContent = " New_Value "; |
Free-Learn
نکات و توضیحات
- innerHTML : میتونه محتوای یک تگ رو که شامل دستورات HTML و خط فاصله بین کلمات می باشد برگردونه.
- innerText : میتونه فقط خوده محتوارو ( بدون محاسبه خط فاصله ها و دستورات HTML ) برگردونه.
- textContent : میتونه محتوای یک تگ رو که فقط شامل خط فاصله می باشد برگردونه.
