innerText et textContent

Penchons-nous maintenant sur deux propriétés analogues à innerHTML : innerText pour Internet Explorer et textContent pour les autres navigateurs.

innerText

La propriété innerText a aussi été introduite dans Internet Explorer, mais à la différence de sa propriété sœur innerHTML, elle n'a jamais été standardisée et n'est pas supportée par tous les navigateurs. Internet Explorer (pour toute version antérieure à la neuvième) ne supporte que cette propriété et non pas la version standardisée que nous verrons par la suite.

Le fonctionnement d'innerText est le même qu'innerHTML excepté le fait que seul le texte est récupéré, et non les balises. C'est pratique pour récupérer du contenu sans le balisage, petit exemple :

<body>

<p>Un peu de texte <a>et un lien</a></p>

</div>

var div = document.getElementById('myDiv');

alert(div.innerText);

</script>

</body>

Ce qui nous donne bien « Un peu de texte et un lien », sans les balises :

Le texte est affiché sans les balises HTML

textContent

La propriété textContent est la version standardisée d'innerText ; elle est reconnue par tous les navigateurs à l'exception d'Internet Explorer, bien que la version 9 la prenne aussi en charge. Le fonctionnement est évidemment le même. Maintenant une question se pose : comment faire un script qui fonctionne à la fois pour Internet Explorer et les autres navigateurs ? C'est ce que nous allons voir !

Tester le navigateur

Il est possible via une simple condition de tester si le navigateur prend en charge telle ou telle méthode ou propriété.

<body>

<p>Un peu de texte <a>et un lien</a></p>

</div>

var div = document.getElementById('myDiv');

var txt = '';

if (div.textContent) { // « textContent » existe ? Alors on s'en sert !

txt = div.textContent;

} else if(div.innerText) { // « innerText » existe ? Alors on doit être sous IE.

txt = div.innerText + ' [via Internet Explorer]';

} else { // Si aucun des deux n'existe, cela est sûrement dû au fait qu'il n'y a pas de texte

txt = ''; // On met une chaîne de caractères vide

}

alert(txt);

</script>

</body>

Il suffit donc de tester par le biais d'une condition si l'instruction fonctionne. Si textContent ne fonctionne pas, pas de soucis, on prend innerText :

La fenêtre s'affiche avec Internet Explorer

Cela dit, ce code est quand même très long et redondant. Il est possible de le raccourcir de manière considérable :

txt = div.textContent || div.innerText || '';

En résumé

Le DOM va servir à accéder aux éléments HTML présents dans un document afin de les modifier et d'interagir avec eux.
L'objet window est un objet global qui représente la fenêtre du navigateur. document, quant à lui, est un sous-objet de window et représente la page Web. C'est grâce à lui que l'on va pouvoir accéder aux éléments HTML de la page Web.
Les éléments de la page sont structurés comme un arbre généalogique, avec l'élément <html> comme élément fondateur.
Différentes méthodes, comme getElementById(), getElementsByTagName(), querySelector() ouquerySelectorAll(), sont disponibles pour accéder aux éléments.
Les attributs peuvent tous être modifiés grâce à setAttribute(). Certains éléments possèdent des propriétés qui permettent de modifier ces attributs.
La propriété innerHTML permet de récupérer ou de définir le code HTML présent à l'intérieur d'un élément.
De leur côté, textContent et innerText ne sont capables que de définir ou récupérer du texte brut, sans aucunes balises HTML.

Créé avec HelpNDoc Personal Edition: Créer des sites web d'aide facilement