如何为DOM元素生成唯一的css选择器？

Question

我需要为元素生成唯一的css选择器.
特别是,我有onclick事件处理程序,应该记住点击了什么目标元素,并将此信息发送到我的服务器.有没有办法在不做DOM修改的情况下做到这一点？

PS我的javascript代码应该在不同
的第三方网站上运行,所以我不能对html做任何假设.

Answer 1

这个函数创建了一个很长但很实用的独特选择器，工作很快。

const getCssSelector = (el) => {
  let path = [], parent;
  while (parent = el.parentNode) {
    path.unshift(`${el.tagName}:nth-child(${[].indexOf.call(parent.children, el)+1})`);
    el = parent;
  }
  return `${path.join(' > ')}`.toLowerCase();
};

结果示例：

html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > main:nth-child(3) > div:nth-child(2) > p:nth-child(2)

下面的代码创建了一个更漂亮更短的选择器

const getCssSelectorShort = (el) => {
  let path = [], parent;
  while (parent = el.parentNode) {
    let tag = el.tagName, siblings;
    path.unshift(
      el.id ? `#${el.id}` : (
        siblings = parent.children,
        [].filter.call(siblings, sibling => sibling.tagName === tag).length === 1 ? tag :
        `${tag}:nth-child(${1+[].indexOf.call(siblings, el)})`
      )
    );
    el = parent;
  };
  return `${path.join(' > ')}`.toLowerCase();
};

结果示例：

html > body > div > div > main > div:nth-child(2) > p:nth-child(2)

Answer 2

检查这个 CSS 选择器生成器库@medv/finder

• 生成最短选择器
• 每页唯一的选择器
• 稳定且强大的选择器
• 2.9 kB gzip 和缩小大小

生成选择器的示例：

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

Answer 3

为了简单起见，假设您有一个链接列表：您可以简单地传递所有元素集合中触发元素的索引

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

这样，如果您单击第三个元素，传递的索引值将为 2。（基于 0 的索引）；当然，只要代码（DOM）不改变，这就是有效的。稍后您可以使用该索引为该元素创建 css 规则，例如使用:nth-child

否则，如果每个元素都有不同的属性（如 id），您可以传递该属性

JsFiddle 上的示例： http: //jsfiddle.net/t7J8T/