HTML DOM Element textContent-eigenschap

Definitie en gebruik

textContent Deze eigenschap definieert en gebruikt de tekstinhoud van een specifieke knooppunt, inclusief alle afstammelingen.

Als je textContent Deze eigenschap, die alle subnodes verwijdert, wordt vervangen door een enkele tekstknoot met de gegeven string.

Tip:Soms kan deze eigenschap gebruikt worden om de nodeValue-eigenschap te vervangen, maar onthoud dat deze eigenschap ook de tekst van alle subnodes retourneert.

Zie ook:

innerText-eigenschap

innerHTML-eigenschap

Voorbeeld

Voorbeeld 1

Retourneren van de tekstinhoud van het element:

let text = element.textContent;

Probeer het zelf uit

Voorbeeld 2

Wijzigen van de tekstinhoud van het <p>-element met id="demo":

element.textContent = "I have changed!";

Probeer het zelf uit

Voorbeeld 3

Ophalen van de hele tekstinhoud van het <ul>-element met id="myList":

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

Probeer het zelf uit

Syntaxis

Retourneer de tekstinhoud van de knoop：

element.textContent

of

node.textContent

Stel de tekstinhoud van de knoop in：

element.textContent = text
node.textContent = text

Eigenschapswaarde

Waarde Beschrijving
text Tekstinhoud van een element of knoop.

Retournerend Waarde

Type Beschrijving
String

Tekstinhoud van het element en alle afstammelingen.

Retourneert null als het element document, document type of notation is.

Het verschil tussen innerHTML, innerText en textContent

innerText-eigenschap retourneert：

Retourneert alleen de tekstinhoud van het element en alle onderliggende elementen, zonder verborgen CSS-ruimte en tags, behalve voor <script> en <style>-elementen.

innerHTML-eigenschap retourneert：

Tekstinhoud van het element, inclusief alle witruimte en interne HTML-tags.

textContent-eigenschap retourneert：

Tekstinhoud van element en alle afstammelingen, inclusief witruimte en verborgen CSS-tekst, maar zonder tags.

HTML Voorbeeld

<p id="myP">   Dit element heeft extra afstand     en bevat <span>een span-element</span>.</p>

JavaScript examples

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

Probeer het zelf uit

In het bovenstaande voorbeeld：

innerText-eigenschap retourneert：

Dit element heeft extra afstand en bevat een span-element.

innerHTML-eigenschap retourneert：

   Dit element heeft extra afstand en bevat <span>een span-element</span>.

textContent-eigenschap retourneert：

   Dit element heeft extra afstand en bevat een span-element.

浏览器支持

element.textContent 是 DOM Level 3 (2004) 特性。

所有浏览器都完全支持它：

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