Propiedad HTML DOM textContent
Ejemplo
Obtener el contenido de texto de un elemento:
var x =
document.getElementById("myBtn").textContent;
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La propiedad textContent establece o devuelve el contenido de texto del nodo especificado y todos sus descendientes .
Si establece la propiedad textContent, los nodos secundarios se eliminan y reemplazan por un solo nodo de texto que contiene la cadena especificada.
Nota: esta propiedad es similar a la propiedad innerText , sin embargo, existen algunas diferencias:
- textContent devuelve el contenido de texto de todos los elementos, mientras que innerText devuelve el contenido de todos los elementos, excepto los elementos <script> y <style>.
- innerText no devolverá el texto de los elementos que están ocultos con CSS (textContent lo hará).
Sugerencia: A veces, esta propiedad se puede usar en lugar de la propiedad nodeValue , pero recuerde que esta propiedad también devuelve el texto de todos los nodos secundarios.
Sugerencia: para establecer o devolver el contenido HTML de un elemento, use la propiedad innerHTML .
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
textContent | 1.0 | 9.0 | Yes | Yes | Yes |
Sintaxis
Devuelve el contenido de texto de un nodo:
node.textContent
Establecer el contenido de texto de un nodo:
node.textContent = text
Valores de propiedad
Value | Type | Description |
---|---|---|
text | String | Specifies the text content of the specified node |
Detalles técnicos
Valor de retorno: | Una cadena, que representa el texto del nodo y todos sus descendientes. Devuelve nulo si el elemento es un documento, un tipo de documento o una notación. |
---|---|
Versión DOM | Objeto de nodo de nivel 3 básico |
Más ejemplos
Ejemplo
Cambie el contenido textual de un elemento <p> con id="demo":
document.getElementById("demo").textContent = "Paragraph changed!";
Ejemplo
Obtenga todo el contenido textual de un elemento <ul> con id="myList":
var x = document.getElementById("myList").textContent;
El valor de x será:
Coffee Tea
Ejemplo
Este ejemplo demuestra algunas de las diferencias entre innerText, innerHTML y 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>
Obtenga el contenido del elemento <p> anterior con las propiedades especificadas:
innerText devuelve: "Este elemento tiene espacio adicional y contiene un elemento de intervalo".
innerHTML devuelve: "Este elemento tiene espacio adicional y contiene <span>un elemento de intervalo</span>".
textContent devuelve: "Este elemento tiene espacio adicional y contiene un elemento de intervalo".
La propiedad innerText devuelve solo el texto, sin espaciado ni etiquetas de elementos internos.
La propiedad innerHTML devuelve el texto, incluidos todos los espacios y las etiquetas de elementos internos.
La propiedad textContent devuelve el texto con espaciado, pero sin etiquetas de elementos internos.