Как создать уникальный селектор CSS для элемента DOM?

Question

Мне нужно создать уникальный селектор css для элементов.
В частности, у меня есть обработчик события onclick, который должен помнить, какой целевой элемент был нажат и отправить эту информацию на мой сервер. Есть ли способ сделать это без внесения изменений DOM?

P.S. мой javascript-код должен быть запущен на разных
3-х сторонних сайтах, поэтому я не могу делать никаких предположений о html.

Answer 1

пусть говорят, у вас есть список ссылок для простоты: вы можете просто передать индекс инициирующего элемента в совокупности всех элементов

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

в JS (JQuery 1.7+, я использовал .on() в противном случае используйте функцию bind()) может быть

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

так, что если вы нажмете на третьем Elemen t переданное значение будет равно 2. (индекс, основанный на 0); , конечно, это верно, если код (DOM) не изменяется. Позже вы можете использовать этот индекс для создания правила CSS для этого элемента, например. используя :nth-child

В противном случае, если каждый из ваших элементов имеют различные атрибуты (например, идентификатор) вы можете передать этот атрибуту

примера на JsFiddle: http://jsfiddle.net/t7J8T/

Answer 2

Возможно, вы можете пересечь дерево DOM с узла обратно на элемент body, чтобы сгенерировать селектор.

У Firebug есть функция для этого, используя селектора XPath и CSS.

См this answer

Answer 3

Да, вы могли бы сделать это. Но с несколькими оговорками. Чтобы гарантировать, что селекторы уникальны, вам нужно будет использовать :nth-child(), который не поддерживается повсеместно. Если вы хотите поместить эти CSS-селектора в файлы CSS, это не будет работать во всех браузерах.

Я хотел бы сделать это с чем-то вроде этого:

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

Затем добавить, что в обработчик щелчка для каждого элемента, который вы хотите моделировать. Я оставлю вас реализовать getChildNumber().

Edit: Просто видел ваш комментарий про то, что третья сторона кода ... так что вы можете добавить event аргумент, заменить все экземпляры this с event.target, а затем просто прикрепить функцию к window «s событие щелчка, если это Полегче.

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" 

    }); 
}); 

вы можете попробовать этот. без использования jquery.

Answer 5

Проверить этот селектор CSS библиотека Генератор @medv/finder

• Формирует короткие селекторы
• Уникальные селекторов на странице
• Стабильные и надежные селекторов
• 2,9 кБ GZIP и Minify размер

Пример сгенерированного селектора:

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