Vlastnost obsahu textu HTML DOM
Příklad
Získejte textový obsah prvku:
var x =
document.getElementById("myBtn").textContent;
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost textContent nastavuje nebo vrací textový obsah zadaného uzlu a všech jeho potomků .
Pokud nastavíte vlastnost textContent, budou všechny podřízené uzly odstraněny a nahrazeny jedním uzlem Text obsahujícím zadaný řetězec.
Poznámka: Tato vlastnost je podobná vlastnosti innerText , existují však určité rozdíly:
- textContent vrací textový obsah všech prvků, zatímco innerText vrací obsah všech prvků kromě prvků <script> a <style>.
- innerText nevrátí text prvků, které jsou skryté pomocí CSS (textContent ano).
Tip: Někdy lze tuto vlastnost použít místo vlastnosti nodeValue , ale pamatujte, že tato vlastnost vrací také text všech podřízených uzlů.
Tip: Chcete-li nastavit nebo vrátit obsah HTML prvku, použijte vlastnost innerHTML .
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
| Property | |||||
|---|---|---|---|---|---|
| textContent | 1.0 | 9.0 | Yes | Yes | Yes |
Syntax
Vraťte textový obsah uzlu:
node.textContent
Nastavte textový obsah uzlu:
node.textContent = text
Hodnoty vlastností
| Value | Type | Description |
|---|---|---|
| text | String | Specifies the text content of the specified node |
Technické údaje
| Návratová hodnota: | Řetězec představující text uzlu a všech jeho potomků. Vrátí hodnotu null, pokud je prvkem dokument, typ dokumentu nebo zápis. |
|---|---|
| Verze DOM | Základní objekt uzlu úrovně 3 |
Další příklady
Příklad
Změňte textový obsah prvku <p> pomocí id="demo":
document.getElementById("demo").textContent = "Paragraph changed!";
Příklad
Získejte veškerý textový obsah prvku <ul> pomocí id="myList":
var x = document.getElementById("myList").textContent;
Hodnota x bude:
Coffee Tea
Příklad
Tento příklad ukazuje některé rozdíly mezi innerText, innerHTML a 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>
Získejte obsah prvku <p> výše se zadanými vlastnostmi:
innerText vrátí: "Tento prvek má navíc mezery a obsahuje prvek span."
innerHTML vrátí: "Tento prvek má extra mezery a obsahuje <span>prvek span</span>."
textContent vrací: "Tento prvek má navíc mezery a obsahuje prvek span."
Vlastnost innerText vrací pouze text bez mezer a značek vnitřního prvku.
Vlastnost innerHTML vrací text včetně všech mezer a značek vnitřních prvků.
Vlastnost textContent vrací text s mezerami, ale bez značek vnitřních prvků.