strong - document.createtextnode javascript

¿Qué es un nodo de texto, sus usos?//document.createTextNode()

Question

Así que he estado reemplazando lentamente gran parte de mi código jQuery normal con javascript nativo, y encontré el document.createTextNode() y la document.createTextNode() relacionada de MDN . Después de leer estoy un poco confundido con un nodo de texto.

Entiendo que se puede usar para colocar texto dentro de div , pero estoy seguro de que hay algo más que "usarlo para poner palabras dentro de los elementos". En vista de esto, parece que un nodo de texto también puede referirse al texto de los atributos.

¿Alguien puede proporcionar un poco más de una definición de qué es un nodo de texto y para qué se utiliza? ¿Hay usos prácticos para esto que no sean cosas básicas como esta?

var div = document.createElement(''div'');
var text = document.createTextNode(''Y HALO THAR'');
div.appendChild(text);

Answer 1

Todo el texto HTML visible en una página (excepto texto en elementos de formulario u objetos integrados personalizados) está en nodos de texto. La página consta de varios tipos diferentes de nodos (puede ver una lista de los diferentes tipos de nodos aquí: https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType ), algunos de los cuales pueden tener nodos hijos y otros no. Por ejemplo, un div es un nodo ELEMENT que puede contener nodos secundarios. Esos nodos secundarios pueden ser otros nodos ELEMENT o pueden ser nodos TEXT o nodos COMENTARIO u otros tipos de nodos.

Cuando establece la propiedad .innerHTML de un nodo de elemento, crea los nodos apropiados y los convierte en nodos secundarios del elemento en el que establece la propiedad innerHTML. Si hay texto en el innerHTML que estableció, entonces se crearán nodos de texto para contenerlo.

DOCUMENT_NODE , ELEMENT_NODE y TEXT_NODE son los tipos de nodo más comunes y están en todas las páginas que tienen texto.

En su ejemplo de código:

var div = document.createElement(''div'');
var text = document.createTextNode(''Y HALO THAR'');
div.appendChild(text);

Esto crea un nodo de texto y lo coloca en el div que creaste. Genera la misma estructura DOM que esta:

var div = document.createElement(''div'');
div.innerHTML = ''Y HALO THAR'';

En este último caso, el sistema crea el nodo de texto para usted.

En la programación javascript simple (jQuery tiende a proteger a los desarrolladores de nodos que no son del tipo ELEMENT_NODE ), encontrará nodos de texto cada vez que recorra los nodos secundarios de un elemento que tiene texto. Deberá verificar el .nodeType de cada niño para saber si es otro elemento o un nodo de texto o algún otro tipo de nodo.

En general, no hay muchas razones para manipular los nodos de texto directamente, ya que a menudo se puede usar la propiedad .innerHTML nivel superior de .innerHTML más simple. Pero, para darle una idea, aquí hay un par de razones por las que podría querer tratar directamente con los nodos de texto:

1. Desea cambiar algún texto sin afectar ninguno de los elementos que lo rodean. .innerHTML crea todos los elementos nuevos para los elementos afectados, lo que mata cualquier controlador de eventos que se haya establecido en ellos, pero la configuración de .nodeValue en un nodo de texto no hace que los elementos se .nodeValue a crear.

2. Si desea buscar solo el texto en un documento sin el marcado HTML resultante y saber exactamente dónde se encuentra cada parte del texto en la jerarquía del DOM, puede buscar todos los nodos de texto. Por ejemplo, si estuviera haciendo una búsqueda de texto del documento y luego destacando el texto encontrado, probablemente buscaría los nodos de texto directamente.

3. Desea mostrar un texto sin ningún riesgo de seguridad que podría contener otro marcado que el navegador analizaría e interpretaría si usara .innerHTML . Por lo tanto, crea un nodo de texto y establece el valor de su texto y el navegador no interceptará ningún HTML en él. Los navegadores modernos también pueden usar la propiedad .textContent de un elemento en lugar de .innerHTML para resolver este problema también.