Acest ghid va ilustra cum să accesați și să manipulați proprietatea „textContent” a elementului DOM HTML în JavaScript.
În primul rând, aruncați o privire la elementele de bază ale proprietății HTML DOM „textContent”.
Ce este proprietatea HTML DOM „textContent” în JavaScript?
„ textContent ” este proprietatea încorporată care setează, preia și modifică textul unui element sau nod specificat, incluzând toți descendenții acestuia. Descendenții sunt elemente copil, cum ar fi , , și multe altele care sunt folosite în scopuri de formatare. În timp ce setați textul folosind proprietatea „textContent”, descendenții elementului vizat sunt complet înlocuiți cu noul text.
Sintaxă (Set Text Content)
Sintaxa de bază pentru a seta textul unui element/nod folosind „ textContent ” proprietatea se scrie mai jos:
element. textContent = text | nodul. textContent = text
Sintaxa de mai sus preia „ text ” ca valoare pe care utilizatorul dorește să o seteze pentru un element sau nod.
Sintaxă (Obține conținut text)
Sintaxa generalizată pentru a returna textul unui element sau nod prin intermediul „ textContent ” proprietatea este menționată aici:
element. textContent | nodul. textContentValoare returnată: „ textContent „proprietatea returnează „ text ” al unui element sau nod cu spațiere, dar fără etichetele sale HTML interioare.
Acum utilizați practic sintaxele definite mai sus pentru a accesa și manipula proprietatea „textContent”.
Cum se accesează și se manipulează proprietatea „textContent” a elementului DOM HTML în JavaScript?
Similar cu proprietățile „innerHTML” și „innerText”, „ textContent „, de asemenea, permite utilizatorilor să seteze, să acceseze și să modifice cu ușurință textul elementului dorit. Această secțiune efectuează toate aceste operații pe un element folosind exemplele de mai jos.
Exemplul 1: Aplicarea proprietății „textContent” pentru a accesa textul elementului/nodului
Acest exemplu aplică proprietatea „textContent” pentru a returna textul unui anumit element sau nod, inclusiv toți copiii acestuia.
Cod HTML
< div id = 'myDiv' onmouseover = „getText()” stil = 'chenar: 3px negru solid; lățime: 400px; umplutură: 5px 5px; margine: automat;' >< h1 > Primul titlu < / h1 >
< h2 > Al doilea titlu < / h2 >
< h3 > A treia rubrică < / h3 >
< h4 > Al patrulea titlu < / h4 >
< h5 > Al cincilea titlu < / h5 >
< h6 > Al șaselea titlu < / h6 >
< / div >
În rândurile de mai sus de cod HTML:
- „ ” eticheta care are un id „myDiv” creează un element div care este stilat cu următoarele proprietăți chenar, lățime, umplutură (sus și jos, stânga și dreapta) și margine. De asemenea, atașează „ onmouseover ” eveniment care invocă „ getText() ” când utilizatorul trece mouse-ul peste ea.
- În interiorul div-ului, toate etichetele de titlu specificate (h1,h2,h3,h4,h5 și h6) inserează elementele de antet conform nivelurilor lor specificate.
Cod JavaScript
< scenariu >
funcția getText ( ) {
a fost elem = document. getElementById ( 'myDiv' ) ;
alerta ( element. textContent ) ;
}
scenariu >În blocul de cod JavaScript scris mai sus:
- Definiți o funcție numită „ getText() ”.
- În cadrul acestei funcții, variabila „elem” aplică „ getElementById() ” pentru a accesa elementul div prin id-ul său.
- „ alerta() ” creează o casetă de alertă care folosește „ textContent ” pentru a returna textul div-ului părinte împreună cu toate persoanele aflate în întreținere.
Ieșire
Rezultatul de mai jos afișează o casetă de alertă care arată conținutul text al elementului div:
Exemplul 2: aplicarea proprietății „textContent” pentru a înlocui un element de conținut text, inclusiv descendenții acestuia
Acest exemplu arată cum proprietatea „textContent” înlocuiește toți copiii unui element în timp ce modifică textul acestuia.
Cod HTML
< centru >
< h1 id = 'capul meu' onclick = „modifyText()” >< b > Acest b > este < span > Titlu < span > < i > Element i > h1 >
centru >În rândurile de cod menționate mai sus:
- „ Eticheta ” adaugă un element de antet de nivelul 1 cu un ” atașat onclick ” eveniment care invocă „ modificăText() ” când utilizatorul face clic pe ea.
- Elementul de titlu conține, de asemenea, „ ', ' ', și ' ” etichetează ca descendenții săi. Eticheta „ ” este folosită pentru a îngroșa șirul inclus, eticheta „” fără nicio proprietate de stil este utilizată pentru a aplica niciun stil pe șirul dat, iar eticheta „ ” este utilizată pentru a afișa șirul specificat ca cursiv.
Cod JavaScript
< scenariu >
unde h1 = document. getElementById ( 'capul meu' ) ;
consolă. Buturuga ( h1 ) ;
funcția modifyText ( ) {
h1. textContent = „Bine ați venit la Linuxhint!” ;
consolă. Buturuga ( h1 )
}
scenariu >În codul JavaScript de mai sus:
- Variabila „h1” folosește „ document.getElementById() ” pentru a accesa elementul de antet prin id-ul atribuit acestuia.
- „ console.log() ” afișează elementul de antet accesat pe consolă înainte de a-i modifica conținutul.
- Funcția numită „ modificăText() ” folosește „ textContent ” pentru a modifica textul elementului de antet preluat.
- Ultima metodă „console.log()” afișează din nou valoarea „h1” după modificare.
Ieșire
Consola arată clar că toți copiii elementului de antet dat au fost înlocuiți cu textul nou specificat la clic pe el:
Exemplul 3: aplicarea proprietății „textContent” pentru a modifica textul copilului elementului
Acest exemplu folosește proprietatea „textContent” pentru a modifica textul copilului elementului specific.
Cod HTML
< div id = 'myDiv' stil = 'chenar: 3px negru solid; lățime: 400px; umplutură: 5px 5px; margine: automat;' >
< centru >
< buton id = 'btn' onmouseover = „changeText()” > Buton vechi < / buton >
< / centru >
< / div >În acest scenariu:
- Elementul „div” are un element „buton” care este creat cu ajutorul „
' etichetă. - Elementul buton conține în plus un id alocat și un „ onmouseover ” eveniment care numește „ changeText() ” când mouse-ul trece peste el.
Cod JavaScript
< scenariu >
a fost parentElement = document. getElementById ( 'myDiv' ) ;
var target = document. getElementById ( 'btn' ) ;
a fost find_me = parentElement. conţine ( ţintă ) ;
dacă ( parentElement. conţine ( ţintă ) == Adevărat ) {
consolă. Buturuga ( gaseste-ma ) ;
funcția changeText ( ) {
ţintă. textContent = „Buton nou” ;
}
} altfel {
consolă. Buturuga ( 'Nu exista' )
}
scenariu >În fragmentul de cod de mai sus:
- Variabila „parentElement” aplică „ getElementById() ” pentru a accesa elementul div părinte. Variabila „țintă” utilizează, de asemenea, metoda „getElementById()” pentru a prelua elementul butonului adăugat folosind id-ul său.
- Variabila „find_me” folosește „ conține() ” pentru a verifica dacă elementul butonului vizat este copilul div-ului sau nu. Această metodă va returna „ Adevărat ” pentru „da” în caz contrar „fals”.
- „ dacă-altfel ” instrucțiunea definește un bloc de cod.
- Dacă elementul vizat este copilul elementului părinte, atunci „ changeText() ” funcția își va schimba textul prin intermediul „ textContent ” proprietate. În caz contrar, blocul de cod „else” se va executa pentru a afișa mesajul specificat folosind butonul „ console.log() ” metoda.
Ieșire
Consola afișează un „ Adevărat ” valoarea booleană care verifică că elementul buton este copilul div-ului dat și apoi textul acestuia se schimbă la trecerea mouse-ului peste el:
Diferența dintre proprietățile textContent, innerText și innerHTML?
În general, „ textContent ', ' innerText ', și ' innerHTML ” proprietățile se ocupă de textul unui element sau nod în modul de setare și obținere. Cu toate acestea, aceste proprietăți sunt diferite unele de altele pe baza unor factori. Această secțiune evidențiază principalele diferențe dintre toate:
Termeni „conținut text” 'innerText' „HTML interior” Tip de returnare Returnează textul unui element, inclusiv toți copiii săi (etichete de formatare), text ascuns CSS și spațiu. Nu returnează etichetele HTML ale unui element. Returnează conținutul text al elementului HTML vizat cu toți copiii săi (etichete de formatare). Nu returnează spațiu, text ascuns CSS și etichete HTML, cu excepția