DOM ElementからのXPath取得関数を作ってみた

Firebugの"XPathをコピー"と互換性があります。
いわゆるこれ↓

要素を右クリックして、"XPathをコピー"した場合と同じ文字列を取得できます。

実装

/**
 * エレメントノードからxpathを構築します。
 *
 * @param   Node    element_node    xpath構築元のelement node
 * @returns element nodeまでのxpath
 */
function getXpathByElementNode (element_node) {
    var NODE_TYPE_ELEMENT_NODE = 1;

    if (element_node instanceof Array) {
        element_node = element_node[0];
    }

    if (element_node.nodeType != NODE_TYPE_ELEMENT_NODE) {
        throw new ErrorException('nodes other than the element node was passed. node_type:'+ element_node.nodeType +' node_name:'+ element_node.nodeName);
    }

    var stacker = [];
    var node_name = '';
    var node_count = 0;
    var node_point = null;

    do {
        node_name = element_node.nodeName.toLowerCase();
        if (element_node.parentNode.children.length > 1) {
            node_count = 0;
            node_point = null;
            for (i = 0;i < element_node.parentNode.children.length;i++) {
                if (element_node.nodeName == element_node.parentNode.children[i].nodeName) {
                    node_count++;
                    if (element_node == element_node.parentNode.children[i]) {
                        node_point = node_count;
                    }
                    if (node_point != null && node_count > 1) {
                        node_name += '['+ node_point +']';
                        break;
                    }
                }
            }
        }
        stacker.unshift(node_name);
    } while ((element_node = element_node.parentNode) != null && element_node.nodeName != '#document');

    return '/' + stacker.join('/').toLowerCase();
}

実証

PHP - mb_strwidthの返す値が怪しかったので調べてみた - QiitaのHTMLを対象に検証。

元のXPathを取得

画面上での指定は次の画像の通り。

Firebugでの指定では次の画像の通り。

この状態で"XPathをコピー"すると次の結果が得られる。

/html/body/div[3]/article/div[2]/div/div[1]/section/table[1]/tbody/tr[3]/td[2]

XPathからエレメントを取得し、エレメントからXPathを取得する

Firebugのコンソールを使う

関数追加して処理を実行して・・・

/html/body/div[3]/article/div[2]/div/div[1]/section/table[1]/tbody/tr[3]/td[2]

同じ結果を得る事が出来た。