DOM Clobbering の「上書き」とは？

Hello there, ('ω')ノ

1. 通常のDOMの仕組み

HTML要素には id や name を付けられます。 例えば：

<input id="user">

するとJavaScriptからはこうアクセスできます：

document.getElementById("user"); // <input id="user">

これは普通の動きです。

---

2. プロパティと名前が衝突するケース

ブラウザにはすでに「予約されているDOMプロパティ」があります。 例えば form.elements は「フォーム内のすべての入力要素」を表します。

<form id="f">
  <input id="username" name="username">
  <input id="password" name="password">
</form>

JavaScriptで：

document.getElementById("f").elements;
// → username と password の input が含まれるリスト

---

3. Clobbering（上書き）が起きる例