Wie erstellt man einen CSS Selector aus Event-Objekt in JS?

Question

Ich habe einen einfachen Ereignis-Listener für Klicks:

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

Von dem, was ich sehe, enthält das Ereignisobjekt eine Menge nützlicher Daten über die übergeordneten Elemente, HTML und CSS-Daten des angeklickten Elements.

Gibt es eine Möglichkeit, einen CSS-Selektor (hoffentlich einzigartig) aus diesen Event-Objekten zu erstellen? Wenn ja, können Sie an Open-Source-Lösungen denken?

Answer 1

Ja, es ist durchaus möglich, einen eindeutigen CSS-Selektor für jedes Element im DOM zu erstellen, da die Pseudo-Klasse :nth-child uns erlaubt, zwischen zwei Elementen mit denselben Merkmalen im selben Elternteil zu unterscheiden.

Hier ist ein einfaches Beispiel, das einen Selektor erstellt, der den Tag-Namen und seine Position relativ zu anderen Elementen innerhalb des übergeordneten Elements verwendet. Dieses Beispiel baut und zeigt die Wähler, verwendet es dann eine Viertelsekunde später eine ‚geklickt‘ Klasse auf das Element hinzuzufügen (die es in fett grün zeigt):

// 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>