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

Question

document.getElementById、$("#id")、またはその他の DOM メソッド/jQuery セレクターが要素を見つけられない理由として考えられるものは何ですか?

質問の例:

• jQuery はイベント ハンドラーのバインドにサイレントで失敗します
• jQuery の「ゲッター」メソッド (.val()、>.html()、.text()) は unknown
を返します
• null を返す標準 DOM メソッドでは、次のエラーが発生します:

Uncaught TypeError: null プロパティ '...' を設定できません

キャッチされない TypeError: null にプロパティを設定できません (「...」を設定)

キャッチされない TypeError: null

のプロパティ '...' を読み取れません キャッチされない TypeError: null のプロパティを読み取ることができません (「...」を読み取ります)

最も一般的な形式は次のとおりです:

Uncaught TypeError: プロパティ 'onclick' を null に設定できません

キャッチされない TypeError: null

のプロパティ 'addEventList ener' を読み取れません キャッチされない TypeError: null のプロパティ 'style' を読み取れません

Answer 1

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

---

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

考えられる理由

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

1. 渡された 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 を呼び出したときに要素は存在しませんでした。

2. ページ上に要素が表示されている場合でも、その要素は iframe (独自のドキュメント) 内にあるため、クエリしているドキュメントには含まれていません。

   iframe
に要素を含むドキュメントを検索する場合、これらの要素は検索されません。

3. 問題が原因 3 (iframe または同様のファイルにある) である場合は、親ドキュメントではなく

   iframe
内のドキュメントを確認する必要があります。

iframe

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

div

は

script

の後の

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

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

リーリー

この構文は、プロトコル https:// のページでは HTTPS 経由でスクリプトをロードし、プロトコル http:// のページでは HTTP バージョンをロードできるようにするために使用されます。

これには、

file://somecdn.somewhere.com...

をロードしようとしましたが失敗するという残念な副作用があります。 ＃＃＃＃＃＃解決＃＃＃＃＃＃ getElementById

(またはその他の DOM メソッド) を呼び出す前に、アクセスしたい要素が存在すること、つまり DOM がロードされていることを確認してください。

---

これは、JavaScript を 対応する DOM 要素の後に配置するだけで確実に行うことができます

リーリー

この場合、本体終了タグ (

) の前にコードを配置することもできます (スクリプトの実行時にすべての DOM 要素が使用可能になります)。

他のソリューションには、

load

[MDN]

または DOMContentLoaded のリッスンが含まれます。 ^[MDN] イベント。このような場合、JavaScript コードをドキュメント内のどこに配置しても問題はありません。すべての DOM 処理コードをイベント ハンドラーに配置することを忘れないでください。 ＃＃＃例：＃＃＃ リーリー イベント処理とブラウザの違いの詳細については、quirksmode.org の記事 を参照してください。 jQuery

まず、jQuery が正しくロードされていることを確認してください。

ブラウザの開発者ツールを使用します

jQuery ファイルが見つかるかどうかを確認し、見つからない場合は URL を修正します (例: 先頭に http: または

https:

スキームを追加します)パスの調整など) Listening

load

/DOMContentLoaded このイベントは、まさに jQuery が使用するものです .ready()

[ドキュメント]

。 DOM 要素に影響を与えるすべての jQuery コードは、このイベント ハンドラー内に存在する必要があります。 実際、jQuery チュートリアル には次のように明確に記載されています。 リーリー 代わりに、次の短縮構文を使用することもできます: リーリー ^{この 2 つは同等です。}

Answer 2

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

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

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

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

リーリー