javascript - Chrome console.log(elementID) はコンソールに要素を出力します

Question

<input type="text" placeholder="Password" id="password" name="password" />
<script>
    console.log(password);
</script>

上記のコードは、コンソールに次のように出力します。

<input type="text" placeholder="Password" id="password" name="password">

変数を出力したときにこれにpassword気付き、HTML が先頭に追加されていることに気付きました。それは正常な動作ですか？その場合、私たちは何のために持っていgetElementByIdますか？

Answer 1

Getting an element using window[element id] or window[element name] is standard behavior implemented by all modern browsers since Firefox 14. I'll refer you to a few posts on the subject. As you'll find in most posts about the matter, use of the behaviour is not recommended and generally slower as browsers optimize .getElementById and checking if a variable is an id or name is the lowest priority in global scope.

• Do DOM tree elements with ids become global variables?
• Can I use the id of an HTML element as a variable in JavaScript?

Answer 2

従来の動作は、ID (および名前だと思います) を持つすべての要素を のプロパティとして定義することですwindow。したがって、window.password(または単にpassword) は、理論的には のショートカットとして使用できgetElementByIdます。ただし、同じ名前の変数を定義するとすぐに、予期しない動作が発生します。

これが、グローバル変数が良くない理由の 1 つです。常にローカルで変数を定義してくださいvar。