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' を読み取れません
短い: 探している要素がドキュメント内にまだ存在しないためです。
この回答の残りの部分では、たとえば
getElementById
を使用しますが、同じことがgetElementsByTagName
にも当てはまります。 querySelector、および要素を選択するその他の DOM メソッド。考えられる理由
要素が存在しない可能性がある 3 つの理由:
渡された 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
または同様のファイルにある) である場合は、親ドキュメントではなく要素を指定し、その
2 番目の理由 - まだ出現していない - は一般的です。ブラウザは HTML を上から下に解析して処理します。これは、DOM 要素が HTML に表示される前に発生する DOM 要素への呼び出しは失敗することを意味します。 次の例を考えてみましょう: リーリー
divcontentDocument
属性を使用してそのドキュメントにアクセスします (同じオリジンのみ)。この回答の残りの部分では、最初の 2 つの理由について説明します。
は
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 は成功します:
リーリー