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は無効なテーブル幅設定の問題を解決します

推薦する

ノード スキャフォールディングを使用してトークン検証を実装するサーバーを構築する方法

コンテンツスキャフォールディングを使用してノードプロジェクトを素早く構築するデータベースとやり取りす...

CSS 水平方向の中央揃えと最大幅の制限

CSS レイアウトとスタイルに関する質問: 水平方向の中央揃えと最大幅の制限のバランスをとる方法最近...

4 つの主要な SQL ランキング関数 ROW_NUMBER、RANK、DENSE_RANK、NTILE の使用方法の紹介

1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...

JSはショッピングカート効果の単純な加算と減算を実装します

この記事の例では、ショッピングカートの簡単な追加と削除を実現するためのJSの具体的なコードを参考まで...

Vue プロジェクトでのスキャンコード決済の実装例 (デモ付き)

目次需要背景思考分析UI 表示始める1. 支払いコンポーネントテンプレートを作成する2. 支払いコン...

Redux Toolkit で Redux を簡素化する方法

目次Redux Toolkitが解決する問題何が含まれていますか? Redux Toolkit AP...

CSS スティッキーフッタークラシックレイアウトの実装

スティッキーフッターレイアウトとは何ですか?一般的な Web ページのレイアウトは、通常、ヘッダー部...

js 学習ノート: class、super、extends キーワード

目次序文1. es6の前にオブジェクトを作成する2. es6 後のクラス宣言3. クラスの継承4. ...

JavaScript での AOP プログラミングの基本実装

AOP の紹介AOP (アスペクト指向プログラミング) の主な機能は、コアビジネスロジックモジュール...

MySQL の中国語文字化け問題の解決方法

1. LinuxのMySQLで中国語の文字化けが発生する。以下の操作を実行する。 vi /etc/m...

VMware 仮想マシンのネットワークの問題の解決方法

目次1. 問題の説明2. 問題解決1. 仮想マシンシステムのインストール時にネットワークがない場合2...

HTML におけるメタの役割について (インターネットから収集および分類)

W3Cschoolではこのように説明しています<meta> 要素は、検索エンジン向けの説...

docker によってプルされたイメージがどこに保存されるかの詳細な説明

20200804追記:記事の内容に誤りがある可能性があります。他の回答を検索することもできます。 d...

大きなオフセットによる MySQL 制限ページングが遅い理由と最適化ソリューション

MySQL では通常、limit を使用してページ上のページング機能を完了しますが、データ量が大きな...

JSでユーザーを追跡する方法

目次1. 同期AJAX 2. 非同期AJAX 3. ユーザーのクリックを追跡する4. リバウンドトラ...