تعمل خاصية JavaScript textContent على تعيين المحتوى النصي للصفحة والحصول عليه. يتم استخدامه لتمرير وعرض المحتوى النصي لبعض المعلومات والعلامات والحجم الكبير للبيانات وعقدها. يختلف TextContent عن قيمة العقدة الخاصة بعلامة البرنامج النصي ويقوم بإرجاع المحتوى من العقد الفرعية لأنواع البيانات المتعددة.

إذا كانت العقدة عبارة عن عقدة نصية، أو تعليمات معالجة، أو ملاحظة علامة، فإن javascript textContent يحصل على النص أو يعينه. يُظهر TextContent تسلسل محتوى النص لكل عقدة فرعية. ويعرض تعليمات المعالجة والتعليقات على أنواع العقد الأخرى.

بناء الجملة

هناك صيغتان متاحتان لمحتوى نص JavaScript. يستخدم بناء الجملة الأول لتعيين نص العقدة، ويستخدم بناء الجملة الثاني لاسترداد نص العقدة.

بناء الجملة 1:

يستخدم بناء الجملة التالي لتعيين نص العقدة باستخدام المحتوى النصي.

الانضمام الأيسر مقابل الانضمام الأيمن

 Node_element.textContent = information; 

بناء الجملة 2:

يستخدم بناء الجملة التالي المحتوى النصي للحصول على نص العقدة.

 Node_element.textContent; 

قيمة الإرجاع:

• تحتوي السلسلة على نص عقدة الإخراج والعقدة التابعة لها. يُظهر الإخراج قيمة فارغة إذا كان العنصر عبارة عن مستند أو نوع مستند.
• يتم استبدال العقد الفرعية بعقدة نصية واحدة باستخدام مجموعة سمة textContent. تحتوي السمة على سلسلة محددة كمحتواها.

أمثلة

توضح الأمثلة التالية المجموعة وتحصل على أنواع مختلفة من المعلومات باستخدام سمة textContent.

مثال 1

يستخدم المثال التالي محتوى النص في جافا سكريبت لتعيين المعلومات. تعرض بيانات العقدة نص العلامات.

 textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes</h4> Click Here! function display() { var ele = document.getElementById(&apos;textContent_information&apos;); ele.textContent = &apos; <i> JavaScript </i> <h2> Set or get the content of node </h2>&apos;; } 

انتاج |

الصورة التالية توضح مجموعة البيانات باستخدام عقدة المحتوى.

مثال 2

يستخدم المثال التالي محتوى النص في جافا سكريبت للحصول على المعلومات. يمكننا الحصول على قيمة زر وظيفة النقر.

 textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Get node information for child javascript nodes </h4> Get node information for child javascript nodes <br> Click the Button! var text_in = document.getElementById(&apos;myData1&apos;).textContent; function fdisplay() { document.getElementById(&apos;textContent_information&apos;).textContent = text_in; } 

انتاج |

الصورة التالية توضح مجموعة البيانات باستخدام عقدة المحتوى.

مثال 3

يستخدم المثال التالي محتوى النص في جافا سكريبت للحصول على المعلومات. يمكننا الحصول على قيمة زر وظيفة النقر.

 textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes </h4> Click the Button! function fdisplay() { var text_in = document.getElementById(&apos;value&apos;).textContent; document.getElementById(&apos;textContent_information&apos;).textContent = text_in; } 

انتاج |

الصورة التالية توضح مجموعة البيانات باستخدام عقدة المحتوى.

مثال4

جافا مزدوجة إلى السلسلة

يستخدم المثال التالي المحتوى النصي الموجود على قيمة الزر للحصول على المعلومات وتعيينها. يمكننا الحصول على القيمة بعد النقر على الزر.

 textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <p id="info"> Get node information for child javascript nodes </p> Click the Button! <br> See the value! function fdisplay() { document.getElementById(&apos;value&apos;).textContent = &apos;the information of the node has been changed using click function!&apos;; var text_in = document.getElementById(&apos;info&apos;).textContent; document.getElementById(&apos;values&apos;).textContent = text_in; } 

انتاج |

الصورة التالية توضح مجموعة البيانات باستخدام عقدة المحتوى.

سلسلة تي كثافة العمليات

مثال5

يستخدم المثال التالي للحصول على المعلومات وتعيينها باستخدام محتوى InternalHtml وInnerText والنص في قيمة الزر. يمكننا الحصول على الفرق في بيانات الإخراج بعد النقر على الزر.

 textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> Click the innerHtml Button! Click the innerText Button! Click the textcontent Button! function fdisplay() { document.getElementById(&apos;finfo&apos;).innerHTML = &apos; <b> textContent in JavaScript using node </b> the information of the node has been changed using click function!&apos;; } function sdisplay() { document.getElementById(&apos;sinfo&apos;).innerText = &apos; <b> textContent in JavaScript using node </b> <br> the information of the node has been changed using click function!&apos;; } function tdisplay() { document.getElementById(&apos;tinfo&apos;).textContent = &apos; <b> textContent in JavaScript using node </b> <br> textContent in JavaScript using node <br> the information of the node has been changed using click function!&apos;; } 

انتاج |

الصورة التالية توضح مجموعة البيانات باستخدام عقدة المحتوى.

مثال 6

يستخدم المثال التالي للحصول على بيانات القائمة وتعيين المعلومات باستخدام محتوى النص على قيمة زر عند النقر. يمكننا الحصول على بيانات القائمة ومعلومات العلامات الأخرى.

 textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> <li id="std1">David</li> <li id="std2">Sai</li> <li id="std3">Ruta</li> <li id="std4">Saniya</li> <li id="std5">Kevin</li> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById(&apos;students&apos;).textContent; document.getElementById(&apos;tinfo&apos;).textContent = students; } 

انتاج |

الصورة التالية توضح مجموعة البيانات باستخدام عقدة المحتوى.

مثال 7

لا يدعم محتوى النص البيانات الفارغة إذا كانت المعلومات أو السلسلة فارغة. يظهر السلسلة الفارغة كقيمة.

 textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById(&apos;students&apos;).textContent; console.log(students); if(students != &apos;&apos;){ document.getElementById(&apos;tinfo&apos;).textContent = &apos;child node does not available of the student parent node.&apos;; }else{ document.getElementById(&apos;tinfo&apos;).textContent = &apos;child node is available of the student parent node.&apos;; } } 

انتاج |

الصورة التالية توضح كيفية الحصول على البيانات باستخدام عقدة محتوى النص.

النقطة الرئيسية لمحتوى النص في جافا سكريبت

• عندما تقوم معلومات جافا سكريبت بإزالة HTML تلقائيًا، يكون استخدام textContent آمنًا.
• يتضمن محتوى النص والمعلومات المسافات وعلامات العناصر الداخلية. سوف تقوم السمة الداخلية HTML بإرجاعها.
• تقوم السمة الداخلية بإرجاع النص فقط دون أي مسافات أو علامات عناصر داخلية. تقوم الخاصية textContent بإرجاع النص الذي يتضمن مسافات ولكنه يستبعد علامات العناصر الداخلية.
• يتم دمج قيم جميع العقد النصية في الشجرة الفرعية وتعيينها لمحتوى النص والحصول عليها من محتوى النص. إذا لم يكن لدى العقدة أي أطفال، فستكون السلسلة فارغة.
• يُرجع النص الداخلي نصًا يمكن قراءته بواسطة الإنسان ويأخذه في أي CSS. من الصعب قراءة محتوى النص عند استخدام علامات html في البيانات.
• عندما يتم تعيين خاصية على عقدة، تتم إزالة كافة عناصرها الفرعية، وتأخذ عقدة نصية واحدة مكانها بالقيمة المحددة.

خاتمة

يعرض محتوى النص أنواعًا متعددة من المعلومات. تتطلب علامة html معلومات وبيانات القائمة المعروضة باستخدام طريقة واحدة.