Anchorオブジェクト (a要素)

URL パラメータを付加してAnchorオブジェクトを動的に作成するときは、コンテンツの重複に注意します。

プロパティ

HTMLAnchorElementはURLUtilsインターフェイスを実装しており、そのプロパティはLocationオブジェクトと同じです。

  • HTMLAnchorElement.accessKey
  • HTMLAnchorElement.charset
  • HTMLAnchorElement.coords
  • HTMLAnchorElement.download
  • HTMLAnchorElement.hreflang
  • HTMLAnchorElement.media
  • HTMLAnchorElement.name
  • HTMLAnchorElement.rel
  • HTMLAnchorElement.relList
  • HTMLAnchorElement.rev
  • HTMLAnchorElement.shape
  • HTMLAnchorElement.tabindex
  • HTMLAnchorElement.target
  • HTMLAnchorElement.text
  • HTMLAnchorElement.type

以下はURLUtilsインターフェイスのプロパティです。

  • URLUtils.hash
  • URLUtils.host
  • URLUtils.hostname
  • URLUtils.href
  • URLUtils.pathname
  • URLUtils.port
  • URLUtils.protocol
  • URLUtils.search
Properties - HTMLAnchorElement - Web APIs | MDN

プロパティの取得例

HTMLで記述された要素

ドキュメントに次のa要素があるとき、

<!-- 1 --> <a href="/"></a>
<!-- 2 --> <a href="#a"></a>
<!-- 3 --> <a href="index.html"></a>
<!-- 4 --> <a href="http://example.com/"></a>
<!-- 5 --> <a href="http://example.com:1234/"></a>

それぞれのAnchorオブジェクトのプロパティは、ブラウザごとに下表のようになります。

  プロパティ IE9 Firefox Chrome
1 host localhost:80 localhost
hostname localhost
pathname (空) /
href http://localhost/
2 host localhost:80 localhost
hostname localhost
pathname sample.html /sample.html
href http://localhost/sample.html#a
3 host localhost:80 localhost
hostname localhost
pathname index.html /index.html
href http://localhost/index.html
4 host example.com:80 example.com
hostname example.com
pathname (空) /
href http://example.com/
5 host example.com:1234
hostname example.com
pathname (空) /
href http://example.com:1234/

ブラウザによる違いは、次の2点です。

  • host … IEは、ポート番号を省略したとき末尾に「:80」を付加します。
  • pathname … FirefoxとChromeは、先頭に「/」を付加します。

スクリプトで作成した要素

ドキュメントに、次のように追加したa要素があるとき、

var a1 = document.createElement( 'a' );
var a2 = document.createElement( 'a' );
var a3 = document.createElement( 'a' );
var a4 = document.createElement( 'a' );
var a5 = document.createElement( 'a' );

a1.href = '/';
a2.href = '#a';
a3.href = 'index.html';
a4.href = 'http://example.com/';
a5.href = 'http://example.com:1234/';

document.body.appendChild( a1 );
document.body.appendChild( a2 );
document.body.appendChild( a3 );
document.body.appendChild( a4 );
document.body.appendChild( a5 );

それぞれのAnchorオブジェクトのプロパティは、ブラウザごとに下表のようになります。

  プロパティ IE9 Firefox Chrome
1 host (空) localhost
hostname (空) localhost
pathname (空) /
href http://localhost/
2 host (空) localhost
hostname (空) localhost
pathname (空) /sample.htm
href http://localhost/sample.htm#a
3 host (空) localhost
hostname (空) localhost
pathname index.html /index.html
href http://localhost/index.html
4 host example.com:80 example.com
hostname example.com
pathname (空) /
href http://example.com/
5 host example.com:1234
hostname example.com
pathname (空) /
href http://example.com:1234/

FirefoxとChromeは、前述のHTMLで記述した場合と同じです。一方でIEは、

  • ホスト名が明示されていない … hostとhostnameが空文字
  • パス名が明示されていない … pathが空文字

となります。

クリックの捕捉

onclickイベントによる方法

HTMLコード 実行例 
<a         onclick="alert('OK')             ">Click</a>
 Click 
<a href="" onclick="alert('OK')             ">Click</a>
 Click 
<a href="" onclick="alert('OK');return false">Click</a>
 Click

javascript疑似プロトコルによる方法

HTMLコード 実行例 
<a href="javascript:alert('OK')">Click</a>
 Click

現在のドキュメントを変更しないようにするには、JavaScriptコードの最後の文で値を返さないようにします。

HTMLコード 実行例 
<a href="javascript:confirm('OK')       ">Click</a>
 Click 
<a href="javascript:confirm('OK');void 0">Click</a>
 Click

URL部分は関数ではないため、onclickのようにreturn falseはできません。

クリックの無効化

hrefプロパティによる処理

hrefプロパティに、何も処理をしないjavascript疑似プロトコルのコードを記述します。

var link = document.createElement( 'a' );
link.href = 'javascript:;';

html - Which "href" value to use for JavaScript links: "#" or "javascript:void(0)"? - Stack Overflow

onclickイベントによる処理

onclickイベントでfalseを返して、既定の処理を無効にします。このときhrefプロパティの内容は意味を持ちませんが、これが設定されていないとブラウザにリンクと認識されず、下線などが表示されません。しかし空文字を設定すると自ページへのリンクとして「訪問済みリンク」とみなされてしまうため、ここでもjavascript疑似プロトコルのコードを記述します。

var link = document.createElement( 'a' );
link.href = 'javascript:;';
link.onclick = function()
{
    this.removeAttribute( 'href' )
    return false;
}

スクリプトによるクリック

click()メソッドを呼び出すことで、Anchorオブジェクトをクリックできます。

<a href="/">Link</a>
<button onclick="this.previousSibling.click()">Click</button>
Link

リンクの無効化

href属性を削除することでリンクを無効化できます。たとえばonclickイベントでhref属性を削除すれば、2度クリックされることを防ぐことができます。

link.onclick = function()
{
    this.removeAttribute( 'href' )
    return false;
}

参考

関連ページ

JavaScriptのドキュメントから検索