document.getElementBy系メソッドがオブジェクトを取得できない問題を解決する

document.getElementBy系メソッドがオブジェクトを取得できない問題を解決する

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

ブラウザがドキュメントを解析するときにはシーケンスがあります。ページが読み込まれる前、または対応する DOM オブジェクトが読み込まれる前は、対応するオブジェクトを取得できません。

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

<スクリプト>
    var temp = document.getElementById("div");
    アラート(一時);
</スクリプト>
<本文>
<div id="div">
    <input name="ユーザー名" id="ユーザー名" type="テキスト">
    <button id="btn">ボタン</button>
</div>
</本文>

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

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

解決策: スクリプト内のコードを body 要素の後に移動します。

<本文>
<div id="div">
    <input name="ユーザー名" id="ユーザー名" type="テキスト">
    <button id="btn">ボタン</button>
</div>
<スクリプト>
    var temp = document.getElementById("div");
    アラート(一時);
</スクリプト>
</本文>

またはwindow.onloadを追加する

<スクリプト>
window.onload = 関数(){
    var temp = document.getElementById("div");
    アラート(一時);
    }
</スクリプト>

要約する

以上が、document.getElementBy系メソッドでオブジェクトが取得できない問題の解決方法の編集者による紹介です。皆様のお役に立てれば幸いです。123WORDPRESS.COMサイトを今後ともよろしくお願いいたします!

<<: 

>>:  HTMLは無効なテーブル幅設定の問題を解決します

推薦する

MySQL のキーとインデックスの違い

まずはコードを見てみましょう: ALTER TABLE reportblockdetail ADD ...

CentOS7でルートパスワードをリセットする方法

レンガを移動するプロセスでは、さまざまな環境および構成の問題があり、毎回異なるエラーが発生します。 ...

HTMLファイル内の中国語の文字化けとブラウザでの表示の問題

今日も私のページが文字化けしていたので、インターネットで関連する問題を検索しました。この方法はかなり...

異なる列を持つテーブルのクエリ結果のSQLマージ操作

2 つの異なるテーブルをクエリするには、結果をマージする必要があります。たとえば、table1 の列...

JavaScript を使用して簡単なアルゴリズムを実行する方法

目次質問1件2つの方法3 実験結果と考察質問1件ご存知のとおり、 Pycharm 、 IDLE 、 ...

CSSの4種類の配置の違いの詳細な説明

フロントエンド開発でよく使われるCSSの配置方法は、位置決めには、通常位置決め、相対位置決め、絶対位...

Virtualbox に Centos7 仮想マシンをインストールする詳細なグラフィック チュートリアル

1. Centos7をダウンロードするダウンロードアドレス: https://mirrors.tun...

vue+elementUI で埋め込みテーブルを実装する方法の例

大学 4 年生のときのインターンシップ中に、表内のデータの番号をクリックすると、そのデータの下に新し...

MySQL での select、distinct、limit の使用

目次1. はじめに2. 選択2.1 単一列のクエリ2.2 複数の列のクエリ2.3 すべての列をクエリ...

MySQL の低速クエリの最適化: 理論と実践からの制限の利点

多くの場合、クエリの結果は最大で 1 つのデータ レコードになることが予想されます。この場合、制限 ...

docker を使用して Django テクノロジー スタック プロジェクトをデプロイする方法

Docker の人気と成熟に伴い、Docker は徐々にプロジェクトをデプロイするための第一の選択肢...

CSSアニメーションとSVGを組み合わせてエネルギーの流れの効果を作成する

最終的な効果は次のようになります。アニメーションは2つのステップに分かれていますランニング軌道を開発...

Vue2.x プロジェクトのパフォーマンス最適化のためのコード最適化の実装

目次1 v-ifとv-showの使用2. 計算と監視を区別する3 v-for トラバーサルでは、アイ...

WeChatアプレットがテキストスクロールを実装

この記事の例では、WeChatアプレットでテキストスクロールを実装するための具体的なコードを参考まで...