jQuery または getElementById が要素を見つけられないのはなぜですか?

Question

document.getElementById、$("#id")、またはその他の DOM メソッド/jQuery セレクターが要素を見つけられない理由として考えられるものは何ですか?問題の例としては、次のようなものがあります。 jQuery がイベント ハンドラーのバインドにサイレントで失敗する jQuery の「getter」メソッド (.val()、>.html()、.text()) が未定義を返す null を返す標準 DOM メソッドが次のエラーで結果を返します: Uncaught TypeError: null プロパティ「..」を設定できません。

P粉976737101 · Answer

短い: 探している要素がドキュメント内にまだ存在しないためです。

この回答の残りの部分では、たとえば getElementById を使用しますが、同じことが getElementsByTagName にも当てはまります。 querySelector、および要素を選択するその他の DOM メソッド。

考えられる理由

要素が存在しない可能性がある 3 つの理由:

渡された ID を持つ要素はドキュメント内に存在しません。 getElementById に渡す ID が実際に (生成された) HTML 内の既存の要素の ID と一致すること、および ID のスペルを間違えていないことを再確認する必要があります (ID は 大文字と小文字が区別されます#) # #!)。
getElementById
を使用する場合は、要素の 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 を呼び出したときに要素は存在しませんでした。
ページ上に要素が表示されている場合でも、その要素は iframe (独自のドキュメント) 内にあるため、クエリしているドキュメントには含まれていません。
iframe
問題が原因 3 (iframe または同様のファイルにある) である場合は、親ドキュメントではなく
iframe

iframe

要素を指定し、その contentDocument 属性を使用してそのドキュメントにアクセスします (同じオリジンのみ)。この回答の残りの部分では、最初の 2 つの理由について説明します。 2 番目の理由 - まだ出現していない - は一般的です。ブラウザは HTML を上から下に解析して処理します。これは、DOM 要素が HTML に表示される前に発生する DOM 要素への呼び出しは失敗することを意味します。次の例を考えてみましょう: リーリー

div

は

script

の後の

に表示されます。スクリプトが実行されるとき、要素はまだ存在しないため、getElementById は null を返します。 jQuery

同じことがすべての jQuery セレクターに当てはまります。セレクターのスペルを間違えた場合、または実際に存在する前にセレクターを選択しようとした場合、jQuery はセレクターを見つけられません。さらなる問題は、プロトコルを使用せずにスクリプトをロードし、ファイルシステムから実行しているため、jQuery が見つからない場合です。


リーリー
この構文は、プロトコル https:// のページでは HTTPS 経由でスクリプトをロードし、プロトコル http:// のページでは HTTP バージョンをロードできるようにするために使用されます。
 これには、file://somecdn.somewhere.com...
 をロードしようとしましたが失敗するという残念な副作用があります。

＃＃＃＃＃＃解決＃＃＃＃＃＃
getElementById
 (またはその他の DOM メソッド) を呼び出す前に、アクセスしたい要素が存在すること、つまり DOM がロードされていることを確認してください。 
これは、JavaScript  を  対応する DOM 要素の後に配置するだけで確実に行うことができます
リーリー
この場合、本体終了タグ (
) の前にコードを配置することもできます (スクリプトの実行時にすべての DOM 要素が使用可能になります)。 
 他のソリューションには、
load

P粉275883973 · Answer

検索しようとしている要素は、スクリプトの実行時には DOM にありません。

DOM に依存するスクリプトの場所は、その動作に重大な影響を与える可能性があります。ブラウザは HTML ドキュメントを上から下に解析します。要素は DOM に追加され、スクリプトは (通常は) 要素が見つかったときに実行されます。 これは、順序が重要であることを意味します。 通常、マークアップ内で後から表示される要素はまだ DOM に追加されていないため、スクリプトはこれらの要素を見つけることができません。

次のタグについて考えてみましょう。スクリプト #1 は

 を見つけることができませんが、スクリプト #2 は成功します: 



リーリー