Właściwość HTML DOM textContent
Przykład
Pobierz zawartość tekstową elementu:
var x =
document.getElementById("myBtn").textContent;
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość textContent ustawia lub zwraca zawartość tekstową określonego węzła i wszystkich jego potomków .
Jeśli ustawisz właściwość textContent, wszystkie węzły podrzędne zostaną usunięte i zastąpione pojedynczym węzłem tekstowym zawierającym określony ciąg.
Uwaga: Ta właściwość jest podobna do właściwości innerText , istnieją jednak pewne różnice:
- textContent zwraca zawartość tekstową wszystkich elementów, podczas gdy innerText zwraca zawartość wszystkich elementów, z wyjątkiem elementów <script> i <style>.
- innerText nie zwróci tekstu elementów, które są ukryte za pomocą CSS (zwróci textContent).
Wskazówka: Czasami ta właściwość może być użyta zamiast właściwości nodeValue , ale pamiętaj, że ta właściwość zwraca również tekst wszystkich węzłów podrzędnych.
Wskazówka: Aby ustawić lub zwrócić zawartość HTML elementu, użyj właściwości innerHTML .
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Property | |||||
---|---|---|---|---|---|
textContent | 1.0 | 9.0 | Yes | Yes | Yes |
Składnia
Zwróć zawartość tekstową węzła:
node.textContent
Ustaw zawartość tekstową węzła:
node.textContent = text
Wartości nieruchomości
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
Szczegóły techniczne
Wartość zwrotu: | String, reprezentujący tekst węzła i wszystkich jego potomków. Zwraca null, jeśli element jest dokumentem, typem dokumentu lub notacją. |
---|---|
Wersja DOM | Obiekt węzła podstawowego poziomu 3 |
Więcej przykładów
Przykład
Zmień treść tekstową elementu <p> za pomocą id="demo":
document.getElementById("demo").textContent = "Paragraph changed!";
Przykład
Pobierz całą zawartość tekstową elementu <ul> z id="myList":
var x = document.getElementById("myList").textContent;
Wartość x będzie wynosić:
Coffee Tea
Przykład
Ten przykład ilustruje niektóre różnice między innerText, innerHTML i textContent:
<p id="demo"> This element has extra spacing and contains <span>a span
element</span>.</p>
<script>
function getInnerText() {
alert(document.getElementById("demo").innerText)
}
function getHTML()
{
alert(document.getElementById("demo").innerHTML)
}
function
getTextContent() {
alert(document.getElementById("demo").textContent)
}
</script>
Pobierz zawartość elementu <p> powyżej z określonymi właściwościami:
innerText zwraca: „Ten element ma dodatkowe odstępy i zawiera element span”.
innerHTML zwraca: " Ten element ma dodatkowe odstępy i zawiera <span>element span</span>."
textContent zwraca: " Ten element ma dodatkowe odstępy i zawiera element span."
Właściwość innerText zwraca tylko tekst, bez odstępów i znaczników elementów wewnętrznych.
Właściwość innerHTML zwraca tekst, w tym wszystkie znaczniki odstępów i elementów wewnętrznych.
Właściwość textContent zwraca tekst z odstępami, ale bez wewnętrznych znaczników elementów.