Quel est l'identifiant unique d'un élément/noeud DOM?
je traverse un document HTML en utilisant JavaScript DOM. Je veux faire une liste (un tableau) de tous les nœuds/éléments et de leurs valeurs. J'ai trouvé un script pour traverser le DOM, mais comment puis-je stocker chaque valeur de noeud dans un tableau. Je n'arrive pas à trouver l'identifiant unique d'un nœud. Quelqu'un a des pointeurs? Je pensais xpath ou quelque chose.
Est-ce une bonne idée d'envisager d' xpath pour le noeud comme identifiant unique. Si oui, comment puis-je obtenir xpath d'un élément lors de sa traversée le DOM?
2 réponses
comme programmeur né et élevé dans le monde de C et C++, ma première réponse à ce genre de question aurait été "stocker leurs adresses dans le tableau!". Mais après quelques années de déconner avec le web de la manière de choses, je peux donner la bonne réponse:
En javascript, vous pouvez directement enregistrer le références aux objets du tableau. Et non, xpath n'est pas une bonne idée pour cela; utiliser des références est plus simple et mieux. Donc une réponse directe à votre la question Est: il n'y a pas d'identifiant unique pour un élément/noeud DOM sauf lui-même.
En javascript, tous les objets sont passés par référence. Voici donc un exemple de code pour le faire:
var theArray = [];
var theNodeToTraverse = document.getElementById('domelementtosearch');
traverseAndStore(theNodeToTraverse);
function traverseAndStore( node )
{
if( node==null) return;
theArray[ theArray.length ] = node;
for( i=0; i<node.childNodes.length; i++ )
traverseAndStore( node.childNodes[i] );
}
Vous pouvez obtenir quelque chose de similaire à xpath avec quelque chose comme ça. Il parcourt le dom vers le haut à partir de l'élément input à travers la propriété parentNode.
https://gist.github.com/sebjwallace/3c0a6f7493ce23134516
il va sortir une chaîne de caractères comme celle-ci.
"#document / HTML / BODY / DIV"
var getElementPath = function(el){
var path = el.nodeName;
var parent = el.parentNode;
while(parent){
path = parent.nodeName + '/' + path;
parent = parent.parentNode;
}
return path;
}