Svojstvo JavaScript textContent služi za postavljanje i dobivanje tekstualnog sadržaja stranice. Koristi se za prosljeđivanje i prikaz tekstualnog sadržaja nekih informacija, oznaka i velike veličine podataka i njihovih čvorova. TextContent varira od nodeValue oznake skripte i vraća sadržaj iz podređenih čvorova više vrsta podataka.
Ako je čvor tekstualni čvor, instrukcija za obradu ili primjedba oznake, tada javascript textContent dobiva ili postavlja tekst. TextContent prikazuje ulančavanje textContent-a svakog podređenog čvora. Prikazuje upute za obradu i komentare za druge vrste čvorova.
Sintaksa
Postoje dvije sintakse dostupne za JavaScript tekstualni sadržaj. Prva sintaksa koristi se za postavljanje teksta čvora, a druga sintaksa koristi za dohvaćanje teksta čvora.
Sintaksa 1:
Sljedeća sintaksa koristi se za postavljanje teksta čvora pomoću tekstualnog sadržaja.
string format
Node_element.textContent = information;
Sintaksa 2:
Sljedeća sintaksa koristi tekstualni sadržaj za dobivanje teksta čvora.
Node_element.textContent;
Povratna vrijednost:
- Niz sadrži tekst izlaznog čvora i njegovog podređenog čvora. Izlaz prikazuje nultu vrijednost ako je element dokument ili vrsta dokumenta.
- Podređeni čvorovi zamijenjeni su jednim tekstualnim čvorom pomoću skupa atributa textContent. Atribut ima određeni niz kao sadržaj.
Primjeri
Sljedeći primjeri pokazuju skup i dobivanje različitih vrsta informacija pomoću atributa textContent.
Primjer 1
Sljedeći primjer koristi tekstualni sadržaj u javascriptu za postavljanje informacija. Podaci čvora prikazuju tekst oznaka.
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>'; } Izlaz
Sljedeća slika prikazuje skup podataka pomoću čvora sadržaja.
Primjer 2
Sljedeći primjer koristi tekstualni sadržaj u javascriptu za dobivanje informacija. Možemo dobiti vrijednost gumba funkcije klika.
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; } Izlaz
Sljedeća slika prikazuje skup podataka pomoću čvora sadržaja.
Primjer 3
Sljedeći primjer koristi tekstualni sadržaj u javascriptu za dobivanje informacija. Možemo dobiti vrijednost gumba funkcije klika.
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; } Izlaz
Sljedeća slika prikazuje skup podataka pomoću čvora sadržaja.
Primjer4
povezani popis
Sljedeći primjer koristi tekstualni sadržaj na vrijednosti gumba za dobivanje i postavljanje informacija. Vrijednost možemo dobiti nakon klika na gumb.
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; } Izlaz
Sljedeća slika prikazuje skup podataka pomoću čvora sadržaja.
Primjer5
Sljedeći primjer koristi se za dobivanje i postavljanje informacija pomoću innerHtml-a, innerText-a i tekstualnog sadržaja na vrijednosti gumba. Razliku u izlaznim podacima možemo dobiti nakon klika na gumb.
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!'; } Izlaz
Sljedeća slika prikazuje skup podataka pomoću čvora sadržaja.
niz u polje java
Primjer 6
Sljedeći primjer koristi se za dobivanje podataka popisa i postavljanje informacija pomoću tekstualnog sadržaja na vrijednost gumba onclick. Možemo dobiti podatke popisa i druge informacije o oznakama.
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; } Izlaz
Sljedeća slika prikazuje skup podataka pomoću čvora sadržaja.
Primjer 7
Tekstualni sadržaj ne podržava prazne podatke ako su informacije ili niz prazni. Prikazuje prazan niz kao vrijednost.
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.'; } } Izlaz
Sljedeća slika prikazuje dobivanje podataka pomoću čvora tekstualnog sadržaja.
Ključna točka tekstualnog sadržaja u javascriptu
- Kada javascript informacije automatski uklanjaju HTML, korištenje textContenta je sigurno.
- Tekstualni sadržaj i informacije uključuju razmake i oznake unutarnjih elemenata. InnerHTML atribut će ga vratiti.
- Atribut innerText vraća samo tekst bez razmaka ili oznaka unutarnjeg elementa. Svojstvo textContent vraća tekst koji uključuje razmake, ali isključuje oznake unutarnjih elemenata.
- Vrijednosti svih tekstualnih čvorova u podstablu se kombiniraju i postavljaju za tekstualni sadržaj i dobivaju iz tekstualnog sadržaja. Ako čvor nema djecu, niz je prazan.
- InnerText vraća tekst koji je čovjeku čitljiv i preuzima bilo koji CSS. Sadržaj teksta teško je čitati kada se u podacima koriste html oznake.
- Kada je svojstvo postavljeno na čvor, sva njegova djeca se uklanjaju, a jedan tekstualni čvor zauzima njegovo mjesto s navedenom vrijednošću.
Zaključak
Tekstualni sadržaj prikazuje više vrsta informacija. Oznaka html zahtijeva informacije i podatke popisa koji se prikazuju pomoću jedne metode.