짧고 단순함 : 찾고있는 요소가 문서에 존재하지 않기 때문에 (아직)

이 응답의 나머지 I가 사용 getElementById예로서,하지만 동일한 적용 getElementsByTagName, querySelector및 기타 DOM 방법을 선택하는 요소.

가능한 이유

요소가 존재하지 않는 데는 두 가지 이유가 있습니다.

1. 전달 된 ID를 가진 요소가 문서에 실제로 존재하지 않습니다. 전달한 getElementByIdID가 (생성 된) HTML에있는 기존 요소의 ID와 실제로 일치하고 ID 철자를 잘못 입력 하지 않았는지 다시 한 번 확인해야합니다 (ID는 대소 문자를 구분합니다 !).

   또한, 구현 및 메소드 를 구현 하는 대부분의 최신 브라우저 에서 CSS 스타일 표기법은 예를 들어 다음 과 같이 요소를 검색하는 데 사용 됩니다 . 첫 번째 문자는 필수 요소이며 두 번째 문자는 검색되지 않는 요소입니다.querySelector()querySelectorAll()iddocument.querySelector('#elementID')iddocument.getElementById('elementID')#

2. 전화를 거는 순간 요소가 존재하지 않습니다 getElementById.

후자의 경우는 매우 일반적입니다. 브라우저는 HTML을 위에서 아래로 구문 분석하고 처리합니다. 이는 해당 DOM 요소가 HTML에 나타나기 전에 발생하는 DOM 요소에 대한 호출이 실패 함을 의미합니다.

다음 예제를 고려하십시오.

<script>
    var element = document.getElementById('my_element');
</script>

<div id="my_element"></div>

가 div나타납니다 후script . 스크립트가 실행되는 순간, 요소가 존재하지 않습니다 아직 하고 getElementById돌아갑니다 null.

jQuery

jQuery를 사용하는 모든 선택기에 동일하게 적용됩니다. 선택기의 철자가 틀리 거나 실제로 존재하기 전에 선택하려고하면 jQuery가 요소를 찾지 않습니다 .

프로토콜없이 스크립트를로드하고 파일 시스템에서 실행 중이므로 jQuery를 찾을 수없는 경우가 있습니다.

<script src="//somecdn.somewhere.com/jquery.min.js"></script>

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

그것은 시도하고로드하지 못한 불행한 부작용이 있습니다 file://somecdn.somewhere.com...

솔루션

호출하기 전에 getElementById(또는 그 문제에 대한 DOM 메소드) 액세스하려는 요소가 존재하는지 확인하십시오 (예 : DOM이로드 됨).

이것은 단순히 자바 스크립트를 넣어 보장 할 수 후 해당 DOM 요소

<div id="my_element"></div>

<script>
    var element = document.getElementById('my_element');
</script>

이 경우 닫는 body 태그 ( </body>) 바로 앞에 코드를 넣을 수도 있습니다 (스크립트가 실행될 때 모든 DOM 요소를 사용할 수 있음).

다른 솔루션으로는 load ^[MDN] 또는 DOMContentLoaded ^[MDN] 이벤트 듣기가 있습니다. 이 경우 문서에서 JavaScript 코드를 배치하는 위치는 중요하지 않으며 모든 DOM 처리 코드를 이벤트 핸들러에 배치해야합니다.

예:

window.onload = function() {
    // process DOM elements here
};

// or

// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
    // process DOM elements here
});

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

jQuery

먼저 jQuery가 올바르게로드되었는지 확인하십시오. 브라우저의 개발자 도구 를 사용하여 jQuery 파일을 찾았는지 확인하고없는 경우 URL을 수정하십시오 (예 : 처음에 http:또는 https:스키마 추가 , 경로 조정 등).

load/ DOMContentLoaded 이벤트를 듣는 것은 jQuery가 .ready() ^[docs] 로하는 일과 정확히 같습니다 . DOM 요소에 영향을 미치는 모든 jQuery 코드는 해당 이벤트 핸들러 내에 있어야합니다.

실제로 jQuery 튜토리얼 은 다음과 같이 명시 적으로 설명합니다.

jQuery를 사용할 때 수행하는 거의 모든 것이 DOM (Document Object Model)을 읽거나 조작하므로 DOM이 준비 되 자마자 이벤트 등을 추가하기 시작해야합니다.

이를 위해 문서에 대한 준비된 이벤트를 등록합니다.

$(document).ready(function() {
   // do stuff when DOM is ready
});

또는 속기 구문을 사용할 수도 있습니다.

$(function() {
    // do stuff when DOM is ready
});

둘 다 동일합니다.

답변

document.addEventListener('DOMContentLoaded', (event) => {
  //your code to bind the event
});

setTimeout(function(){
  //your code to bind the event
}, 500);