خصائص textContent في HTML DOM

مجموعة الأغراض Element HTML DOM

textContentخصائص تعيين أو العودة إلى محتويات النص للعقدة وأبنائه.

وضع textContent على العقدة سيزيل جميع أبناء العقدة ويحل محلهم بنص واحد يحتوي على النص المحدد.

خاصية textContent تشبهinnerTextالخصائص، ولكن هناك بعض الاختلافات:

• textContent يعودكليعود نص محتوى العنصر، بينما يعود innerTextباستثناء <script> و <style> العناصرخارجلجميع العناصر.

• innerText لا يعود بالنص للمكونات المخفية في CSS (textContent يعود)

لإعداد أو العودة إلى محتويات HTML للعنصر، استخدمinnerHTMLخاصية.

النحو:

يعود بمحتويات النص للعقدة:

node.textContent

تعيين محتويات النص للعقدة:

node.textContent = text

var x = document.getElementById("para").textContent;

توافق المتصفحات

دعم جميع المتصفحات الخاصية textContent بشكل كامل:

قيمة الخاصية

تفاصيل تقنية

مزيد من الأمثلة

استخدام id="para" لتغيير محتويات عنصر <p>:

var x = document.getElementById("para");
x.textContent = "HELLO WORLD";

يعود بجميع محتويات عنصر DIV:

var x = document.getElementById("container").textContent;

هذا المثال يوضح الفرق بين innerText، innerHTML و textContent:

<p id="x">هذا العنصر يحتوي على مسافة إضافية ويشمل عنصر<span>span</span>.</p>
<script>
function　getInnerText()　{
alert(document.getElementById("x").innerText);
}
function　getInnerHTML()　{
alert(document.getElementById("x").innerHTML);
}
function　getTextContent()　{
alert(document.getElementById("x").textContent);
}
</script>

خصائص innerText تعود بالنص فقط، دون مسافات وعناصر علامات داخلية.

خصائص innerHTML تعود بنص يحتوي على مسافات وعدة عناصر علامات داخلية.

خصائص textContent تعود بنص مع间距، ولكن لا تحتوي على عناصر العلامات الداخلية.

مراجع مرتبطة

مرجع HTML DOMHTMLElementخصائص .innerText

مرجع HTML DOMعنصرخصائص .innerHTML

مجموعة الأغراض Element HTML DOM