「target」としても動作するのはなぜですか?

id要素はwindowオブジェクトのプロパティとしてセットされるからですが、getElementById()やquerySelector()で取得してから利用しましょう。
2020年9月23日
ユーザー

次のように、定数「targetNode」を指定するべきところを間違えて「target」を指定してしまったのですが、同じように動作します。この「target」は一体何なのでしょうか?

document.querySelector('button').addEventListener('click', () => {
  const targetNode = document.getElementById('target');

  // 間違えてtargetNodeではなくtargetを指定してしまった
  target.textContent = 'Changed!';
  target.title = 'This is the title!';
  target.style.color = 'red';
  target.style.backgroundColor = 'skyblue';

  // targetの中身を確認
  console.dir(target);
});

ブラウザーで実行すると、文字色が赤、背景色が水色に変更されるので、正しく動作しているように見えます。(そのため、自分の間違いに気づくのにしばらく時間がかかりました)

console.dir() を使ってこの定数「target」が何なのか確認したところ、定数「targetNode」と同じく、ID「target」を持っているH1要素でした。

この「target」はどこでも宣言されていないのにエラーにはなりません。どこかで暗黙的に宣言されているものなのでしょうか?

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(5)