17
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

ブラウザ上のクリックした要素のXpathを取得する

Chrome DevToolsにあるCopy Xpathの機能を手元で実装したかった。このときのメモです。

ブラウザ上の要素をクリックしたときに、その要素のXpathを取得するように実装します。

ターゲットの要素から親を登っていって、兄弟要素があればそのindexを取得、というのを再帰していってタグ名を付け足していく感じです。

function getXpath(element) {
  if(element && element.parentNode) {
    var xpath = getXpath(element.parentNode) + '/' + element.tagName;
    var s = [];

    for(var i = 0; i < element.parentNode.childNodes.length; i++) {
      var e = element.parentNode.childNodes[i];
      if(e.tagName == element.tagName) {
        s.push(e);
      }
    }

    if(1 < s.length) {
      for(var i = 0; i < s.length; i++) {
        if(s[i] === element) {
          xpath += '[' + (i+1) + ']';
          break;
        }
      }
    }

    return xpath.toLowerCase();
  } else {
    return '';
  }
}

取得すると/html/body/div[2]/div[3]/div/div/div[1]/div[4]/div/div[2]/div/divって感じのXpathが取得できる。

あとはクリックイベントをつけるだけ。

document.addEventListener('click', function(e){
  console.log(getXpath(e.target));
});

これでどこをクリックしてもXpathが取得できるようになります。

これをブックマークレットにしておけば、非エンジニアでもXpathが扱えるようにできます。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
17
Help us understand the problem. What are the problem?