Notez que la Element::innerText
propriété ne contiendra pas le texte qui a été masqué par le style CSS "display:none
" dans Google Chrome (ainsi, il supprimera le contenu masqué par d'autres techniques CSS (y compris la taille de police: 0, la couleur: transparent et quelques autres effets similaires qui empêchent le texte d'être rendu de manière visible).
D'autres propriétés CSS sont également prises en compte:
- D'abord, le style "display:" des éléments internes est analysé pour déterminer s'il délimite un contenu de bloc (tel que "display: block" qui est la valeur par défaut des éléments de bloc HTML dans la feuille de style intégrée du navigateur, et dont le comportement n'a pas été remplacé par votre propre style CSS); si c'est le cas, une nouvelle ligne sera insérée dans la valeur de la propriété innerText. Cela ne se produira pas avec la propriété textContent.
- Les propriétés CSS qui génèrent du contenu en ligne seront également prises en compte: par exemple, l'élément en ligne
<br \>
qui génère une nouvelle ligne en ligne générera également une nouvelle ligne dans la valeur de innerText.
- Le style "display: inline" n'entraîne aucun retour à la ligne dans textContent ou innerText.
- Le style "display: table" génère des sauts de ligne autour du tableau et entre les lignes du tableau, mais "display: table-cell" générera un caractère de tabulation.
- La propriété "position: absolue" (utilisée avec display: block ou display: inline, cela n'a pas d'importance) provoquera également l'insertion d'un saut de ligne.
- Certains navigateurs incluront également une seule séparation d'espace entre les travées
Mais Element::textContent
contiendra toujours TOUS les contenus des éléments de texte internes indépendamment du CSS appliqué même s'ils sont invisibles. Et aucune nouvelle ligne ni aucun espace supplémentaire ne sera généré dans textContent, qui ignore simplement tous les styles et la structure et les types en ligne / bloc ou positionnés des éléments internes.
Une opération de copier / coller utilisant la sélection de la souris supprimera le texte caché au format de texte brut qui est placé dans le presse-papiers, de sorte qu'il ne contiendra pas tout dans le textContent
, mais seulement ce qu'il contient innerText
(après la génération d'espaces / de nouvelle ligne comme ci-dessus) .
Les deux propriétés sont ensuite prises en charge dans Google Chrome, mais leur contenu peut alors être différent. Les navigateurs plus anciens incluaient toujours dans innetText tout comme ce que textContent contient maintenant (mais leur comportement par rapport à la génération des espaces blancs / nouvelles lignes était incohérent).
jQuery résoudra ces incohérences entre les navigateurs en utilisant la méthode ".text ()" ajoutée aux éléments analysés qu'elle renvoie via une requête $ (). En interne, il résout les difficultés en examinant le DOM HTML, en travaillant uniquement avec le niveau "nœud". Ainsi, il renverra quelque chose ressemblant davantage à textContent standard.
La mise en garde est que cette méthode jQuery n'insérera pas d'espaces supplémentaires ou de sauts de ligne qui peuvent être visibles à l'écran en raison de sous-éléments (comme <br />
) du contenu.
Si vous concevez des scripts pour l'accessibilité et que votre feuille de style est analysée pour un rendu non sonore, comme les plug-ins utilisés pour communiquer avec un lecteur braille, cet outil doit utiliser le textContent s'il doit inclure les signes de ponctuation spécifiques qui sont ajoutés dans des plages de style "display: none" et qui sont généralement inclus dans les pages (par exemple pour les exposants / indices), sinon le innerText sera très déroutant pour le lecteur Braille.
Les textes masqués par les astuces CSS sont désormais généralement ignorés par les principaux moteurs de recherche (qui analyseront également le CSS de vos pages HTML et ignoreront également les textes qui ne sont pas de couleurs contrastées en arrière-plan) à l'aide d'un analyseur HTML / CSS et de la propriété DOM "innerText" exactement comme dans les navigateurs visuels modernes (au moins ce contenu invisible ne sera pas indexé donc le texte caché ne peut pas être utilisé comme une astuce pour forcer l'inclusion de certains mots-clés dans la page pour vérifier son contenu); mais ce texte masqué sera toujours affiché dans la page de résultats (si la page était encore qualifiée à partir de l'index pour être incluse dans les résultats), en utilisant la propriété "textContent" au lieu du HTML complet pour supprimer les styles et scripts supplémentaires.
SI vous affectez du texte brut dans l'une de ces deux propriétés, cela remplacera le balisage interne et les styles qui lui sont appliqués (seul l'élément affecté conservera son type, ses attributs et ses styles), de sorte que les deux propriétés contiendront alors le même contenu . Cependant, certains navigateurs n'honoreront plus l'écriture dans innerText et ne vous permettront que d'écraser la propriété textContent (vous ne pouvez pas insérer de balisage HTML lors de l'écriture dans ces propriétés, car les caractères spéciaux HTML seront correctement encodés à l'aide de références de caractères numériques pour apparaître littéralement , si vous lisez ensuite la innerHTML
propriété après l'affectation de innerText
ou textContent
.