document.getElementById、$("#id")、またはその他の DOM メソッド/jQuery セレクターが要素を見つけられない理由として考えられるものは何ですか?
質問の例:
.val()、>.html()、.text()) はunknownを返す標準 DOM メソッドでは、次のエラーが発生します:Uncaught TypeError: null プロパティ '...' を設定できません キャッチされない TypeError: null にプロパティを設定できません (「...」を設定) キャッチされない TypeError: null のプロパティ '...' を読み取れません キャッチされない TypeError: null のプロパティを読み取ることができません (「...」を読み取ります)最も一般的な形式は次のとおりです:
Uncaught TypeError: プロパティ 'onclick' を null に設定できません キャッチされない TypeError: null のプロパティ 'addEventList ener' を読み取れません キャッチされない TypeError: null のプロパティ 'style' を読み取れません
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
短い:探している要素がドキュメント内にまだ存在しないためです。
この回答の残りの部分では、たとえば
getElementByIdを使用しますが、同じことがgetElementsByTagNameにも当てはまります。querySelector、および要素を選択するその他の DOM メソッド。考えられる理由
要素が存在しない可能性がある 3 つの理由:
iframe渡された ID を持つ要素はドキュメント内に存在しません。
getElementByIdgetElementByIdに渡す ID が実際に (生成された) HTML 内の既存の要素の ID と一致すること、および ID のスペルを間違えていないことを再確認する必要があります (ID は大文字と小文字が区別されます#) # #!)。を使用する場合は、要素の ID を
のみ指定してください (例:document.getElemntById("the-id "))。 CSS セレクターを受け入れるメソッド (querySelectorなど) を使用している場合は、ID を探していることを示すために ID の前に# を必ず含めてください (たとえば、 ,document.querySelector(" #the-id"))。getElementByIdで# を使用することはできません。querySelectorなどで使用する必要があります。また、ID がCSS 識別子(例:.) 内に含まれる場合、.文字を含むid属性は不適切であることにも注意してください (ただし、動作します)、querySelector(document.querySelector("#the\\.id"))) を使用する場合はこれらをエスケープする必要がありますが、getElementById(>document.getElementById("the.id"))。getElementByIdを呼び出したときに要素は存在しませんでした。ページ上に要素が表示されている場合でも、その要素は
iframeiframe(独自のドキュメント) 内にあるため、クエリしているドキュメントには含まれていません。
iframe問題が原因 3 (iframeまたは同様のファイルにある) である場合は、親ドキュメントではなく要素を指定し、その
divcontentDocument属性を使用してそのドキュメントにアクセスします (同じオリジンのみ)。この回答の残りの部分では、最初の 2 つの理由について説明します。2 番目の理由 - まだ出現していない - は一般的です。ブラウザは HTML を上から下に解析して処理します。これは、DOM 要素が HTML に表示される前に発生する DOM 要素への呼び出しは失敗することを意味します。次の例を考えてみましょう: リーリーは
script の後のに表示されます。スクリプトが実行されるとき、要素はまだ存在しないため、
getElementByIdはnullを返します。jQuery同じことがすべての jQuery セレクターに当てはまります。セレクターのスペルを間違えた場合、または実際に存在する前にセレクターを選択しようとした場合、jQuery はセレクターを見つけられません。さらなる問題は、プロトコルを使用せずにスクリプトをロードし、ファイル システムから実行しているため、jQuery が見つからない場合です。リーリー
この構文は、プロトコル https:// のページでは HTTPS 経由でスクリプトをロードし、プロトコル http:// のページでは HTTP バージョンをロードできるようにするために使用されます。
これには、file://somecdn.somewhere.com...
をロードしようとしましたが失敗するという残念な副作用があります。
(またはその他の DOM メソッド) を呼び出す前に、アクセスしたい要素が存在すること、つまり DOM がロードされていることを確認してください。＃＃＃＃＃＃解決＃＃＃＃＃＃getElementByIdこれは、JavaScriptを対応する DOM 要素の後に配置するだけで確実に行うことができます
リーリーこの場合、本体終了タグ (
) の前にコードを配置することもできます (スクリプトの実行時にすべての DOM 要素が使用可能になります)。他のソリューションには、
load検索しようとしている要素は、スクリプトの実行時にはDOM にありません。
DOM に依存するスクリプトの場所は、その動作に重大な影響を与える可能性があります。ブラウザは HTML ドキュメントを上から下に解析します。要素は DOM に追加され、スクリプトは (通常は) 要素が見つかったときに実行されます。これは、順序が重要であることを意味します。通常、マークアップ内で後から表示される要素はまだ DOM に追加されていないため、スクリプトはこれらの要素を見つけることができません。
次のタグについて考えてみましょう。スクリプト #1 は
を見つけることができませんが、スクリプト #2 は成功します:
リーリー