Propriedade HTML DOM textContent
Exemplo
Obtenha o conteúdo de texto de um elemento:
var x =
document.getElementById("myBtn").textContent;
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A propriedade textContent define ou retorna o conteúdo de texto do nó especificado e todos os seus descendentes .
Se você definir a propriedade textContent, todos os nós filho serão removidos e substituídos por um único nó Text contendo a string especificada.
Nota: Esta propriedade é semelhante à propriedade innerText , porém existem algumas diferenças:
- textContent retorna o conteúdo de texto de todos os elementos, enquanto innerText retorna o conteúdo de todos os elementos, exceto os elementos <script> e <style>.
- innerText não retornará o texto de elementos que estão ocultos com CSS (textContent irá).
Dica: Às vezes, essa propriedade pode ser usada em vez da propriedade nodeValue , mas lembre-se de que essa propriedade também retorna o texto de todos os nós filhos.
Dica: Para definir ou retornar o conteúdo HTML de um elemento, use a propriedade innerHTML .
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
textContent | 1.0 | 9.0 | Yes | Yes | Yes |
Sintaxe
Retorne o conteúdo de texto de um nó:
node.textContent
Defina o conteúdo de texto de um nó:
node.textContent = text
Valores de propriedade
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
Detalhes técnicos
Valor de retorno: | Uma String, representando o texto do nó e todos os seus descendentes. Retorna null se o elemento for um documento, um tipo de documento ou uma notação. |
---|---|
Versão DOM | Objeto de nó principal de nível 3 |
Mais exemplos
Exemplo
Altere o conteúdo textual de um elemento <p> com id="demo":
document.getElementById("demo").textContent = "Paragraph changed!";
Exemplo
Obtenha todo o conteúdo textual de um elemento <ul> com id="myList":
var x = document.getElementById("myList").textContent;
O valor de x será:
Coffee Tea
Exemplo
Este exemplo demonstra algumas das diferenças entre innerText, innerHTML e 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>
Obtenha o conteúdo do elemento <p> acima com as propriedades especificadas:
innerText retorna: "Este elemento tem espaçamento extra e contém um elemento span."
innerHTML retorna: "Este elemento tem espaçamento extra e contém <span>um elemento span</span>."
textContent retorna: "Este elemento tem espaçamento extra e contém um elemento span."
A propriedade innerText retorna apenas o texto, sem espaçamento e tags de elemento interno.
A propriedade innerHTML retorna o texto, incluindo todas as tags de espaçamento e elementos internos.
A propriedade textContent retorna o texto com espaçamento, mas sem tags de elemento interno.