jQuery 또는 getElementById가 요소를 찾을 수 없는 이유는 무엇입니까?

Question

document.getElementById、$("#id") 또는 다른 DOM 메서드/jQuery 선택기로 요소를 찾을 수 없는 가능한 이유는 무엇입니까?

샘플 질문은 다음과 같습니다:

• jQuery가 자동으로 이벤트 핸들러 바인딩에 실패함
• jQuery “getter” 메소드(.val()、>.html()、.text()) 返回 undefined
• 표준 DOM 메소드가 null를 반환하면 다음 오류가 발생합니다.

잡히지 않은 TypeError: null 속성 '...'을 설정할 수 없습니다.

잡히지 않은 TypeError: null에 속성을 설정할 수 없습니다('...' 설정)

잡히지 않은 TypeError: null의 '...' 속성을 읽을 수 없습니다

잡히지 않은 TypeError: null 속성을 읽을 수 없습니다('...' 읽기)

가장 일반적인 형식은 다음과 같습니다.

잡히지 않은 TypeError: 'onclick' 속성을 null로 설정할 수 없습니다

잡히지 않은 TypeError: null의 'addEventList ener' 속성을 읽을 수 없습니다

잡히지 않은 TypeError: null의 'style' 속성을 읽을 수 없습니다

Answer 1

짧은: 찾고 있는 요소가 아직 문서에 존재하지 않기 때문입니다.

---

이 답변의 나머지 부분에서는 예: getElementById ，但这同样适用于 getElementsByTagName, < code>querySelector 및 기타 DOM 방법을 사용하여 요소를 선택하겠습니다.

가능한 이유

요소가 존재하지 않는 세 가지 이유:

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")를 사용하는 경우

   단지
요소의 ID(예: document.getElemntById("the-id "))를 제공해야 합니다. CSS 선택기를 허용하는 메서드(예: querySelector)를 사용하는 경우 ID 앞에 #를 포함하여 ID( 예를 들어 document.querySelector("#the-id"))입니다.
2. 와 함께 #를

   사용할 수 없으며 getElementById,

   반드시
querySelector 및 이와 유사한 것과 함께 사용해야 합니다. 또한 ID에 (예: .; . 문자를 포함하는 id 속성은 나쁜 습관이지만 유효함), querySelector <를 사용해야 합니다. /code> (document.querySelector("#the\.id"))) , 하지만

( >document.getElementById("the.id") )를 사용하세요. iframe 中（这是它自己的文档）。当您搜索包含 iframe

에 전화했을 때 요소가 존재하지 않았습니다. iframe 或类似文件中），您需要查看 iframe 中的文档，而不是父文档，也许可以通过获取 iframe 元素并使用其 < code>contentDocument

🎜페이지에서 요소를 볼 수 있더라도 검색되지 않은 🎜 요소에 대한 문서에 있기 때문에 쿼리하는 문서에는 없습니다. 🎜 🎜 🎜 🎜문제가 이유 3인 경우(해당 문서에 액세스하기 위한 🎜🎜 속성(동일한 출처만 해당)) 이 답변의 나머지 부분에서는 처음 두 가지 이유를 다룹니다.

두 번째 이유 - 아직 존재하지 않음 - 매우 일반적입니다. 브라우저는 HTML을 위에서 아래로 구문 분석하고 처리합니다. 이는 DOM 요소가 HTML에 나타나기 전에 발생하는 DOM 요소에 대한 모든 호출이 실패함을 의미합니다.

다음 예를 고려해보세요:

으아아아

div 出现在script之后。执行脚本时，该元素尚不存在，并且 getElementById 将返回 null.

jQuery

이는 모든 jQuery 선택기에도 적용됩니다. 선택자의 철자를 틀리거나 실제로 존재하기 전에 선택하려고 하면 jQuery는 해당 항목을 찾지 못합니다.

또 다른 문제는 프로토콜 없이 스크립트를 로드하고 파일 시스템에서 실행했기 때문에 jQuery를 찾을 수 없는 경우입니다.

으아아아

이 구문은 프로토콜이 https://인 페이지에서 HTTPS를 통해 스크립트를 로드하고 프로토콜이 http://인 페이지에서 HTTP 버전을 로드할 수 있도록 하는 데 사용됩니다.

로드를 시도했지만 file://somecdn.somewhere.com...

실패하는 불행한 부작용이 있습니다.

---

솔루션

getElementById(또는 해당 문제에 대한 DOM 메서드)를 호출하기 전에 액세스하려는 요소가 존재하는지, 즉 DOM이 로드되었는지 확인하세요.

이를 보장하려면 해당 DOM 요소 뒤에 JavaScript를 배치하기만 하면 됩니다

으아아아

이 경우 닫는 body 태그() 앞에 코드를 배치할 수도 있습니다(스크립트 실행 시 모든 DOM 요소를 사용할 수 있습니다).

다른 솔루션에는 load load ^[MDN] 或 DOMContentLoaded[MDN] 또는 DOMContentLoaded

[MDN]

이벤트. 이러한 경우 JavaScript 코드를 문서의 어디에 배치하는지는 중요하지 않습니다. 모든 DOM 처리 코드를 이벤트 핸들러에 배치하는 것만 기억하세요. 예:

으아아아

이벤트 처리 및 브라우저 차이점에 대한 자세한 내용은 quirksmode.org 에서 이 기사를 참조하세요.

jQueryhttp: 或 https:

먼저 jQuery가 올바르게 로드되었는지 확인하세요.

브라우저의 개발자 도구를 사용하세요. load/DOMContentLoaded 事件正是 jQuery 使用 .ready() jQuery 파일이 발견되었는지 확인하고 그렇지 않은 경우 URL을 수정하세요(예: 처음에 구성표 추가, 경로 조정 등) 듣기

[문서]🎜🎜🎜. DOM 요소에 영향을 미치는 모든 jQuery 코드는 이 이벤트 핸들러 내에 있어야 합니다. 🎜

사실 jQuery 튜토리얼에는 다음과 같이 명확하게 명시되어 있습니다.

으아악

또는 단축 구문을 사용할 수 있습니다:

으아악

둘 다 동일합니다.

Answer 2

스크립트가 실행될 때 찾으려는 요소가 DOM< /a>에 없습니다.

DOM에 의존하는 스크립트의 위치는 해당 동작에 큰 영향을 미칠 수 있습니다. 브라우저는 HTML 문서를 위에서 아래로 구문 분석합니다. 요소는 DOM에 추가되고 스크립트는 (일반적으로) 요소가 발견될 때 실행됩니다. 순서가 중요하다는 의미입니다. 스크립트는 아직 DOM에 추가되지 않았기 때문에 마크업의 뒷부분에 나타나는 요소를 찾을 수 없는 경우가 많습니다.

다음 마크업을 고려하세요. 스크립트 #1은

을 찾을 수 없지만 스크립트 #2는 성공합니다.

으아아아