2011年1月27日木曜日

DOMのhashプロパティ×2

URLを構成する文字列のうち、"#…"の部分はフォーマルには "fragment identifier" と呼ばれるが、「フラグメント・アイデンティファイア」と発音しても他人に通じることは稀。"#"は一般的に「ハッシュマーク」や「シャープ」と呼ばれるから、日常会話では「ハッシュ以下」とか「シャープなんとか」などと言えば通じる。

JavaScriptでこの fragment identifier を参照する方法を整理しておく。

window.location.hash

ブラウザで現在表示しているURLの fragment identifier を知りたい場合、JavaScriptでは window.location.hash と書けばよいことが知られている(ちなみに、Mozillaのドキュメント window.location - MDC Doc Center には "DOM Level 0. Not part of any standard." と書いてあるので、W3Cで標準化されたものではない)。

HTMLAnchorElement.hash

location以外に fragment identifier が関係してくる場面としては、a要素のhref属性値を処理する場面がある。実はつい最近までhref属性値を文字列処理して"#…"の部分を取り出す、なんてことをしていたのだがその必要はない。アンカーオブジェクトにもhashプロパティが存在しているので、getElementしてhashプロパティを参照するだけで済む。次の例はアンカーのhref属性値"http://dminor11th.blogspot.com/index.html#foo"のうちの"#foo"をアラートで表示する。

<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <p><a id="a1" href="http://dminor11th.blogspot.com/index.html#foo">anchor1</a></p>
    <script type="text/javascript">
      alert(document.getElementById('a1').hash);
    </script>
  </body>
</html>

ちなみに、このhashプロパティ、つまりHTMLAnchorElementのhashプロパティも、W3Cで標準化されたものではないようだ(DOM Level 2 HTML Spec.等に記載されていない)。Mozillaの HTMLAnchorElement - MDC Doc Center によるとHTML5には記載されるらしい。