Javascript 및 jQuery는 HTML 요소를 감지할 수 없습니다.

Javascript 및 jQuery를 사용하여 HTML 요소를 조작하려고 할 때 실망스러운 문제가 발생할 수 있습니다. 정의되지 않은 요소. 이는 스크립트가 HTML 문서에 아직 정의되지 않은 요소에 액세스하려고 시도할 때 발생합니다.

제공된 HTML 및 스크립트에서 "script.js" 파일은 HTML 요소보다 먼저 로드됩니다. 상호 작용합니다. 이는 스크립트 태그가 문서의

다음은 이벤트 순서에 대한 간단한 설명입니다.

1. HTML 문서가 구문 분석되어 HTML 요소가 생성됩니다.
2. jQuery용 스크립트 태그가 발견되고 jQuery 파일이 로드됩니다.
3. 분석이 재개되고 스크립트 태그가 생성됩니다. for "script.js."
4. 파싱이 일시 중지되고 "script.js" 파일이 로드될 때까지 기다립니다.
5. "script.js" 파일이 실행되지만 div 요소가 로드를 시도합니다. 액세스할 수 있는 항목이 아직 생성되지 않았습니다.

이 문제를 해결하려면 다음과 같은 몇 가지 옵션이 있습니다.

스크립트 블록 이동

가장 간단한 해결책은 스크립트 태그를 HTML 문서 끝, 태그 바로 앞으로 이동하는 것입니다. 이렇게 하면 스크립트가 액세스를 시도하기 전에 모든 HTML 요소가 정의됩니다.

jQuery의 Ready 함수 사용

jQuery는 다음을 지정할 수 있는 준비된 함수를 제공합니다. DOM이 준비되면 실행될 콜백 함수입니다. 이렇게 하면 HTML 요소가 정의된 후에만 스크립트 코드가 실행됩니다.

지연 속성 사용

또 다른 옵션은 스크립트 태그에 연기 속성을 추가하는 것입니다. . 그러나 이 속성은 모든 브라우저에서 지원되지 않으므로 주의해서 사용해야 합니다.

이러한 방법 중 하나를 따르면 Javascript 및 jQuery 코드가 문서에 정의된 HTML 요소와 성공적으로 상호 작용할 수 있습니다. .