خاصية المحتوى النصي لـ HTML DOM
مثال
احصل على محتوى نصي لعنصر:
var x =
document.getElementById("myBtn").textContent;
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تقوم خاصية textContent بتعيين أو إرجاع المحتوى النصي للعقدة المحددة وجميع العناصر المتفرعة منها .
إذا قمت بتعيين خاصية textContent ، فستتم إزالة أي عقد فرعية واستبدالها بعقدة نصية واحدة تحتوي على السلسلة المحددة.
ملاحظة: هذه الخاصية مشابهة لخاصية innerText ، ولكن هناك بعض الاختلافات:
- يعرض textContent محتوى النص لجميع العناصر ، بينما يُرجع النص الداخلي محتوى جميع العناصر ، باستثناء عناصر <script> و <style>.
- لن يقوم innerText بإرجاع نص العناصر المخفية باستخدام CSS (إرادة محتوى النص).
تلميح: في بعض الأحيان يمكن استخدام هذه الخاصية بدلاً من الخاصية nodeValue ، لكن تذكر أن هذه الخاصية تُرجع نص جميع العقد الفرعية أيضًا.
تلميح: لتعيين أو إرجاع محتوى HTML لعنصر ما ، استخدم خاصية innerHTML .
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
| Property | |||||
|---|---|---|---|---|---|
| textContent | 1.0 | 9.0 | Yes | Yes | Yes |
بناء الجملة
إعادة محتوى نص العقدة:
node.textContent
قم بتعيين محتوى نص العقدة:
node.textContent = text
قيم الملكية
| Value | Type | Description |
|---|---|---|
| text | String | Specifies the text content of the specified node |
تفاصيل تقنية
| قيمة الإرجاع: | سلسلة تمثل نص العقدة وكل نسلها. إرجاع القيمة فارغة إذا كان العنصر مستندًا أو نوع مستند أو رمزًا. |
|---|---|
| إصدار DOM | كائن العقدة من المستوى الأساسي 3 |
مزيد من الأمثلة
مثال
تغيير المحتوى النصي للعنصر <p> بالمعرف = "demo":
document.getElementById("demo").textContent = "Paragraph changed!";
مثال
احصل على كل المحتوى النصي لعنصر <ul> مع id = "myList":
var x = document.getElementById("myList").textContent;
ستكون قيمة x :
Coffee Tea
مثال
يوضح هذا المثال بعض الاختلافات بين innerText و innerHTML و textContent:
<p id="demo"> This element has extra spacing and contains <span>a span
element</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
احصل على محتوى العنصر <p> أعلاه بالخصائص المحددة:
يعيد innerText : "هذا العنصر يحتوي على تباعد إضافي ويحتوي على عنصر امتداد."
إرجاع innerHTML : "يحتوي هذا العنصر على مسافات إضافية ويحتوي على <span> عنصر امتداد </ span>."
إرجاع textContent : "يحتوي هذا العنصر على مسافات إضافية ويحتوي على عنصر امتداد."
ترجع الخاصية innerText النص فقط ، بدون تباعد وعلامات العناصر الداخلية.
تقوم خاصية innerHTML بإرجاع النص ، بما في ذلك كل علامات التباعد والعنصر الداخلي.
تقوم خاصية textContent بإرجاع النص مع تباعد ، ولكن بدون علامات العنصر الداخلي.