Proprietatea JavaScript textContent funcționează pentru a seta și obține conținutul text al paginii. Este folosit pentru a transmite și afișa conținutul text al unor informații, etichete și dimensiuni mari ale datelor și nodurilor acesteia. TextContent variază de la nodeValue a etichetei de script și returnează conținut de la nodurile secundare ale mai multor tipuri de date.
Dacă nodul este un nod text, o instrucțiune de procesare sau o remarcă de etichetă, atunci javascript textContent primește sau setează textul. TextContent arată concatenarea textContent al fiecărui nod copil. Afișează instrucțiunile de procesare și comentarii celorlalte tipuri de noduri.
Sintaxă
Există două sintaxe disponibile pentru conținutul text JavaScript. Prima sintaxă folosește pentru a seta textul unui nod, iar a doua sintaxă folosește pentru a prelua textul nodului.
Sintaxa 1:
Următoarea sintaxă este utilizată pentru a seta textul nodului folosind conținut textual.
harta in java
Node_element.textContent = information;
Sintaxa 2:
Următoarea sintaxă folosește conținut textual pentru a obține textul nodului.
Node_element.textContent;
Valoare returnată:
- Un șir conține textul nodului de ieșire și al nodului său copil. Ieșirea arată o valoare nulă dacă un element este un document sau un tip de document.
- Nodurile copil sunt înlocuite cu un singur nod Text folosind setul atributului textContent. Atributul are un șir specific ca conținut.
Exemple
Următoarele exemple arată setul și obțineți diferitele tipuri de informații folosind atributul textContent.
Exemplul 1
Următorul exemplu utilizează conținut text în javascript pentru a seta informațiile. Datele nodului arată textul etichetelor.
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>'; } Ieșire
Următoarea imagine arată setarea datelor folosind nodul de conținut.
Exemplul 2
Următorul exemplu folosește conținut text în javascript pentru a obține informațiile. Putem obține valoarea butonului funcției de clic.
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; } Ieșire
directorul de redenumire linux
Următoarea imagine arată setarea datelor folosind nodul de conținut.
Exemplul 3
Următorul exemplu folosește conținut text în javascript pentru a obține informațiile. Putem obține valoarea butonului funcției de clic.
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; } Ieșire
Următoarea imagine arată setarea datelor folosind nodul de conținut.
Exemplul4
Următorul exemplu folosește conținutul text al valorii butonului pentru a obține și a seta informațiile. Putem obține valoarea după ce facem clic pe butonul.
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; } Ieșire
Următoarea imagine arată setarea datelor folosind nodul de conținut.
Exemplul5
Următorul exemplu folosește pentru a obține și a seta informații folosind innerHtml, innerText și conținut text pe valoarea butonului. Putem obține diferența în datele de ieșire după ce facem clic pe butonul.
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!'; } Ieșire
Următoarea imagine arată setarea datelor folosind nodul de conținut.
Exemplul 6
Următorul exemplu folosește pentru a obține datele din listă și pentru a seta informațiile folosind conținut text pe valoarea butonului onclick. Putem obține datele listei și alte informații despre etichete.
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; } Ieșire
Următoarea imagine arată setarea datelor folosind nodul de conținut.
Exemplul 7
Conținutul text nu acceptă date goale dacă informațiile sau șirul sunt goale. Afișează șirul gol ca valoare.
ce este mac os
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.'; } } Ieșire
Următoarea imagine arată obținerea datelor folosind nodul de conținut text.
Punctul cheie al conținutului text în javascript
- Când informațiile javascript elimină automat HTML, atunci utilizarea textContent este sigură.
- Conținutul textului și informațiile includ spațiile și etichetele elementului interior. Atributul innerHTML îl va returna.
- Atributul innerText returnează numai text fără spații sau etichete de elemente interioare. Proprietatea textContent returnează text care include spații, dar exclude etichetele de elemente interioare.
- Valorile tuturor nodurilor de text din subarborele sunt combinate și setate pentru conținutul text și obțin din conținutul text. Dacă un nod nu are copii, șirul este gol.
- InnerText returnează text care poate fi citit de om și ia în orice CSS. Conținutul textului este greu de citit atunci când etichetele html sunt utilizate în date.
- Când o proprietate este setată pe un nod, toți copiii săi sunt eliminați și un singur nod text îi ia locul cu valoarea specificată.
Concluzie
Conținutul textului afișează mai multe tipuri de informații. Eticheta html necesita informații și date lista afișate folosind o singură metodă.