Vlastnosť JavaScript textContent funguje na nastavenie a získanie textového obsahu stránky. Používa sa na odovzdávanie a zobrazovanie textového obsahu niektorých informácií, značiek a veľkej veľkosti údajov a ich uzlov. TextContent sa líši od nodeValue značky skriptu a vracia obsah z dcérskych uzlov viacerých typov údajov.
Ak je uzlom textový uzol, inštrukcia na spracovanie alebo poznámka značky, potom javascript textContent získa alebo nastaví text. TextContent zobrazuje zreťazenie textContent každého podradeného uzla. Zobrazuje pokyny na spracovanie a komentáre pre ostatné typy uzlov.
Syntax
Pre textový obsah JavaScript sú k dispozícii dve syntaxe. Prvá syntax sa používa na nastavenie textu uzla a druhá syntax sa používa na získanie textu uzla.
Syntax 1:
Nasledujúca syntax sa používa na nastavenie textu uzla pomocou textového obsahu.
sčítačka plná sčítačka
Node_element.textContent = information;
Syntax 2:
Nasledujúca syntax používa textový obsah na získanie textu uzla.
Node_element.textContent;
Návratová hodnota:
- Reťazec obsahuje text výstupného uzla a jeho dcérskeho uzla. Výstup zobrazuje nulovú hodnotu, ak je prvkom dokument alebo typ dokumentu.
- Podradené uzly sú nahradené jedným Textovým uzlom pomocou množiny atribútu textContent. Atribút má ako obsah špecifický reťazec.
Príklady
Nasledujúce príklady zobrazujú množinu a získavajú rôzne typy informácií pomocou atribútu textContent.
Príklad 1
Nasledujúci príklad používa textový obsah v javascripte na nastavenie informácií. Údaje uzla zobrazujú text značiek.
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('textContent_information'); ele.textContent = ' <i> JavaScript </i> <h2> Set or get the content of node </h2>'; }
Výkon
Nasledujúci obrázok zobrazuje množinu údajov pomocou uzla obsahu.
java štruktúra
Príklad 2
Nasledujúci príklad používa textový obsah v javascripte na získanie informácií. Môžeme získať hodnotu tlačidla funkcie kliknutia.
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('myData1').textContent; function fdisplay() { document.getElementById('textContent_information').textContent = text_in; }
Výkon
Nasledujúci obrázok zobrazuje množinu údajov pomocou uzla obsahu.
Príklad 3
Nasledujúci príklad používa textový obsah v javascripte na získanie informácií. Môžeme získať hodnotu tlačidla funkcie kliknutia.
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('value').textContent; document.getElementById('textContent_information').textContent = text_in; }
Výkon
Nasledujúci obrázok zobrazuje množinu údajov pomocou uzla obsahu.
Príklad4
Nasledujúci príklad používa textový obsah na hodnote tlačidla na získanie a nastavenie informácií. Hodnotu získame po kliknutí na tlačidlo.
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('value').textContent = 'the information of the node has been changed using click function!'; var text_in = document.getElementById('info').textContent; document.getElementById('values').textContent = text_in; }
Výkon
Nasledujúci obrázok zobrazuje množinu údajov pomocou uzla obsahu.
Príklad 5
np.histogram
Nasledujúci príklad používa na získanie a nastavenie informácií pomocou innerHtml, innerText a textového obsahu na hodnote tlačidla. Rozdiel vo výstupných údajoch získame po kliknutí na tlačidlo.
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('finfo').innerHTML = ' <b> textContent in JavaScript using node </b> the information of the node has been changed using click function!'; } function sdisplay() { document.getElementById('sinfo').innerText = ' <b> textContent in JavaScript using node </b> <br> the information of the node has been changed using click function!'; } function tdisplay() { document.getElementById('tinfo').textContent = ' <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!'; }
Výkon
Nasledujúci obrázok zobrazuje množinu údajov pomocou uzla obsahu.
Príklad 6
Nasledujúci príklad používa na získanie údajov zoznamu a nastavenie informácií pomocou textového obsahu na hodnotu tlačidla onclick. Môžeme získať údaje zo zoznamu a ďalšie informácie o značkách.
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('students').textContent; document.getElementById('tinfo').textContent = students; }
Výkon
Nasledujúci obrázok zobrazuje množinu údajov pomocou uzla obsahu.
Príklad 7
Textový obsah nepodporuje prázdne údaje, ak sú informácie alebo reťazce prázdne. Zobrazuje prázdny reťazec ako hodnotu.
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('students').textContent; console.log(students); if(students != ''){ document.getElementById('tinfo').textContent = 'child node does not available of the student parent node.'; }else{ document.getElementById('tinfo').textContent = 'child node is available of the student parent node.'; } }
Výkon
Nasledujúci obrázok ukazuje získavanie údajov pomocou uzla textového obsahu.
Kľúčový bod textového obsahu v javascripte
- Keď informácie javascript automaticky odstránia HTML, potom je používanie textContent bezpečné.
- Textový obsah a informácie zahŕňajú medzery a značky vnútorných prvkov. Atribút innerHTML to vráti.
- Atribút innerText vracia iba text bez medzier alebo značiek vnútorných prvkov. Vlastnosť textContent vracia text, ktorý obsahuje medzery, ale vylučuje značky vnútorných prvkov.
- Hodnoty všetkých textových uzlov v podstrome sa skombinujú a nastavia pre textový obsah a získajú sa z textového obsahu. Ak uzol nemá žiadne potomky, reťazec je prázdny.
- InternalText vracia text, ktorý je ľudsky čitateľný a preberá ho do akéhokoľvek CSS. Textový obsah je ťažko čitateľný, keď sa v údajoch používajú značky html.
- Keď je vlastnosť nastavená na uzle, odstránia sa všetky jej podriadené položky a nahradí ju jeden textový uzol so zadanou hodnotou.
Záver
Textový obsah zobrazuje viacero typov informácií. Značka html vyžadovala informácie a zoznam údajov zobrazených pomocou jedinej metódy.