Comment créer un sélecteur CSS à partir d'un objet événement dans JS?

Question

J'ai créé un écouteur d'événement simple pour les clics:

window.addEventListener("click", function (event) { 
    console.log(event); 
}); 

D'après ce que je vois, l'objet événement contient beaucoup de données utiles sur les éléments parents, HTML et CSS des données de l'élément cliqué.

Existe-t-il un moyen de construire un CSS-selector (heureusement unique) à partir de ces objets d'événement? Si oui, y a-t-il des solutions open-source auxquelles vous pouvez penser?

Answer 1

Oui, il est tout à fait possible de construire un sélecteur CSS unique pour n'importe quel élément du DOM, à cause de la pseudo-classe :nth-child qui permet de différencier deux éléments ayant les mêmes caractéristiques dans le même parent.

Voici un exemple simple, qui construit un sélecteur en utilisant le nom du tag et sa position par rapport aux autres éléments de son parent. Cet exemple construit et montre le sélecteur, puis utilise un quart de seconde plus tard pour ajouter un « clic » classe à l'élément (ce qui montre en vert gras):

// Find the index of the given element in its parent 
 
function indexOf(element) { 
 
    var parent = element.parentNode; 
 
    var child, index = 1; 
 
    for (child = parent.firstElementChild; 
 
     child; 
 
     child = child.nextElementSibling) { 
 
     if (child === element) { 
 
      return index; 
 
     } 
 
     ++index; 
 
    } 
 
    return -1; 
 
} 
 
document.addEventListener("click", function(e) { 
 
    // Starting from this element, build a tagname:nth-child(x) selector 
 
    // for it, then prepend one for each of its parents up to BODY 
 
    var element = e.target; 
 
    var selector = element.tagName + ":nth-child(" + indexOf(element) + ")"; 
 
    while ((element = element.parentElement) != null) { 
 
     if (element.tagName === "BODY") { 
 
      selector = "BODY > " + selector; 
 
      break; 
 
     } 
 
     selector = element.tagName + ":nth-child(" + indexOf(element) + ") > " + selector; 
 
    } 
 
    show(selector); 
 
}); 
 
function show(selector) { 
 
    console.log(selector); 
 
    setTimeout(function() { 
 
     document.querySelector(selector).classList.add("clicked"); 
 
    }, 250); 
 
}

#container, #container div { 
 
    border: 1px solid #ddd; 
 
} 
 
.clicked { 
 
    color: green; 
 
    font-weight: bold; 
 
}

<div id="container"> 
 
    <div> 
 
    <span>one</span> 
 
    <span>two</span> 
 
    <span>three</span> 
 
    <span>four</span> 
 
    </div> 
 
    <div> 
 
    <span>one</span> 
 
    <span>two</span> 
 
    <span>three</span> 
 
    <span>four</span> 
 
    </div> 
 
</div>