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

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

توسط

۱۴۰۰-۰۳-۱۹

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

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

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

Free-Learn

آنچه در این جلسه میخوانید :

1 ویژگی innerText در DOM جاوااسکریپت
2 مثال از این ویژگی
3 پشتیبانی مرورگرها
4 شکل نوشتاری
5 نکات و توضیحات

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

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

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

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

مقدار برگشتی	یک رشته / متن که نشان دهنده محتوای گره و تمام فرزندان آن می باشد

Free-Learn

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

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

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

<script>

function get(){
 var mytext , result;
 mytext = document.getElementById("MyText");
 result = document.getElementById("Result");
 result.innerHTML = mytext.innerText;
}

</script>

function get(){

var mytext , result;

mytext = document.getElementById("MyText");

result = document.getElementById("Result");

result.innerHTML = mytext.innerText;

}

</script>

امتحان کنید

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

<script>

function inH(){
 alert(document.getElementById("MyText").innerHTML)
}

function inT(){
 alert(document.getElementById("MyText").innerText)
}

function TxC(){
 alert(document.getElementById("MyText").textContent)
}

</script>

function inH(){

alert(document.getElementById("MyText").innerHTML)

}

function inT(){

alert(document.getElementById("MyText").innerText)

}

function TxC(){

alert(document.getElementById("MyText").textContent)

}

</script>

امتحان کنید

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

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

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

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

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

Node.innerText;

1	Node.innerText;

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

Node.innerText = " New_Value ";

1	Node.innerText = " New_Value ";

Free-Learn

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

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

Free-Learn

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