By U Zensen.

【jQuery】アンカータグから遷移後の絶対パスを取得する方法！！

＊

はじめに!!

お疲れ様です。ぴーすけです。

この記事では、jQueryまたはjavascriptを使用してアンカータグ（<a>）から遷移後の絶対パスを取得する方法を説明いたします。

＊

前提!!

例えばこんなタグがあったとします。

<a href="/sample/test.html" id="test">test</a>

このタグがクリックされたときの遷移先の絶対パスを取得します。

＊

絶対パスの取得方法!!

jQueryの場合

$('#test').prop('href');

javascriptの場合

document.getElementById('test').href;

結果

仮にこのサイト上で上記の方法を使用してURLを取得した場合は、どちらとも

http://byuzensen.link/sample/test.html

となります。

この方法を使えば、アンカーのhrefの値が相対パスなどで様々な書き方がされていたとしても問題なく絶対パスが取得できます。

<a href="http://byuzensen.link/sample/test.html" >test</a>
<a href="/sample/test.html" >test</a>
<a href="../test.html" >test</a>
<a href="./sample/test.html" >test</a>

//どのタグから値を取得しても結果は、「http://byuzensen.link/sample/test.html」

＊

余談!!

余談ですが、なぜ様々なhrefの書き方に対応できるのかというと、この方法はタグに明示的に書かれているhrefの値を取得しているのではなく、暗黙的に設定されている「プロパティ値」という値からURLを取得しているからなのです。

タグに明示的に書かれているhrefの値は「属性値」という値で、実はその裏では目には見えない「プロパティ値」という値も設定されています。プロパティ値は目には見えないですが、確実に設定されている値なので、ポケモンで言うところの努力値のような感じです。

「属性値とプロパティ値の違いについて」は、いつか別記事で説明しようと思います。この二つの違いを簡単にいうと、HTMLが理解する用に明示的に設定されている値が「属性値」でjavascriptが理解する用に暗黙的に設定されている値が「プロパティ値」です。

＊

ちなみに、属性値を取得する方法!!

jQueryの場合

$('#test').attr('href');

javascriptの場合

document.getElementById('test').getAttribute('href');

結果

前提で提示したタグから取得した場合には、どちらとも

/sample/test.html

となります。この取得の方法では、タグに書かれたhrefがそのまま取れるので、タグに書かれた内容によって取得できる値は変わります。

＊

まとめ!!

絶対パスを取得したい場合にはhrefのプロパティ値を取得する。タグに書かれているhrefの値が取得したい場合には、hrefの属性値を取得する。