La propiedad textContent de JavaScript funciona para establecer y obtener el contenido de texto de la página. Se utiliza para pasar y mostrar el contenido de texto de cierta información, etiquetas y datos de gran tamaño y sus nodos. TextContent varía del valor de nodo de la etiqueta de secuencia de comandos y devuelve contenido de nodos secundarios de los múltiples tipos de datos.
Si el nodo es un nodo de texto, una instrucción de procesamiento o un comentario de etiqueta, entonces javascript textContent obtiene o establece el texto. TextContent muestra la concatenación del textContent de cada nodo secundario. Muestra las instrucciones de procesamiento y comentarios a los otros tipos de nodos.
Sintaxis
Hay dos sintaxis disponibles para el contenido de texto JavaScript. La primera sintaxis se utiliza para establecer el texto de un nodo y la segunda sintaxis se utiliza para recuperar el texto del nodo.
Sintaxis 1:
La siguiente sintaxis se utiliza para configurar el texto del nodo utilizando contenido textual.
java hacer mientras
Node_element.textContent = information;
Sintaxis 2:
La siguiente sintaxis utiliza contenido textual para obtener el texto del nodo.
Node_element.textContent;
Valor de retorno:
- Una cadena contiene el texto del nodo de salida y su nodo secundario. El resultado muestra un valor nulo si un elemento es un documento o tipo de documento.
- Los nodos secundarios se reemplazan por un único nodo de texto utilizando el conjunto del atributo textContent. El atributo tiene una cadena específica como contenido.
Ejemplos
Los siguientes ejemplos muestran el conjunto y obtienen los distintos tipos de información utilizando el atributo textContent.
Ejemplo 1
El siguiente ejemplo utiliza contenido de texto en javascript para configurar la información. Los datos del nodo muestran el texto de las etiquetas.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes</h4> Click Here! function display() { var ele = document.getElementById('textContent_information'); ele.textContent = ' <i> JavaScript </i> <h2> Set or get the content of node </h2>'; } Producción
La siguiente imagen muestra cómo configurar los datos utilizando el nodo de contenido.
Ejemplo 2
El siguiente ejemplo utiliza contenido de texto en javascript para obtener la información. Podemos obtener el valor del botón de la función de clic.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Get node information for child javascript nodes </h4> Get node information for child javascript nodes <br> Click the Button! var text_in = document.getElementById('myData1').textContent; function fdisplay() { document.getElementById('textContent_information').textContent = text_in; } Producción
np.único
La siguiente imagen muestra cómo configurar los datos utilizando el nodo de contenido.
Ejemplo 3
El siguiente ejemplo utiliza contenido de texto en javascript para obtener la información. Podemos obtener el valor del botón de la función de clic.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes </h4> Click the Button! function fdisplay() { var text_in = document.getElementById('value').textContent; document.getElementById('textContent_information').textContent = text_in; } Producción
La siguiente imagen muestra cómo configurar los datos utilizando el nodo de contenido.
Ejemplo4
El siguiente ejemplo utiliza contenido de texto en el valor del botón para obtener y configurar la información. Podemos obtener el valor después de hacer clic en el botón.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <p id="info"> Get node information for child javascript nodes </p> Click the Button! <br> See the value! function fdisplay() { document.getElementById('value').textContent = 'the information of the node has been changed using click function!'; var text_in = document.getElementById('info').textContent; document.getElementById('values').textContent = text_in; } Producción
La siguiente imagen muestra cómo configurar los datos utilizando el nodo de contenido.
Ejemplo5
El siguiente ejemplo se utiliza para obtener y configurar la información utilizando InnerHtml, InnerText y contenido de texto en el valor del botón. Podemos obtener la diferencia en los datos de salida después de hacer clic en el botón.
java int como cadena
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> Click the innerHtml Button! Click the innerText Button! Click the textcontent Button! function fdisplay() { document.getElementById('finfo').innerHTML = ' <b> textContent in JavaScript using node </b> the information of the node has been changed using click function!'; } function sdisplay() { document.getElementById('sinfo').innerText = ' <b> textContent in JavaScript using node </b> <br> the information of the node has been changed using click function!'; } function tdisplay() { document.getElementById('tinfo').textContent = ' <b> textContent in JavaScript using node </b> <br> textContent in JavaScript using node <br> the information of the node has been changed using click function!'; } Producción
La siguiente imagen muestra cómo configurar los datos utilizando el nodo de contenido.
Ejemplo 6
El siguiente ejemplo se utiliza para obtener los datos de la lista y establecer la información utilizando contenido de texto en el valor del botón al hacer clic. Podemos obtener los datos de la lista y otra información de etiquetas.
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> <li id="std1">David</li> <li id="std2">Sai</li> <li id="std3">Ruta</li> <li id="std4">Saniya</li> <li id="std5">Kevin</li> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById('students').textContent; document.getElementById('tinfo').textContent = students; } Producción
La siguiente imagen muestra cómo configurar los datos utilizando el nodo de contenido.
Ejemplo 7
El contenido del texto no admite datos vacíos si la información o la cadena están vacías. Muestra la cadena vacía como un valor.
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById('students').textContent; console.log(students); if(students != ''){ document.getElementById('tinfo').textContent = 'child node does not available of the student parent node.'; }else{ document.getElementById('tinfo').textContent = 'child node is available of the student parent node.'; } } Producción
La siguiente imagen muestra cómo obtener los datos mediante el nodo de contenido de texto.
Punto clave del contenido del texto en javascript
- Cuando la información de JavaScript elimina automáticamente el HTML, la utilización del contenido de texto es segura.
- El contenido del texto y la información incluyen los espacios y las etiquetas de los elementos internos. El atributo internalHTML lo devolverá.
- El atributo insideText devuelve solo texto sin espacios ni etiquetas de elementos internos. La propiedad textContent devuelve texto que incluye espacios pero excluye etiquetas de elementos internos.
- Los valores de todos los nodos de texto en el subárbol se combinan y configuran para el contenido de texto y se obtienen del contenido de texto. Si un nodo no tiene hijos, la cadena está vacía.
- El texto interno devuelve texto que es legible por humanos y admite cualquier CSS. El contenido del texto es difícil de leer cuando se utilizan etiquetas html en los datos.
- Cuando se establece una propiedad en un nodo, se eliminan todos sus elementos secundarios y un único nodo de texto ocupa su lugar con el valor especificado.
Conclusión
El contenido del texto muestra múltiples tipos de información. La etiqueta html requiere información y muestra los datos de la lista mediante un único método.