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

推薦する

WeChatアプレットを使用して天井効果を実現する方法の例

目次1. 実装2. 問題点3. より良い実装方法があるかどうか検討する要約する背景は日付のタイトルで...

CSS の :focus-within の楽しさについて簡単に説明します

Bステーションでパスワードを入力するときに目を覆っているこの画像を見たことがある人もいると思いますこ...

DockerがMySQL構成実装プロセスを開始

目次実際の戦闘プロセスまずは主なコマンドと詳細を一つずつ説明しましょう起動が成功したかどうかを確認す...

MySQL クエリ ステートメントのプロセスと EXPLAIN ステートメントの基本概念とその最適化

ウェブサイトやサービスのパフォーマンスは、データベースの設計(適切な言語開発フレームワークを選択した...

ECMAScript の演算子を理解するための記事

目次単項演算子ブール演算子乗算演算子加法演算子関係演算子等価演算子条件演算子代入演算子カンマ演算子要...

エレメントアバターアップロード練習

この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...

よく使われるn番目の子セレクターをまとめる

序文フロントエンドプログラミングでは、奇数、偶数などの数値を受け入れることができる nth-chil...

RGBA の「a」は何を意味するのでしょうか? CSS RGBA カラー ガイド

RGBAは色の値と透明度を設定できるCSSカラーです以下は、rgba() を使用して白色を 50% ...

MySQL ログの設定と表示方法

MySQL には次のログがあります。エラーログ: -log-errクエリログ: -logスロークエリ...

要素UIテーブルはドロップダウンフィルタリング機能を実現します

この記事の例では、要素UIテーブルにドロップダウンフィルタリングを実装するための具体的なコードを参考...

MySQL スケジュールタスクの実装と使用例

この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...

CSS でマウスの位置をマッピングし、マウスを動かしてページ要素を制御する (サンプル コード)

マウスの位置をマッピングしたり、ドラッグ効果を実装したりすることは、 JavaScriptで行うこと...

CentOS の起動時に RabbitMq ソフトウェアを自動的に起動する方法

1. /etc/init.dディレクトリに新しいrabbitmqを作成します。 [root@loca...