Node.
Odczytuje lub ustawia cały tekst elementu, bez znaczników HTML.
- Zwraca
- Napis z tekstem elementu i wszystkich jego potomków.
Przykład
#const welcome = document.querySelector('#welcome')
console.log(welcome.textContent)
console.log(welcome.children.length)
welcome.textContent = 'Wszystkie zadania ukończone!'
console.log(welcome.children.length)Definicja i zastosowanie
#Właściwość textContent zwraca tekst elementu razem z tekstem wszystkich elementów zagnieżdżonych, połączony w jeden napis. Znaczniki HTML są pomijane i zostaje sama treść, łącznie ze spacjami i znakami nowej linii z kodu HTML.
Przypisanie do textContent usuwa całą zawartość elementu i wstawia w jej miejsce jeden węzeł tekstowy. Tekst jest wstawiany dosłownie: znaki < i > nie tworzą znaczników, tylko pojawiają się na ekranie. Dzięki temu to bezpieczny sposób na wyświetlanie danych od użytkownika.
Podobna właściwość innerText bierze pod uwagę style: pomija ukryte elementy i odwzorowuje podział na linie widoczny na ekranie. Jest jednak wolniejsza, bo wymaga obliczenia układu strony. Do zwykłego ustawiania tekstu wybieraj textContent.
Składnia
#const text = element.textContent
element.textContent = newTextWięcej przykładów
#const comment = document.querySelector('#comment')
comment.textContent = 'Użyj znacznika <strong>, żeby pogrubić tekst'
console.log(comment.children.length)
console.log(comment.innerHTML)const skills = document.querySelector('#skills')
console.log(JSON.stringify(skills.textContent))
console.log(skills.textContent.trim().split(/\s+/))Wcięcia i znaki nowej linii z kodu HTML też są tekstem, więc trafiają do textContent. JSON.stringify() pokazuje je jako \n i spacje, a trim() usuwa je z początku i końca.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Do wyświetlania tekstu od użytkownika używaj
textContent, a nieinnerHTML. Chroni to przed wstrzyknięciem kodu (atakiem XSS). - Odczytany tekst może zawierać spacje i znaki nowej linii z kodu HTML. W razie potrzeby oczyść go przez
trim(). - Przypisanie
element.textContent = ""to szybki sposób na wyczyszczenie elementu.
Powiązane hasła
#- Element.innerHTMLOdczytuje lub zastępuje zawartość elementu w postaci kodu HTML.
- document.createElement()Tworzy nowy element HTML o podanej nazwie znacznika, gotowy do wstawienia na stronę.
- document.querySelector()Zwraca pierwszy element pasujący do selektora CSS albo null, gdy nic nie pasuje.
- String.prototype.trim()Usuwa białe znaki z obu końców napisu: spacje, tabulatory i znaki nowej linii.
Widzisz błąd albo brakuje przykładu? Napisz do nas.