¿Cómo generar selector css único para el elemento DOM?

Question

Necesito generar selector css único para los elementos.
Particularmente, tengo un controlador de eventos onclick que debe recordar en qué elemento de destino se hizo clic en y enviar esta información a mi servidor. ¿Hay alguna manera de hacerlo sin hacer modificaciones DOM?

P.S. mi código javascript se supone que se ejecuta en diferentes sitios web de terceros de
, por lo que no puedo hacer ninguna suposición sobre html.

Answer 1

Digamos que usted tiene una lista de enlaces para el bien de la sencillez: sólo tiene que pasar el índice del elemento desencadenante de la colección de todos los elementos

<a href="#">...</a> 
<a href="#">...</a>  
<a href="#">...</a> 

el js (jQuery 1.7+, que utiliza .on() utilizar de otra manera la función bind()) puede ser

var triggers = $('a'); 
triggers.on('click', function(e) { 
    e.preventDefault(); 
    var index = triggers.index($(this)); 
    /* ajax call passing index value */ 
}); 

por lo que si hace clic en el tercer elemen t valor de índice pasado será 2. (índice basado en 0); , por supuesto, esto es válido siempre que el código (el DOM) no cambie. Más tarde, puede usar ese índice para crear una regla CSS en ese elemento, p. utilizando :nth-child

De lo contrario, si cada uno de sus elementos tienen un atributo diferente (como un id) que puede pasar ese atributo

ejemplo en jsFiddle: http://jsfiddle.net/t7J8T/

Answer 2

Probablemente podría atravesar el árbol DOM desde el nodo de nuevo al elemento del cuerpo para generar un selector.

Firebug tiene una función para esto, tanto con los selectores XPath y CSS.

Ver this answer

Answer 3

Sí, se puede hacer esto. Pero con algunas advertencias. Para poder garantizar que los selectores sean únicos, debe usar :nth-child(), que no es universalmente compatible. Si luego quieres poner estos selectores de CSS en archivos CSS, no funcionará en todos los navegadores.

lo haría con algo como esto:

function() { 
    if (this.id) { 
     return sendToServer('#' + this.id); 
    } 
    var parent = this.parentNode; 
    var selector = '>' + this.nodeName + ':nth-child(' + getChildNumber(this) ')'; 
    while (!parent.id && parent.nodeName.toLowerCase() !== 'body') { 
     selector = '>' + this.nodeName + ':nth-child(' + getChildNumber(parent) + ')' + selector; 
     parent = parent.parentNode; 
    } 
    if (parent.nodeName === 'body') { 
     selector = 'body' + selector; 
    } else { 
     selector = '#' + parent.id + selector; 
    } 
    return sendToServer(selector); 
} 

A continuación, añadir que a su controlador de clic para cada elemento que se desea modelar. Lo dejo para implementar getChildNumber().

Editar: Sólo visto su comentario acerca de que sea tercera parte de código ... por lo que podría añadir un argumento event, reemplazar todas las instancias de this con event.target y luego simplemente conecte la función de window 's evento de clic si eso es más fácil.

Answer 4

"use strict"; 
function getSelector(_context){ 
    var index, localName,pathSelector, that = _context, node; 
    if(that =='null') throw 'not an dom reference'; 
    index = getIndex(that); 

    while(that.tagName){ 
     pathSelector = that.localName+(pathSelector?'>'+pathSelector :''); 
     that = that.parentNode; 
    } 
    pathSelector = pathSelector+':nth-of-type('+index+')'; 

    return pathSelector; 
} 

function getIndex(node){ 
    var i=1; 
    var tagName = node.tagName; 

    while(node.previousSibling){ 
    node = node.previousSibling; 
     if(node.nodeType === 1 && (tagName.toLowerCase() == node.tagName.toLowerCase())){ 
      i++; 
     } 
    } 
    return i; 
} 
document.addEventListener('DOMContentLoaded', function(){ 
    document.body.addEventListener('mouseover', function(e){ 
    var c = getSelector(e.target); 
     var element = document.querySelector(c); 
      //console.log(element); 
     console.log(c); 
     //element.style.color = "red" 

    }); 
}); 

puede probar este. sin usar jquery.

Answer 5

Comprobar esta biblioteca generador de selector CSS @medv/finder

• Genera selectores más cortos
• selectores exclusivos por página
• estable y robusto selectores
• 2,9 kB gzip y tamaño Minify

Ejemplo de selector generada:

.blog > article:nth-child(3) .add-comment