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