Quelles sont les principales différences entre « innerText », « innerHTML », « textContent » et « value » en JavaScript ?

Explorer les distinctions entre innerText, innerHTML et value

Comprendre les différences

En JavaScript, les attributs innerText, innerHTML et value proposent différentes manières d'interagir avec le contenu HTML d'une page Web. Chacun de ces attributs a ses propres fonctionnalités et cas d'utilisation spécifiques.

innerHTML : Représentation HTML

La propriété innerHTML reflète la syntaxe HTML décrivant les descendants d'un élément. Il fournit une représentation du contenu HTML dans les balises d'ouverture et de fermeture de l'élément.

innerText : Texte rendu

La propriété innerText capture le texte rendu dans un élément. Il présente le contenu tel qu'il apparaît à l'écran, en tenant compte des styles appliqués et des règles d'espacement. Plus précisément, innerText :

• Ignore les balises de script et les feuilles de style CSS
• Coupe les espaces et ajoute des nouvelles lignes entre les éléments
  -Applique la transformation du texte et les règles d'espacement

textContent : texte brut

textContent récupère le contenu texte d'un nœud et de ses descendants. Contrairement à innerText, il préserve les espaces et ignore les styles appliqués ou les propriétés d'affichage. Cela se traduit par une représentation plus littérale du contenu.

value : attribut spécifique à l'élément

L'attribut value s'applique principalement aux entrées de formulaire, comme les zones de texte et les cases à cocher. Il représente la valeur actuellement stockée dans le contrôle. Notamment :

• Pour les éléments d'entrée, la valeur contient la chaîne saisie par l'utilisateur.
• Pour les éléments sélectionnés, la valeur contient la valeur de l'option sélectionnée.

Exemple de script de comparaison

Le script JavaScript suivant présente les différences entre ces attributs :

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

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

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

Lorsqu'il est appliqué à l'extrait HTML ci-dessous, le script génère ce qui suit dans la console :

<div>

Sortie :

[innerHTML][
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
][/innerHTML]
[innerText]Warning: This element contains code and strong language.[/innerText]
[textContent]
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
[/textContent]
[value]null[/value]

Cette sortie montre comment innerText renvoie le texte rendu, innerHTML la représentation HTML complète, textContent le texte brut incluant les espaces et la valeur (puisque test est un élément div) est nul.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!