Esta guía ilustrará cómo acceder y manipular la propiedad 'textContent' del elemento HTML DOM en JavaScript.
Primero, eche un vistazo a los conceptos básicos de la propiedad “textContent” de HTML DOM.
¿Qué es la propiedad HTML DOM “textContent” en JavaScript?
El ' contenido del texto 'Es la propiedad incorporada que establece, recupera y modifica el texto de un elemento o nodo específico, incluidos todos sus descendientes. Los descendientes son elementos secundarios como , , y muchos más que se utilizan con fines de formato. Al configurar el texto usando la propiedad 'textContent', los descendientes del elemento de destino se reemplazan completamente con el nuevo texto.
Sintaxis (Establecer contenido de texto)
La sintaxis básica para configurar el texto de un elemento/nodo usando el comando “ contenido del texto La propiedad 'está escrita a continuación:
elemento. contenido del texto = texto | nodo. contenido del texto = texto
La sintaxis anterior toma el deseado ' texto ”como un valor que el usuario desea establecer para un elemento o nodo.
Sintaxis (obtener contenido de texto)
La sintaxis generalizada para devolver el texto de un elemento o nodo a través del ' contenido del texto La propiedad se indica aquí:
elemento. contenido del texto | nodo. contenido del textoValor de retorno: El ' contenido del texto 'La propiedad devuelve el' texto ”de un elemento o nodo con espaciado pero sin sus etiquetas HTML internas.
Ahora utilice las sintaxis definidas anteriormente de manera práctica para acceder y manipular la propiedad 'textContent'.
¿Cómo acceder y manipular la propiedad “textContent” del elemento HTML DOM en JavaScript?
De manera similar a las propiedades “innerHTML” e “innerText”, el “ contenido del texto La propiedad también permite a los usuarios configurar, acceder y modificar fácilmente el texto del elemento deseado. Esta sección realiza todas estas operaciones en un elemento utilizando los ejemplos que se indican a continuación.
Ejemplo 1: Aplicar la propiedad “textContent” para acceder al texto del elemento/nodo
Este ejemplo aplica la propiedad 'textContent' para devolver el texto de un elemento o nodo en particular, incluidos todos sus hijos.
código HTML
< div identificación = 'miDiv' el ratón por encima = 'obtenerTexto()' estilo = 'borde: 3px negro sólido; ancho: 400px; relleno: 5px 5px; margen: automático;' >< h1 > Primer encabezado < / h1 >
< h2 > Segundo encabezado < / h2 >
< h3 > Tercer título < / h3 >
< h4 > Cuarto título < / h4 >
< h5 > Quinto título < / h5 >
< h6 > Sexto título < / h6 >
< / div >
En las líneas de código HTML anteriores:
- El ' 'La etiqueta que tiene una identificación 'myDiv' crea un elemento div que tiene el estilo de las siguientes propiedades: borde, ancho, relleno (superior e inferior, izquierda y derecha) y margen. Adjunta también el “ el ratón por encima ” evento que invoca el “ obtenerTexto() ”funciona cuando el usuario pasa el mouse sobre él.
- Dentro del div, todas las etiquetas de encabezado especificadas (h1, h2, h3, h4, h5 y h6) insertan los elementos de encabezado de acuerdo con sus niveles especificados.
Código JavaScript
< guion >
función obtenerTexto ( ) {
era elem = documento. obtenerElementoPorId ( 'miDiv' ) ;
alerta ( elemento. contenido del texto ) ;
}
guion >En el bloque de código JavaScript escrito anteriormente:
- Defina una función llamada “ obtenerTexto() ”.
- Dentro de esta función, la variable “elem” aplica el “ obtenerElementoById() 'Método para acceder al elemento div a través de su id.
- El ' alerta() El método 'crea un cuadro de alerta que utiliza el' contenido del texto 'Propiedad para devolver el texto del div principal junto con todos sus dependientes.
Producción
El siguiente resultado muestra un cuadro de alerta que muestra el contenido de texto del elemento div:
Ejemplo 2: Aplicar la propiedad “textContent” para reemplazar un elemento de contenido de texto, incluidos sus descendientes
Este ejemplo muestra cómo la propiedad 'textContent' reemplaza todos los hijos de un elemento mientras modifica su texto.
código HTML
< centro >
< identificación h1 = 'mi cabeza' al hacer clic = 'modificarTexto()' >< b > Este b > es < durar > Título < durar > < i > Elemento i > h1 >
centro >En las líneas de código mencionadas anteriormente:
- El ' La etiqueta 'agrega un elemento de encabezado de nivel 1 con un' adjunto al hacer clic ” evento que invoca el “ modificarTexto() ”funciona cuando el usuario hace clic en él.
- El elemento de encabezado también contiene el ' ”, “
', y ' ”Etiqueta como sus descendientes. La etiqueta “ ” se usa para poner en negrita la cadena adjunta, la etiqueta “” sin ninguna propiedad de estilo se utiliza para no aplicar ningún estilo a la cadena dada y la etiqueta “ ” se usa para mostrar la cadena especificada en cursiva.
Código JavaScript
< guion >
donde h1 = documento. obtenerElementoPorId ( 'mi cabeza' ) ;
consola. registro ( h1 ) ;
función modificarTexto ( ) {
h1. contenido del texto = '¡Bienvenido a Linuxhint!' ;
consola. registro ( h1 )
}
guion >En el código JavaScript anterior:
- La variable 'h1' utiliza el ' documento.getElementById() 'Método para acceder al elemento de encabezado a través de su identificación asignada.
- El ' consola.log() El método 'muestra el elemento de encabezado al que se accede en la consola antes de cambiar su contenido.
- La función denominada “ modificarTexto() ' utiliza el ' contenido del texto 'Propiedad para modificar el texto del elemento de encabezado recuperado.
- El último método “console.log()” vuelve a mostrar el valor “h1” después de la modificación.
Producción
La consola muestra claramente que todos los elementos secundarios del elemento de encabezado dado han sido reemplazados con el texto recién especificado al hacer clic en él:
Ejemplo 3: Aplicar la propiedad 'textContent' para modificar el texto del elemento secundario
Este ejemplo utiliza la propiedad 'textContent' para modificar el texto del elemento secundario del elemento específico.
código HTML
< div identificación = 'miDiv' estilo = 'borde: 3px negro sólido; ancho: 400px; relleno: 5px 5px; margen: automático;' >
< centro >
< botón identificación = 'btn' el ratón por encima = 'cambiarTexto()' > Botón antiguo < / botón >
< / centro >
< / div >En este escenario:
- El elemento 'div' tiene un elemento 'botón' que se crea con la ayuda del botón '
' etiqueta. - El elemento del botón contiene además una identificación asignada y un ' el ratón por encima ” evento que llama al “ cambiarTexto() ”funciona cuando el mouse pasa sobre él.
Código JavaScript
< guion >
era elemento padre = documento. obtenerElementoPorId ( 'miDiv' ) ;
objetivo var = documento. obtenerElementoPorId ( 'btn' ) ;
fue encontrarme = elementopadre. contiene ( objetivo ) ;
si ( elementopadre. contiene ( objetivo ) == verdadero ) {
consola. registro ( Encuentrame ) ;
cambio de funciónTexto ( ) {
objetivo. contenido del texto = 'Botón nuevo' ;
}
} demás {
consola. registro ( 'No existe' )
}
guion >En el fragmento de código anterior:
- La variable 'parentElement' aplica el ' obtenerElementoById() 'Método para acceder al elemento div principal. La variable 'destino' también utiliza el método 'getElementById()' para recuperar el elemento del botón agregado usando su identificación.
- La variable 'find_me' utiliza el ' contiene() 'Método para comprobar si el elemento del botón de destino es hijo del div o no. Este método devolverá “ verdadero ” para “sí”; de lo contrario, “falso”.
- El ' si no La declaración define un bloque de código.
- Si el elemento objetivo es el hijo del elemento padre, entonces el ' cambiarTexto() La función cambiará su texto mediante el botón ' contenido del texto ' propiedad. De lo contrario, el bloque de código 'else' se ejecutará para mostrar el mensaje especificado usando el botón ' consola.log() ' método.
Producción
La consola muestra un “ verdadero 'Valor booleano que verifica que el elemento del botón es hijo del div dado y luego su texto cambia al pasar el mouse sobre él:
¿Diferencia entre las propiedades textContent, InnerText e InnerHTML?
Generalmente, el “ contenido del texto ”, “ texto interno ', y ' HTML interno Las propiedades tratan con el texto de un elemento o nodo en la forma de configurarlo y obtenerlo. Sin embargo, estas propiedades son diferentes entre sí según algunos factores. En este apartado se destacan las principales diferencias entre todos ellos:
Términos 'contenido del texto' 'texto interno' “HTML interno” Tipo de devolución Devuelve el texto de un elemento, incluidos todos sus elementos secundarios (etiquetas de formato), texto oculto CSS y espacio. No devuelve las etiquetas HTML de un elemento. Devuelve el contenido de texto del elemento HTML de destino con todos sus elementos secundarios (etiquetas de formato). No devuelve espacio, texto oculto CSS ni etiquetas HTML, excepto