Stockage d'un nœud HTML en tant que clé dans un *objet*

Question

Tout comme cette question SO, j'aimerais utiliser des nœuds HTML comme clés dans un objet (pas dans un tableau).

Exemple:

var _hotspots = {
                 [object HTMLDivElement] : { someProps:[1,2,3] },
                 [object HTMLDivElement] : { someProps:[1,2,3] }
                }

et ainsi je pourrais réaliser des choses comme ceci:

for( var a in _hotspots ){
    if(YAHOO.lang.hasOwnProperty(_hotspots, a)){
    alert('clé nodeName: '+a.nodeName);
    }
}

Jusqu'à présent, lorsque j'affiche 'a' ci-dessus, il affiche en effet qu'il s'agit d'un [object HTMLDivElement], donc tout semblait bien - mais je ne peux pas accéder aux propriétés de 'a', comme nodeName.

Est-ce que ce que je fais est possible? Est-ce incorrect? Si je devrais pouvoir accéder aux propriétés de la référence de clé de l'objet, veuillez me le faire savoir et je rédigerai une page d'exemple.

À bientôt.

Answer 1

Il est maintenant possible de faire cela avec Map ou les objets Set, mais un Map est plus approprié si vous souhaitez stocker des paires clé-valeur, comme un objet régulier.

Vous pouvez toujours ajouter un noeud en tant que clé avec des objets réguliers, mais le problème est que le noeud est converti en chaîne de caractères, car les objets ne peuvent stocker que des clés sous forme de chaînes, ce qui signifie que l'objet ne peut pas distinguer les noeuds uniques ayant des attributs/structures identiques.

La raison pour laquelle le Map fonctionne est que ses clés peuvent être n'importe quelle valeur, y compris des fonctions, des objets ou n'importe quel primitif.

const divEl1 = document.querySelectorAll("div")[0];
const divEl2 = document.querySelectorAll("div")[1];

const obj = {};
const map = new Map();

obj[divEl1] = divEl1.getBoundingClientRect();
map.set(divEl1, divEl1.getBoundingClientRect());

console.log("Objet : est-ce divEl1 ? ", !!obj[divEl2]);
console.log("Map : est-ce divEl1 ? ", map.has(divEl2));
console.log("Map : obtenir les propriétés de bounding de divEl1", map.get(divEl1));

  Je suis un div
  Je suis un div

Vous pouvez également utiliser WeakMap et WeakSet pour ajouter des nœuds en tant que clés. Utiliser Map/Set pour stocker des éléments pose un problème potentiel de mémoire une fois que les éléments sont supprimés du DOM, car ils sont toujours conservés dans Map/Set et ne sont pas collectés par le ramasse-miettes. Lorsque vous utilisez WeakMap/WeakSet, si aucune autre référence à ces éléments stockés dans ces objets n'existe, ces éléments seront collectés par le ramasse-miettes.

Answer 2

Les clés des objets JavaScript sont toujours des caractères. Vous pourriez stocker l'identifiant en tant que clé puis récupérer l'élément dans votre fonction.

Answer 3

Vous pourriez utiliser ma propre jshashtable, qui accepte n'importe quel objet comme clé, mais si ce n'est pas un problème pour vous de donner un id à tous vos éléments alors je recommande d'utiliser un objet avec les IDs des éléments comme clés, car cela sera la solution la plus simple et la plus performante.