HTMLAnchorElement.hrefとElement.getAttribute("href")の違い
JavaScriptなんかでURIの示すリソースをどうこうするときに、どうしても絶対URIが欲しいことがあるんだけど、頑張って自分で組み立てなくても、相手がA要素なら意外と簡単に取れるみたい。
<a id="bar" href="../foo/bar.html">bar</a>
こんな感じのA要素があったとして、普通にHTMLAnchorElementオブジェクトのhrefプロパティを参照すると解決済みの絶対URIが入っているらしい。
ここでElement.getAttribute()を使うと現在設定されている値そのものが取れてしまう。
var link = document.getElementById('bar'); console.log(link.href); // => http://example.com/path/to/foo/bar.html console.log(link.getAttribute('href')); // => ../foo/bar.html
仕様がいまいちわからない
ぐぐってみるとわりと常識らしいんだけど、どこまで信頼していいのか、ブラウザ互換性とかどうなのかがいまいちわからなかった。
DOM Level 2で規定されているという記述があったのでDOM Level 2 HTMLのHTMLAnchorElementのところを見てみると、
- href of type DOMString
- The absolute URI [IETF RFC 2396] of the linked resource. See the href attribute definition in HTML 4.01.
と書かれているので、この属性が絶対URIを扱うのは確かなようだ。
ただ、あまりにもそっけなく書いてあるので、相対URIを入れた場合はどうなるのか、自動的に絶対URIに変換してくれるのか、それとも設定する側が絶対URIを設定しなければいけないのか、とかいまいちよくわからない。
ちょっと試した感じだと相対URIを突っ込んでも読みだすときには絶対URIとして読み出せる模様。
「相対URIを絶対URIに変換するテクニック」のひとつとして、HTMLAnchorElementを生成してhrefプロパティから取り出すというのを時々見かけるので、きっと大概の環境で動くんだろう。うん、きっとそう。