LoginSignup
2
1

More than 3 years have passed since last update.

DOMエレメントにid属性を付けたときのSafariの挙動

Last updated at Posted at 2017-06-26

W3CにDOMエレメントのidがグローバル変数になる仕様があるそうです。
つまり、

<div id="hoge"></div>

とした場合に

window.hoge === document.getElementById("hoge")

がtrueとなります。

そこまではいいとして、そのあとの挙動が他のブラウザとSafariで異なりました。

もう一度

<div id="hoge"></div>

のとき、

const hoge = "yeah!";
console.log(hoge);

Chrome, FireFox等は "yeah!" と表示できますが、
Safariではconstで二重宣言した場合と同じエラーが出ます。

仕様にないからなのか、Safariのバグなのか…?
これを知って迂闊にidを命名できなくなりました…

追記 (2019/06/21)

Safari が修正してくれました

仕様にないからなのか、Safariのバグなのか…?

どうやらバグだったようです
idと同名の変数を宣言してもエラーは出なくなりました

例えば、

const hoge = 1
console.log(hoge)

としてもエラーは出ず、

1

ちゃんと返ってきます:tada:

余談

ではこうしてみましょう

console.log(hoge)
const hoge = 1
console.log(hoge)
Uncaught ReferenceError: Cannot access 'hoge' before initialization

不思議なことに、ちゃんとエラーが出ます ( Safari, Chrome, Firefox ともに同じ挙動です )
同名の変数が宣言されているプログラム内では明示的に window.hoge としないと呼び出せなくなるようです

( 苦し紛れの対応に見えます……? )

さらに余談

windowオブジェクトのプロパティ群を探していたのですが、hogeは見当たりません
直下にないなら __proto__? prototype? document下? などと探してみても見当たりません
一体どこに格納されているのでしょう…?

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1