1. ホーム
  2. Web制作
  3. ヒントとコツ

document.getElementByにコメント付随する新バージョンのアセンブリー

2021-12-31 20:42:55

getElementById がオブジェクトを取得できません。

ブラウザのドキュメント解析に順番があり、ページが読み込まれるまで、あるいは対応するDOMオブジェクトが読み込まれるまで、対応するオブジェクトを取得できない。

次のコードを見てください。

<script>
    var temp = document.getElementById("div");
    alert(temp);
</script>
<body>
<div id="div">
    <input name="username" id="username" type="text">
    <button id="btn">button</button>
</div>
</body>

このコードでは document.getElementById("div") はオブジェクトを取得しないので、alert(temp) は null をポップアップします。

これは、ブラウザが script タグのコードを解析するときに、body 内の DOM 要素がまだ読み込まれていないため、当然ながら何も取得できないからです。

解決策 scriptのコードをbody要素の後に移動させる。

<body>
<div id="div">
    <input name="username" id="username" type="text">
    <button id="btn">button</button>
</div>
<script>
    var temp = document.getElementById("div");
    alert(temp);
</script>
</body>

またはwindow.onloadを追加する

<script>
window.onload = function(){
    var temp = document.getElementById("div");
    alert(temp);
    }
</script>

概要

以上、document.getElementByシリーズメソッドがオブジェクトを取得できない問題の解決策ですが、皆様のお役に立てれば幸いです、BinaryDevelopサイトのサポートに大変感謝しております

/p