¿Diferencia entre texto interno, HTML interno y valor?

Los siguientes ejemplos hacen referencia al siguiente fragmento de HTML:

<div id="test">
   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>

El siguiente JavaScript hará referencia al nodo:

var x = document.getElementById('test');

element.innerHTML

Establece u obtiene la sintaxis HTML que describe los descendientes del elemento.

x.innerHTML
// => "
// =>   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
// => "

Esto es parte de la Especificación de serialización y análisis DOM del W3C . Tenga en cuenta que es una propiedad de Elementlos objetos.

node.innerText

Establece u obtiene el texto entre las etiquetas de inicio y fin del objeto.

x.innerText
// => "Warning: This element contains code and strong language."

• innerTextfue introducido por Microsoft y durante un tiempo no fue compatible con Firefox. En agosto de 2016, WHATWGinnerText lo adoptó y se agregó a Firefox en v45.
• innerTextle brinda una representación del texto que tiene en cuenta el estilo y que intenta coincidir con lo que representa el navegador, esto significa:
  • innerTextse aplica text-transformy white-spacerige
  • innerTextrecorta los espacios en blanco entre líneas y agrega saltos de línea entre elementos
  • innerTextno devolverá texto para elementos invisibles
• innerTextregresará textContentpara elementos que nunca se representan como <style />y `
• Propiedad de Nodelos elementos

node.textContent

Obtiene o establece el contenido de texto de un nodo y sus descendientes.

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

Si bien este es un estándar W3C , no es compatible con IE < 9.

• No conoce el estilo y, por lo tanto, devolverá contenido oculto por CSS
• No desencadena un reflujo (por lo tanto, tiene más rendimiento)
• Propiedad de Nodelos elementos

node.value

Este depende del elemento al que te hayas dirigido. Para el ejemplo anterior, xdevuelve un objeto HTMLDivElement , que no tiene una valuepropiedad definida.

x.value // => null

Las etiquetas de entrada ( <input />), por ejemplo, definen una valuepropiedad , que se refiere al "valor actual en el control".

<input id="example-input" type="text" value="default" />
<script>
  document.getElementById('example-input').value //=> "default"
  // User changes input to "something"
  document.getElementById('example-input').value //=> "something"
</script>

De los documentos :

Nota: para ciertos tipos de entrada, es posible que el valor devuelto no coincida con el valor ingresado por el usuario. Por ejemplo, si el usuario ingresa un valor no numérico en un archivo <input type="number">, el valor devuelto podría ser una cadena vacía.

Guión de muestra

A continuación se muestra un ejemplo que muestra el resultado del HTML presentado anteriormente:

var properties = ['innerHTML', 'innerText', 'textContent', 'value'];

// Writes to textarea#output and console
function log(obj) {
  console.log(obj);
  var currValue = document.getElementById('output').value;
  document.getElementById('output').value = (currValue ? currValue + '\n' : '') + obj; 
}

// Logs property as [propName]value[/propertyName]
function logProperty(obj, property) {
  var value = obj[property];
  log('[' + property + ']'  +  value + '[/' + property + ']');
}

// Main
log('=============== ' + properties.join(' ') + ' ===============');
for (var i = 0; i < properties.length; i++) {
  logProperty(document.getElementById('test'), properties[i]);
}

<div id="test">
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>

Sep 26 '2013 15:09 fny