nodeValue vs innerHTML y textContent. ¿Como escoger?

Estoy usando js simples para alterar el texto interno de un elemento de etiqueta, y no estaba seguro de por qué debería usar innerHTML o nodeValue o textContent. No necesito crear un nuevo nodo o cambiar los elementos HTML ni nada, solo reemplace el texto. Aquí hay un ejemplo del código:

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

Miré a través de la fuente jQuery, y usa nodeValue exactamente una vez, pero innerHTML y textContent varias veces. Luego encontré esta prueba jsperf que indica que firstChild.nodeValue es significativamente más rápido. Al menos eso es lo que interpreto que significa.

Si firstChild.nodeValue es mucho más rápido, ¿cuál es el problema? ¿No es ampliamente compatible? ¿Hay algún otro problema?

Diferencias entre textContent / innerText / innerHTML en MDN.

Y una respuesta de Stackoverflow sobre innerText / nodeValue.

Resumen

1. innerHTML analiza el contenido como HTML, por lo que lleva más tiempo.
2. nodeValue usa texto directo, no analiza HTML y es más rápido.
3. textContent usa texto directo, no analiza HTML y es más rápido.
4. innerText tiene en cuenta los estilos. No obtendrá texto oculto, por ejemplo.

innerTextno existía en Firefox hasta FireFox 45 según caniuse, pero ahora es compatible con todos los principales navegadores.

.textContentsalidas text/plainmientras .innerHTMLsalidastext/html .

Ejemplo rápido:

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

salida: <a href="http://google.com"> google </a>

example.innerHTML = '<a href="https://google.com">google</a>';

salida: google

Puede ver desde el primer ejemplo que la salida de tipo text/plainno es analizada por el navegador y da como resultado la visualización del contenido completo. La salida del tipo text/htmlle dice al navegador que lo analice antes de mostrarlo.

MDN innerHTML , MDN textContent , MDN nodeValue

Los dos que conozco bien y con los que trabajo son innerHTML y textContent .

Uso textContent cuando solo quiero cambiar el texto de un párrafo o encabezado de la siguiente manera:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent = 'My New Title!'
  paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

Entonces, textContent solo cambia el texto, pero no analiza HTML, como podemos ver en las etiquetas visibles en texto plano en el resultado allí.

Si queremos analizar HTML, usamos innerHTML como este:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

Entonces, ese segundo ejemplo analiza la cadena que asigno a la propiedad innerHTML del elemento DOM como HTML.

Esto es increíble y una gran vulnerabilidad de seguridad :)

(busque XSS si desea saber sobre seguridad para esto)

innerText es aproximadamente lo que obtendría si seleccionara el texto y lo copiara. Los elementos que no se representan no están presentes en innerText.

textContent es una concatenación de los valores de todos TextNodes en el subárbol. Ya sea prestado o no.

Aquí hay una gran publicación que detalla las diferencias

innerHTML no debe incluirse en una comparación con innerText o textContent, ya que es totalmente diferente, y realmente debe saber por qué :-) Búsquelo por separado

[Nota: esta publicación trata más sobre compartir datos específicos que podrían ayudar a alguien que decirle a la gente qué hacer]

En caso de que alguien se pregunte cuál es el más rápido hoy: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( para la segunda prueba, el contenido del tramo es texto sin formato, los resultados pueden cambiar según su contenido)

¡Parece que .innerHtmles el gran ganador en términos de velocidad pura!

(NOTA: solo estoy hablando de velocidad aquí, ¡es posible que desee buscar otros criterios antes de elegir cuál usar!)

Propiedad Element.innerHTML seto getcódigo HTML del elemento.

Ej: tenemos una <h1>etiqueta y un estilo fuerte con ella:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> Para que el getcontenido del elemento tenga id igual a "myHeader", haremos lo mismo:

var element = document.getElementById("myHeader");
element.innerHTML

Resultado devuelto:

<strong>My Header</strong> Normal Text`

Para "establecer" nuevo contenido (valor) para este elemento, el código estará aquí:

Element.innerHTML = "My Header My Text";

Por lo tanto, esta propiedad no solo funciona con texto sin formato, sino que está destinada a pasar o copiar código HTML.

=> No debemos usarlo.

Sin embargo, muchos programadores (incluido yo mismo) usan este atributo para insertar texto en una página web, y este método conlleva un riesgo potencial:

1. Operación incorrecta: insertar cada texto solo a veces elimina todos los demás códigos HTML del elemento insertado.
2. Por seguridad: por supuesto, los dos ejemplos anteriores son completamente inofensivos, incluso si usar la etiqueta todavía no es un problema porque el estándar HTML5 ha impedido la ejecución de la línea de comando dentro de la etiqueta. cuando se inserta en la página web a través del atributo innerHTML. Ver esta regla aquí .

Debido a esta razón, utilizando innerHTMLno es recomendable cuando se inserta texto sin formato, en lugar de utilizar textContent. lostextContent propiedad no entenderá que el código que pasa es una sintaxis HTML, pero solo un texto 100%, ni más ni menos.

El resultado regresa si se usa textContenten el ejemplo anterior:

My Header My Text