Comment puis-je extraire des nœuds de texte d'un élément sans modifier le DOM ?

Récupérer des nœuds de texte sans modifier la structure du DOM

Dans certains scénarios, il devient nécessaire d'extraire le contenu textuel d'un élément sans modifier sa structure . Par exemple, dans le code HTML suivant :

<div>

Si le résultat souhaité est d'obtenir le texte "Je suis un nœud de texte" tout en préservant la balise "edit", une solution multi-navigateurs est requise.

Utilisation de Element.contents() et Node.TEXT_NODE

Pour y parvenir, nous pouvons tirer parti Propriétés Element.contents() et Node.TEXT_NODE de JavaScript. Voici un extrait de code concis mais efficace :

var text = $(".title").contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;
}).text();

Décomposer la solution :

• $(".title").contents() : Ceci La fonction renvoie une collection de tous les nœuds enfants directs au sein de l'élément sélectionné avec la classe "title".
• .filter() : la fonction de filtre parcourt chaque enfant node et renvoie uniquement ceux qui sont de type Node.TEXT_NODE.
• .text() : Cette méthode extrait le contenu textuel du résultat filtré.

Par conséquent, en utilisant cette technique, nous pouvons réussir à obtenir la partie "Je suis un nœud de texte" sans altérer la structure HTML. Cette solution est compatible avec tous les principaux navigateurs Web, garantissant une fonctionnalité multi-navigateurs.

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!