i-mobile
次へ下へ

Everyday Pieces ::

ありふれたカケラ::人生というジグソーパズルのピースたち

‘HTML5’ タグのついている投稿

1234次へ >>

HTML内でIDな要素はグローバルに参照できる!

プログラム / HTML5
公開日:2015年5月3日

先日、とあるJavaScriptなソースを眺めていた所、
変数宣言もなくHTML内のIDな要素を参照しているのを発見しました。
HTMLを見てみると確かに同じ名前のIDな要素が見つかりましたが、
var hoge = document.getElementById('hoge'); とかやって
参照するものだとばかり思っていたので、
なんじゃこれはと気になった次第です。

調べてみた所、
HTML内でIDをつけた要素はJavaScriptのグローバル変数に格納される
という記事を見つけました。
いやぁ〜、いまの今まで全然知りませんでした。
HTML5の仕様の一つになっているようです。

ただ、ブラウザによって実装は異なるようです。
先の記事を引用すると、

Chromeはwindowのプロトタイプで、
Firefoxはwindowのプロトタイプのプロトタイプで、
ie11(とie9)はwindowそのもののプロパティに出てきますね。

となっており、同じグローバルでも違いがあるようです。

さらに興味深いことに、
グローバル参照と getElementById() とで速度を比較した方がいました。
こちらによると getElementById() の方が速いという結果になりました。
jsPerfで試せるようになっていたので、
実際にやってみたら確かにそのようになりました。
私の環境では5倍くらいの差が出ていました。

結論としては、

特定の要素にname属性をつけた場合も同じようにアクセスできたり、
windowオブジェクトがもともと持ってるプロパティ名は上書きできないとか色々ありました。

とあるように、環境によって副作用がありそうなのと、
速度的にもメリットがなさそうなので、
素直に getElementById() を使うのが良い
ということになりそうですね。
今までのやり方を変えなくていいんです(^_^;)

[img_0+]

タグ:HTML5


i-mobile
上へ次へ