jsで NodeオブジェクトからXpathを取り出す。

以前、ruby / php で xpath で見つけた要素のfull_xpath を見つける方法を書いた。

• XPATH のパス名を取り出せるので、HTMLドキュメント中の要素の文字列の量を計算する - それマグで！
• ノードからXpathを取り出す。 - それマグで！

これ、Javascriptではどうやるんだろうと思ってた

調べてたら、気合でやるしかない模様。

MDN にみつけた。やっぱり気合でやってる。DOM ElementやNodeにはないっぽい。

https://developer.mozilla.org/en-US/docs/Web/XPath/Snippets

参考資料のブックマークレットから

Xpathを取得する部分を、ちょっと取り出して、prototypeに強引に突っ込んでみた。

Node.prototype.getXpath = function(){
return (function x(e) {
    if (e.nodeType == 9) {
        return ""
    }
    if (e.hasAttribute("id")) {
        return 'id("' + e.getAttribute("id") + '")'
    }
    var p = e.parentNode;
    var t = x(p) + "/" + e.tagName.toLowerCase();
    var c = p.childNodes;
    var g = 0;
    var s;
    for (var i = 0, n = c.length; i < n; ++i) {
        if (c[i].nodeName == e.nodeName && c[i].nodeType == e.nodeType) {
            ++g;
            if (c[i] == e) {
                s = g
            }
        }
    }
    if (g == 1) {
        return t
    }
    t += "[" + (s) + "]";
    return t
})(this)
}

実行結果

b = document.querySelector("title") //=>  <title><200b>それマグで！<200b></title>
b.getXpath() //=>"/html/head/title"

これで、ノード取得して、そのフルパス辿れる。ちょっと楽しい。

参考資料

XPathを取得するブックマークレット - hogeなlog

XPath snippets - XPath | MDN