A JavaScript textContent tulajdonság az oldal szöveges tartalmának beállítására és lekérésére szolgál. Egyes információk, címkék és nagyméretű adatok szöveges tartalmának és csomópontjainak átadására és megjelenítésére szolgál. A TextContent eltér a szkriptcímke nodeValue értékétől, és tartalmat ad vissza több adattípus gyermekcsomópontjaitól.
Ha a csomópont egy szöveges csomópont, egy feldolgozási utasítás vagy egy címke megjegyzés, akkor a javascript textContent lekéri vagy beállítja a szöveget. A TextContent az egyes gyermekcsomópontok textContentjének összefűzését mutatja. Megmutatja a feldolgozási utasításokat és megjegyzéseket a többi csomóponttípushoz.
Szintaxis
Két szintaxis áll rendelkezésre a JavaScript szöveges tartalomhoz. Az első szintaxis a csomópont szövegének beállítására szolgál, a második szintaxis pedig a csomópont szövegének lekérésére.
1. szintaxis:
A következő szintaxis a csomópont szövegének szöveges tartalommal történő beállítására szolgál.
zsibbadt átlag
Node_element.textContent = information;
2. szintaxis:
A következő szintaxis szöveges tartalmat használ a csomópont szövegének lekéréséhez.
Node_element.textContent;
Visszatérési érték:
- Egy karakterlánc tartalmazza a kimeneti csomópont szövegét és gyermekcsomópontját. A kimenet null értéket mutat, ha egy elem dokumentum vagy dokumentumtípus.
- A gyermek csomópontokat egyetlen szöveg csomópont helyettesíti a textContent attribútum készletével. Az attribútum tartalma egy meghatározott karakterlánc.
Példák
A következő példák a készletet mutatják be, és a textContent attribútum használatával megkapják a különféle típusú információkat.
1. példa
A következő példa szöveges tartalmat használ a javascriptben az információk beállításához. A csomóponti adatok a címkék szövegét mutatják.
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>'; } Kimenet
A következő képen az adatok halmaza látható a tartalom csomópont használatával.
adjunk hozzá egy tömbhöz java-ban
2. példa
A következő példa szöveges tartalmat használ a javascriptben az információ megszerzéséhez. Megkaphatjuk a kattintás funkció gombjának értékét.
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; } Kimenet
A következő képen az adatok halmaza látható a tartalom csomópont használatával.
3. példa
A következő példa szöveges tartalmat használ a javascriptben az információ megszerzéséhez. Megkaphatjuk a kattintás funkció gombjának értékét.
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; } Kimenet
A következő képen az adatok halmaza látható a tartalom csomópont használatával.
Példa4
A következő példa szöveges tartalmat használ a gombértéken az információk lekéréséhez és beállításához. Az értéket a gombra kattintás után kaphatjuk meg.
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; } Kimenet
A következő képen az adatok halmaza látható a tartalom csomópont használatával.
Példa5
0,06 törtként
A következő példa az információk lekérésére és beállítására szolgál az innerHtml, az innerText és a gomb értékének szöveges tartalom használatával. A kimenő adatok különbségét a gombra kattintás után kaphatjuk meg.
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!'; } Kimenet
A következő képen az adatok halmaza látható a tartalom csomópont használatával.
6. példa
A következő példa a listaadatok lekérésére és az információk beállítására szolgál az onclick gomb értékének szöveges tartalommal. Megkaphatjuk a lista adatait és egyéb címkék információit.
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; } Kimenet
A következő képen az adatok halmaza látható a tartalom csomópont használatával.
7. példa
A szövegtartalom nem támogatja az üres adatokat, ha az információ vagy a karakterlánc üres. Az üres karakterláncot mutatja értékként.
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.'; } } Kimenet
A következő képen látható az adatok lekérése szöveges tartalom csomópont használatával.
A szöveges tartalom kulcspontja a javascriptben
- Amikor a javascript információk automatikusan eltávolítják a HTML-t, akkor a textContent használata biztonságos.
- A szövegtartalom és információ tartalmazza a szóközöket és a belső elem címkéket. Az innerHTML attribútum visszaadja.
- Az innerText attribútum csak szöveget ad vissza szóközök vagy belső elemcímkék nélkül. A textContent tulajdonság szóközöket tartalmazó szöveget ad vissza, de nem tartalmazza a belső elemcímkéket.
- A részfa összes szövegcsomópontjának értékei kombinálva vannak, és be vannak állítva a szövegtartalomhoz, és a szövegtartalomból származnak. Ha egy csomópontnak nincsenek gyermekei, a karakterlánc üres.
- Az innerText olyan szöveget ad vissza, amely emberileg olvasható, és bármely CSS-be beépül. A szöveges tartalom nehezen olvasható, ha az adatokban html címkéket használnak.
- Ha egy tulajdonságot beállítunk egy csomóponton, akkor az összes gyermekét eltávolítjuk, és egyetlen szövegcsomópont veszi át a helyét a megadott értékkel.
Következtetés
A szöveges tartalom többféle információt jelenít meg. A html címke egyetlen módszerrel megjelenített információkat és listaadatokat igényelt.