web-dev-qa-db-ja.com

要素のCSSセレクターを取得します（IDがない場合）

JavaScript/CSSを使用してページを変更しようとしています（StylishやGreasemonkeyのように）。これは非常に複雑なページ（私が作成しなかった、または事前レンダリングを変更できない）であり、CSSセレクターの構築（ドキュメント構造を手動で調べる）が困難になります。どうすればこれを達成できますか？

javascriptdomcss-selectors
29
rcphq

FireBugがインストールされたFireFoxを使用します。

  • 要素を右クリック
  • 「要素の検査」を選択します
  • HTMLツリーで要素を右クリックします
  • [XPathをコピー]または[CSSパスをコピー]を選択します

この回答へのパーマリンクの出力（XPath）：

/ html/body/div [4]/div [2]/div [2]/div [2]/div [3]/table/tbody/tr/td [2]/table/tbody/tr/td/div/a

CSSパス：

html body.question-page div.container div＃content div＃mainbar div＃answers div＃answer-4588287.answer table tbody tr td table.fw tbody tr td.vt div.post-menu a

しかし、このコメントに関して：

私の最終的な目的は、オブジェクトのcssセレクターを作成することです...

それがあなたの意図であるなら、JavaScriptを使ったより簡単な方法があるかもしれません：

var uniquePrefix = 'isThisUniqueEnough_';
var counterIndex = 0;
function addCssToElement(elem, cssText){
    var domId;
    if(elem.id)domId=elem.id;
    else{
        domId = uniquePrefix + (++counterIndex);
        elem.id = domId;
    }
    document.styleSheets[0].insertRule("#"+domId+"{"+cssText+"}");
}

最後の行は、ブラウザーごとに異なる方法で実装する必要がある場合があります。テストしませんでした。

19
Sean Patrick Floyd
function fullPath(el){
  var names = [];
  while (el.parentNode){
    if (el.id){
      names.unshift('#'+el.id);
      break;
    }else{
      if (el==el.ownerDocument.documentElement) names.unshift(el.tagName);
      else{
        for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);
        names.unshift(el.tagName+":nth-child("+c+")");
      }
      el=el.parentNode;
    }
  }
  return names.join(" > ");
}

console.log(  fullPath( $('input')[0] ) );
// "#search > DIV:nth-child(1) > INPUT:nth-child(1)"

これはあなたが求めているもののようですただし、これは1つの要素のみを一意に識別することが保証されていないことに気付くかもしれません。 （上記の例では、兄弟入力もすべて一致します。）

編集：CSSクラスの代わりにnth-childを使用するようにコードを変更し、単一の子を適切に明確にしました。

54
Phrogz

私は実際に chrome devtools source からのこのコード）を使用して、多くの変更を加えることなくこれを解決できることを発見しました。

WebInspector.DOMPresentationUtilsから新しい名前空間に関連するメソッドを追加し、いくつかの違いを修正した後、次のように呼び出すだけです。

> UTILS.cssPath(node)

実装例についてcss_path.jsを参照

16
tutuDajuju

このCSSセレクタージェネレーターライブラリを確認してください @ medv/Finder

  • 最短のセレクターを生成します
  • ページごとの固有のセレクター
  • 安定した堅牢なセレクター
  • 2.9 kB gzipとサイズの縮小

生成されたセレクターの例：

.blog > article:nth-child(3) .add-comment
2
Anton Medvedev
function getCssSelector(el)
{
    names = [];
    do {
        index = 0;
        var cursorElement = el;
        while (cursorElement !== null)
        {
            ++index;
            cursorElement = cursorElement.previousElementSibling;
        };
        names.unshift(el.tagName + ":nth-child(" + index + ")");
        el = el.parentElement;
    } while (el !== null);

    return names.join(" > ");
}
0
Yassine

要素がdivテーブルまたはボディの最初の子である場合、cssの最初の子の疑似クラスに使用できます。

jqueryのn番目のchild（）関数を使用できます。

http://api.jquery.com/nth-child-selector/

jquery.comの例

<!DOCTYPE html>
<html>
<head>
  <style>

  div { float:left; }
  span { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <div><ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>

  </ul></div>
  <div><ul>
    <li>Sam</li>
  </ul></div>

  <div><ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>

    <li>David</li>
  </ul></div>
<script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</script>

</body>
</html>

質問を正しく理解した場合は2セント。

0
andrewk