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

推薦する

Linux で大きなファイルの指定された内容を見つける方法

大きなことも小さなことも考えて、方向転換しましょう。 Linux では非常に大きなファイルに遭遇する...

超大型フォントを使用した 40 の Web ページ デザイン

今日の Web デザインでは、非常に大きなフォントが表示される傾向があります。これらのオープンソース...

IDEA 2020.3.1 で Tomcat をデプロイし、最初の Web プロジェクトを作成するプロセスの詳細な説明

目次Tomcat の紹介Tomcat の展開Web プロジェクトの作成tomcatの設定プロジェクト...

ユーザーエクスペリエンスの要素またはWebデザインの要素

システムとユーザー環境の設計<br />Apple システムの成功は、そのシステム アー...

Dreamweaver8を使用してウェブサイトのファイルをチェックして整理する方法

Dreamweaver8 を使用して独自の Web サイトを作成する目的は何ですか?インターネットに...

MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法を参考ま...

react-beautiful-dnd を使用してリスト間のドラッグ アンド ドロップを実装する

目次react-beautiful-dndを選ぶ理由基本的な使い方基本概念使い方使用中に発生した問題...

MySQL サービスを起動できない問題の解決策を含む MySQL 5.7.17 インストール チュートリアル

.net 開発に関しては、Microsoft の SQL Server データベースに精通しており、...

Node.jsで子プロセスを作成する方法

目次導入子プロセスプロセスを非同期的に作成する同期作成プロセス導入Node.js のメイン イベント...

タイプファイルの入力ボタン機能の研究

<br />一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると[フ...

CentOS 7.x に ZSH ターミナルをインストールする方法

1. 基本コンポーネントをインストールするまず、 yumコマンドを実行して、コードpullために必要...

NodeはMySQLに接続し、追加、削除、変更、チェックのための実装コードをカプセル化します。

目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...

MySQLの誤操作後にbinlog2sqlを使用して素早くロールバックする方法の詳細な説明

序文日常の仕事や勉強では、データベースを操作するときに「不注意」によるミスを犯すことは避けられません...

MySQL 5.7.15 バージョンのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQLバージョン5.7のインストール方法と使用方法、およびデータベースデータの保存...

MySQL の最適化: 高品質の SQL 文を書く方法

序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...