HTMLAnchorElement.hrefとElement.getAttribute("href")の違い

web JavaScript

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プロパティから取り出すというのを時々見かけるので、きっと大概の環境で動くんだろう。うん、きっとそう。