Así que me he ido reemplazando poco a poco a una gran cantidad de la normal de mi código jQuery con javascript nativas, y se me ocurrió sobre la document.createTextNode() y relacionados con la MDN documentación. Después de leer estoy un poco confundido lo que es un nodo de texto es.

Entiendo que puede ser utilizado para poner texto dentro de div‘s, pero estoy seguro de que hay un poco más que simplemente «se usa para poner las palabras en el interior de los elementos». Mirando esto, aparece un nodo de texto también puede referirse al texto de los atributos así.

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

var div = document.createElement('div');
var text = document.createTextNode('Y HALO THAR');
div.appendChild(text);
  • sobre todo, es cómo hemos construido con HTML dinámico antes de innerHTML trabajado de forma fiable.
  • Ahhh, ok! Pude ver lo que requieren de una solución como esta.
  • También es más seguro, especialmente cuando la entrada del usuario se refiere.
  • además, hemos jQuery hoy en día. jQuery es una cosa buena que tienen 🙂
  • Me gustaría señalar que si bien es posible que se sienta más «nativo» para utilizar cosas como el árbol de gran tamaño de los bucles de utilizar el documento.createElement, appendChild, y createTextNode, cuando se hace esto en el nivel macro, innerHTML, en realidad puede ser más rápido (pero tiene riesgos de seguridad en algunos casos, como Xotic dijo). La lógica es que una llamada innerHTML una vez que pasa la información directamente a un especializado C++ analizador, mientras que el manual de crear/añadir que está haciendo el trabajo manual en un motor de Javascript; son rápidos, pero todavía no es tan rápido como el navegador de código.
  • Wow, gran información para saber @Katana314, gracias! Si estamos hablando de no-entrada de usuario, definitivamente, voy a buscar a empezar a usar .innerHTML lugar.
  • en relación con la actuación de los diferentes métodos, consulte el jsperf
  • Xotic: Sí, algo así como un único elemento, es mucho más lento. En los casos de la lógica básica de la creación de uno o dos elementos, prefiero createElement (y hace el código más limpio). Sin embargo, si usted está preparando todo un popup con decenas de divs, basado en una petición AJAX, y tiene la opción de estructurar el código HTML de a poco en Javascript usando los datos suministrados, o simplemente la creación de todo el contenido HTML a la vez, es probable que funcione mejor hacerlo todo a la vez como HTML. Además, HTML es sin duda más fáciles de leer que Javascript que poco a poco se crea el lenguaje HTML.
  • ¿cómo se innerHTML menos seguro que createElement/createTextNode?
  • Consulte consideraciones de Seguridad de innerHTML, createTextNode no sufren este problema.
  • supongo que innerHTML es una gran arma, pero no se debe brazo maniacs con nada. createElement hace las mismas cosas que innerHTML, es más evidente cuando el código algo tonto larga mano/de forma explícita…
  • createElement no hacer las mismas cosas como innerHTML
  • Creo que todo se reduce a lo que se está utilizando para rellenar estos elementos. Si usted está obteniendo los valores de los estados DB de entrada que no se cambia por parte de los usuarios, entonces yo diría que es bastante seguro. Cuando usted está utilizando .innerHTML() para poner en HTML de una cadena que se obtiene de los valores de un perfil de usuario/ correo (por ejemplo), entonces usted podría tener los usuarios que entran posiblemente malicioso JS si usted usa .innerHTML(). Veo que ambos son útiles, seguro.
  • Usted puede XSS ti mismo, pero [F12] es más fácil… mi punto es que el usuario de entrada deben ser lavadas, y si se hace eso, entonces innerHTML es inofensivo. Yo nunca me echo atrás de la onu-sanitizado de datos y contar con el uso de textContent o textNodes para proteger a todos en todos los lugares, los dispositivos y las circunstancias, como la no-js usuarios…
  • A la derecha, usted debe desinfectar los datos antes de cada vez que se guarda, sin embargo esto no es siempre el caso. Yo voy a adivinar que la mayoría de las veces, si un usuario no tiene JS activado, no vas a tener que preocuparse acerca de XSS (en general).
  • etiquetas de estilo puede hacer ping a los sitios externos, como puede imgs, mientras que las etiquetas meta puede redirigir y flash y java se puede, bueno, usted consigue la idea; XSS es mucho más que onmouseover ataques…
  • Cierto, cierto. Lo digo porque en este ejemplo, si un usuario no tiene JS entonces ellos no van a tener que rellenar la información para ellos.
  • En realidad, hay casos donde el uso de createDocumentFragment y cloneNode son significativamente más rápido que el innerHTML, si vas a crear miles de nodos con la misma estructura (como hacer un DOM número de línea o algo así) que es más rápido para crear un documentFragment, anexar un centenar de elementos y el clon que documentFragment un montón de veces. DocumentFragments y cloneNode están locos de rendimiento.
  • Gracias. Yo ni siquiera sabía acerca de esas funciones.

InformationsquelleAutor AlbertEngelB | 2013-06-19

1 Comentario

  1. 58

    Todo esto se puede ver de texto HTML en una página (salvo el texto de los elementos de formulario o personalizados, objetos incrustados) es en los nodos de texto. La página consta de un número de diferentes tipos de nodos (se puede ver un listado de los diferentes tipos de nodos de aquí: https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType), algunos de los cuales pueden tener nodos hijos y algunos de los cuales no se puede. Por ejemplo, un div es un nodo de ELEMENTO que puede contener nodos secundarios. Los nodos secundarios pueden ser otros nodos de ELEMENTO o pueden ser nodos de TEXTO o COMENTARIO nodos u otros tipos de nodos.

    Cuando se establece la .innerHTML propiedad de un nodo de elemento, crea los nodos adecuados y les hace el niño de los nodos del elemento que establece la propiedad innerHTML en. Si hay texto en el innerHTML se establece, entonces los nodos de texto será creado para sostenerlo.

    DOCUMENT_NODE, ELEMENT_NODE y TEXT_NODE son los más comunes tipos de nodo y en cada página que tiene el texto.

    En el 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 la pone en el div que usted creó. Genera el mismo DOM estructura como esta:

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

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


    En formato de programación en javascript (jQuery tiende para proteger a los desarrolladores de los nodos que no son de tipo ELEMENT_NODE), se encontrará con los nodos de texto en cualquier momento que usted camina el niño nodos de un elemento que tiene el texto en ella. Usted tendrá que comprobar que el .nodeType de cada niño para saber si se trata de otro elemento o un nodo de texto o algún otro tipo de nodo.


    En general, no hay una gran cantidad de razones para manipular los nodos de texto directamente como a menudo puedes usar el nivel más alto .innerHTML propiedad más simplemente. Pero, para dar una idea, aquí hay un par de razones es posible que desee para tratar directamente con los nodos de texto:

    1. Desea cambiar algún texto sin afectar a ninguno de los elementos de su alrededor. .innerHTML crea todos los nuevos elementos para el afectado elementos que mata a los controladores de eventos que podrían haber sido establecidas, pero la configuración de la .nodeValue en un nodo de texto no causa ningún elemento para obtener recreado.

    2. Si quieres encontrar el texto en un documento sin que ninguno de los que resulta el lenguaje de marcado HTML y saber exactamente donde cada fragmento de texto que está en el DOM hieararchy, usted puede buscar todos los nodos de texto. Por ejemplo, si estaban haciendo una búsqueda de texto del documento y, a continuación, resaltar texto encontrado, probablemente de búsqueda de nodos de texto directamente.

    3. Desea mostrar algunas de texto sin ningún tipo de riesgos para la seguridad que puede contener otros de marcado que el navegador de analizar y de interpretar si usted utiliza .innerHTML. Así, se crea un nodo de texto y establecer el valor de su texto y el navegador no interpet HTML en ella. Los navegadores modernos también pueden utilizar la .textContent propiedad de un elemento en lugar de .innerHTML para resolver este problema.

    • En los navegadores modernos vale la pena mencionar textContent, «se recomienda no usar innerHTML cuando la inserción de texto sin formato; en su lugar, utilice el elemento.textContent. Esto no interpretar el pasado de contenido como HTML, pero en su lugar se inserta como texto sin formato.»
    • info agregada al punto 3.
    • «Todo esto se puede ver el texto de una página en los nodos de texto.» No, también podría venir de la content propiedad en un ::before o ::after regla CSS.
    • «Todo esto se puede ver el texto de una página en los nodos de texto» No, también podría venir en forma de ‘valor’ attrubute de <submit> o <input type='submit' alt= texto de imágenes. title= también es visible con el ratón sobre

Dejar respuesta

Please enter your comment!
Please enter your name here