.getAttribute('href')と.hrefの違い

a要素に対し element.getAttribute('href')すると属性値がそのまま、element.hrefには絶対URIが入る。

HTML

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

JavaScript

var link = document.getElementById('link');
console.log("link.getAttribute('href') --> " + link.getAttribute('href'));
console.log("link.href                 --> " + link.href);

CODEPEN上での実行結果

link.getAttribute('href') --> ../test.html
link.href                 --> http://s.codepen.io/boomerang/test.html

CODEPENで見る

参考サイト

• element.getAttribute - Web API インターフェイス | MDN

• Document Object Model HTML > Interface HTMLAnchorElement

  href of type DOMString

  The absolute URI [IETF RFC 2396] of the linked resource.