Qu'Est-Ce Qu'Un Noeud De Texte, Ses Utilisations? //document.createTextNode()

J'ai donc lentement remplacé une grande partie de mon code jQuery normal par javascript natif, et je me suis trouvé sur le document.createTextNode() et documentation relative au MDN. Après lecture je suis un peu confus ce qu'est un noeud de texte.

je comprends qu'il peut être utilisé pour mettre le texte à l'intérieur <!-Mais je suis sûr qu'il y a un peu plus que "Utilisez-le pour mettre des mots dans des éléments". en Regardant cela, il semble un nœud de texte peut également se référer au texte d'attributs bien.

quelqu'un Peut-il fournir un peu plus d'une définition de ce qu'est un nœud de texte est et à quoi il sert? Y a-t-il des utilisations pratiques pour ceci autre que des choses de base comme ceci?

var div = document.createElement('div');
var text = document.createTextNode('Y HALO THAR');
div.appendChild(text);
42
demandé sur Dropped.on.Caprica 2013-06-19 19:57:19

1 réponses

tout le texte HTML visualisable dans une page (sauf le texte dans les éléments de forme ou les objets imbriqués personnalisés) est dans les noeuds de texte. La page se compose d'un certain nombre de différents types de nœuds (vous pouvez voir une liste des différents types de nœud ici: https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType), dont certains peuvent avoir des nœuds enfants et certains ne peuvent pas. Par exemple, un div est un noeud D'élément qui peut contenir des noeuds enfants. Ces noeuds enfants peuvent être d'autres noeuds D'éléments ou ils peuvent être des noeuds de texte ou des noeuds de commentaire ou d'autres types de noeuds.

quand vous mettez le .innerHTML propriété d'un noeud d'élément, il crée les noeuds appropriés et les rend noeuds enfants de l'élément sur lequel vous mettez la propriété innerHTML. Si il y a du texte dans le innerHTML vous définissez, puis des noeuds de texte seront créés pour le contenir.

DOCUMENT_NODE,ELEMENT_NODE et TEXT_NODE sont les types de noeuds les plus courants et sont dans chaque page qui a du texte.

dans votre code exemple:

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

cela crée un noeud de texte et le met 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 la programmation javascript simple (jQuery tend à protéger les développeurs de nœuds qui ne sont pas de type ELEMENT_NODE), vous rencontrerez des nœuds de texte tout moment vous marchez dans les nœuds enfants d'un élément de texte. Vous besoin de vérifier l' .nodeType de chaque enfant pour savoir si c'est un autre élément ou d'un nœud de texte ou un autre type de nœud.


en général, il n'y a pas beaucoup de raisons de manipuler les noeuds de texte directement car vous pouvez souvent utiliser le niveau supérieur .innerHTML bien plus simplement. Mais, pour vous donner une idée, voici quelques raisons pour lesquelles vous pourriez vouloir traiter directement avec des noeuds de texte:

  1. Vous souhaitez modifier du texte sans affecter les éléments autour d'elle. .innerHTML crée tous les nouveaux éléments pour les éléments affectés qui tuent tous les gestionnaires d'événements qui auraient pu être mis sur eux, mais mettant le .nodeValue sur un noeud de texte, aucun élément n'est recréé.

  2. si vous voulez trouver juste le texte dans un document sans aucun du balisage HTML résultant et savoir exactement où chaque morceau de texte est dans la hiérarchie DOM, vous pouvez juste rechercher tous les noeuds de texte. Par exemple, si vous si vous faisiez une recherche textuelle du document, puis si vous mettiez en évidence le texte trouvé, vous chercheriez probablement les noeuds textuels directement.

  3. vous voulez afficher du texte sans aucun risque de sécurité qu'il puisse contenir d'autres balises que le navigateur analyserait et interpréterait si vous utilisiez .innerHTML. Ainsi, vous créez un noeud de texte et mettez la valeur de son texte et le navigateur ne sera pas Interjet N'importe quel HTML en elle. Les navigateurs modernes peuvent également utiliser l' .textContent propriété d'un élément au lieu de .innerHTML pour résoudre ce problème aussi.

51
répondu jfriend00 2015-11-25 23:22:14