DOM要素のユニークなCSSセレクターを生成する方法は？

Question

要素のためのユニークなCSSセレクターを生成する必要があります。
特に、onclickイベントハンドラは、ターゲット要素 がクリックされたことを覚えておいて、この情報をサーバに送信する必要があります。 DOMを変更せずにこれを行う方法はありますか？

P.S.私のjavascriptコードは別のマシンで実行されるはずです
第三者のウェブサイトなので、htmlについては何も仮定することはできません。

Answer 1

レットを使用すると、簡単のためにリンクのリストを持っていると言う参照してください：あなたは、単にすべての要素

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

JSのコレクション内のトリガー要素のインデックスを渡すことができます（ jQueryの1.7以降では、私はあなたが第三elemenをクリックした場合のことをそう

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

をすることができbind()）関数を使用する.on()を使用しました渡されたインデックス値は2になります（0から始まるインデックス）。 もちろん、これはコード（DOM）が変更されない限り有効です。後でそのインデックスを使用して、その要素へのCSSルールを作成することができます。それ以外の場合は:nth-child

を使用して、要素のそれぞれは（IDのような）別の属性を持っている場合は、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()を実装するためにあなたを残します。

編集：だけ見て、あなたがevent.targetでthisのすべてのインスタンスを置き換え、event引数を追加し、それがだならば、ちょうどwindowのクリックイベントに関数を添付することができるように、それは...サードパーティのコードであることについてあなたのコメントより簡単に。

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

チェック@medv/finder

• が最短のセレクタページあたり
• ユニークセレクタ
• 安定かつ堅牢なセレクタ
• 2.9 kBのgzipと縮小化サイズ
を生成し、このCSSセレクタ・ジェネレータ・ライブラリ

生成されたセレクタの10

例：

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