web-dev-qa-db-fra.com

Qu'est-ce qu'un nœud de texte, ses utilisations? //document.createTextNode ()

J'ai donc remplacé lentement une grande partie de mon code jQuery normal par du javascript natif, et je suis tombé sur la document.createTextNode() et documentation MDN associée . Après avoir lu, je suis quelque peu confus ce qu'est un nœud de texte.

Je comprends qu'il peut être utilisé pour mettre du texte à l'intérieur de div, mais je suis sûr qu'il y a un peu plus que simplement "l'utiliser pour mettre des mots à l'intérieur d'éléments". En regardant cela, il semble qu'un nœud de texte puisse également faire référence au texte des attributs.

Quelqu'un peut-il fournir un peu plus de définition de ce qu'est un nœud de texte et de son utilisation? Y a-t-il des utilisations pratiques pour cela autre que des trucs de base comme celui-ci?

var div = document.createElement('div');
var text = document.createTextNode('Y HALO THAR');
div.appendChild(text);
javascripthtml5textnode
49
AlbertEngelB

Tout le texte HTML visible dans une page (sauf le texte dans les éléments de formulaire ou les objets intégrés personnalisés) se trouve dans des nœuds de texte. La page se compose d'un certain nombre de types de nœuds différents (vous pouvez voir une liste des différents types de nœuds ici: https://developer.mozilla.org/en-US/docs/Web/API/Node). nodeType ), dont certains peuvent avoir des nœuds enfants et d'autres non. Par exemple, un div est un nœud ELEMENT qui peut contenir des nœuds enfants. Ces nœuds enfants peuvent être d'autres nœuds ELEMENT ou des nœuds TEXT ou COMMENT ou d'autres types de nœuds.

Lorsque vous définissez le .innerHTML propriété d'un nœud d'élément, il crée les nœuds appropriés et en fait des nœuds enfants de l'élément sur lequel vous définissez la propriété innerHTML. S'il y a du texte dans le innerHTML que vous définissez, des nœuds de texte seront créés pour le contenir.

DOCUMENT_NODE, ELEMENT_NODE et TEXT_NODE sont les types de nœuds les plus courants et se trouvent dans chaque page contenant du texte.

Dans votre exemple de code:

var div = document.createElement('div');
var text = document.createTextNode('Y HALO THAR');
div.appendChild(text);

Cela crée un nœud de texte et le place dans le div que vous avez créé. Il génère la même structure DOM que celle-ci:

var div = document.createElement('div');
div.innerHTML = 'Y HALO THAR';

Dans ce dernier cas, le système crée le nœud de texte pour vous.

Dans une programmation javascript simple (jQuery a tendance à protéger les développeurs des nœuds qui ne sont pas de type ELEMENT_NODE), vous rencontrerez des nœuds de texte chaque fois que vous parcourrez les nœuds enfants d'un élément contenant du texte. Vous devrez vérifier le .nodeType de chaque enfant pour savoir s'il s'agit d'un autre élément ou d'un nœud de texte ou d'un autre type de nœud.

En général, il n'y a pas beaucoup de raisons de manipuler directement les nœuds de texte car vous pouvez souvent utiliser le niveau supérieur .innerHTML propriété plus simplement. Mais, pour vous donner une idée, voici quelques raisons pour lesquelles vous voudrez peut-être traiter directement avec les nœuds de texte:

  1. Vous souhaitez modifier du texte sans affecter aucun des éléments qui l'entourent. .innerHTML crée tous les nouveaux éléments pour les éléments affectés, ce qui tue tous les gestionnaires d'événements qui pourraient avoir été définis sur eux, mais en définissant .nodeValue sur un nœud de texte ne fait recréer aucun élément.

  2. Si vous souhaitez rechercher uniquement le texte dans un document sans aucun balisage HTML résultant et savoir exactement où se trouve chaque élément de texte dans la hiérarchie DOM, vous pouvez simplement rechercher tous les nœuds de texte. Par exemple, si vous effectuez une recherche de texte dans le document, puis mettez en surbrillance le texte trouvé, vous rechercheriez probablement directement les nœuds de texte.

  3. Vous souhaitez afficher du texte sans risque pour la sécurité, car il pourrait contenir d'autres balises que le navigateur analyserait et interpréterait si vous utilisiez .innerHTML. Ainsi, vous créez un nœud de texte et définissez la valeur de son texte et le navigateur n'interprète aucun code HTML dedans. Les navigateurs modernes peuvent également utiliser le .textContent propriété d'un élément au lieu de .innerHTML pour résoudre ce problème également.

59
jfriend00