Was ist der eindeutige Bezeichner für ein DOM-Element/Knoten?

Question

Ich durchquere ein HTML-Dokument mit Javascript DOM. Ich möchte eine Liste (eigentlich ein Array) aller Knoten/Elemente und ihrer Werte erstellen. Ich habe ein Skript zum Durchlaufen von DOM gefunden, aber wie kann ich jeden Knotenwert in einem Array speichern? Ich kann den eindeutigen Bezeichner für einen Knoten nicht finden. Jeder hat irgendwelche Hinweise? Ich dachte an xpath oder so.

Ist es eine gute Idee, xpath für Knoten als eindeutige Kennung zu betrachten. Wenn ja, wie bekomme ich xpath eines Elements beim Durchqueren des DOM?

Answer 1

Als Programmierer geboren und aufgewachsen in der Welt von C und C++, meine erste Antwort auf diese Art von Frage wäre "Speichern Sie ihre Adressen in der Anordnung!". Aber nach ein paar Jahren herumspielen mit dem Web-Weg der Dinge, kann ich die richtige Antwort geben:

In Javascript können Sie direkt die Referenzen auf die Objekte im Array speichern. Und nein, Xpath ist keine gute Idee dafür; Referenzen verwenden ist einfacher und besser. So eine direkte Antwort auf Ihre Frage ist: Es gibt keinen eindeutigen Bezeichner für ein DOM-Element/Knoten außer selbst.

In Javascript werden alle Objekte als Referenz übergeben. Also hier ist ein Beispielcode für, wie es geht:

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]); 
} 

Answer 2

Sie etwas ähnliches mit so etwas XPath bekommen kann. Es durchquert das dom vom Eingabeelement aus über die parentNode -Eigenschaft.

https://gist.github.com/sebjwallace/3c0a6f7493ce23134516

gibt er eine Zeichenfolge wie folgt.

"# Dokument/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; 
}