Atrybut textContent elementu HTML DOM

Definicja i użycie

textContent Atrybut ustawia lub zwraca treść tekstu dla określonego węzła oraz jego wszystkich potomków.

Jeśli ustawisz textContent Atrybut, który usuwa wszystkie podelementy i zastępuje je pojedynczym węzłem tekstowym zawierającym podany ciąg znaków.

Wskazówka:Czasami, ten atrybut można użyć zamiast atrybutu nodeValue, ale pamiętaj, że ten atrybut zwraca tekst wszystkich podelementów.

Inne zasoby:

Atrybut innerText

Atrybut innerHTML

Przykład

Przykład 1

Zwracanie treści tekstu elementu:

let text = element.textContent;

Spróbuj sam!

Przykład 2

Zmiana treści elementu <p> o id="demo":

element.textContent = "I have changed!";

Spróbuj sam!

Przykład 3

Pobieranie wszystkich treści tekstu elementu <ul> o id="myList":

let text = document.getElementById("myList").textContent;

Spróbuj sam!

Gramatyka

Zwrócenie tekstu węzła:

element.textContent

lub

node.textContent

Ustawienie tekstu węzła:

element.textContent = text
node.textContent = text

Wartość atrybutu

Wartość Opis
text Tekst zawarty w elemencie lub węźle.

Zwracana wartość

Typ Opis
Ciąg znaków

Tekst zawarty w elemencie i wszystkich jego potomkach.

Jeśli element jest document, document type lub notation, zwraca null.

Różnica między innerHTML, innerText a textContent

Właściwość innerText zwraca:

Zwraca tylko tekst zawarty w elemencie i wszystkich jego potomkach, bez ukrytego tekstu CSS, odśrodkowania i etykiet, oprócz elementów <script> i <style>.

Właściwość innerHTML zwraca:

Tekst zawarty w elemencie, w tym wszystkie białe znaki i wewnętrzne etykiety HTML.

Właściwość textContent zwraca:

Tekst zawarty w elemencie i wszystkich potomkach, z białymi znakami i ukrytym tekstem CSS, ale bez etykiet.

Przykład HTML

<p id="myP">   Ten element ma dodatkowe odśrodkowanie     i zawiera <span>element span</span>.</p>

Przykłady JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Spróbuj sam!

W powyższym przykładzie:

Właściwość innerText zwraca:

Ten element ma dodatkowe odśrodkowanie i zawiera element span.

Właściwość innerHTML zwraca:

   Ten element ma dodatkowe odśrodkowanie i zawiera <span>element span</span>.

Właściwość textContent zwraca:

   Ten element ma dodatkowe odśrodkowanie i zawiera element span.

Wspieranie przeglądarek

element.textContent jest cechą DOM Level 3 (2004).

Wszystkie przeglądarki wspierają ją w pełni:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wspierane 9-11 Wspierane Wspierane Wspierane Wspierane