<head>
<script src="index.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body><head> 태그 안에 넣은 <script> 태그의 스크립트 코드가 적용이 안되는 경우가 있다.
대개의 경우, 이러한 현상이 나타나는 까닭은 DOM 렌더링이 모두 완료되지 않은 상태에서 DOM에 접근하려고 시도했기 때문이다.
예를 들어, index.js의 코드가 다음과 같다고 가정해보자.
// <h1> 태그의 폰트 색상을 빨강색으로 변경
document.querySelector('h1').style.color = 'red';이것을 실행시켜보면 style.color이 적용되지 않고, 브라우저 개발자 도구에서는 Uncaught TypeError: Cannot read properties of null (reading 'style') 오류가 출력된 것을 확인할 수 있다.
이는 JavaScript 코드가 웹 페이지에 적용된 시점에서 querySelector('h1')가 호출되었으나, 해당 코드가 <h1> 요소를 찾지 못했으므로 null에 style.color를 적용할 수 없다고 말하고 있는 것이다.
따라서 이 경우에는 두 가지의 빠른 해결 방법이 있다.
<script>를 DOM 최하단에 적용한다.
DOM 요소를 지정하는 코드가 포함된 JavaScript 파일이 DOM 요소가 렌더링 된 뒤에 호출되야 한다면, 단순하게 생각해서 해당 DOM 요소의 다음 순서로 호출되도록 위치를 수정해주면 된다.
<body>
<h1>Hello World</h1>
<script src="index.js"></script>
</body>실행시킬 JavaScript 코드를 DOMContentLoaded로 감싼다.
DOMContentLoaded는 모든 DOM 요소가 렌더링된 다음에 호출되도록 정의하는 이벤트 코드이다.
따라서, 이는 <body> 태그 하단에서 <script> 태그를 호출하는 것과 거의 동일한 동작을 한다.
document.addEventListener('DOMContentLoaded', () => {
// DOM 렌더링 완료 후에 호출할 코드
document.querySelector('h1').style.color = 'red';
})위 코드를 jQuery로 적용할 시에는 아래와 같이 작성한다.
$(document).ready(() => {
$('h1').css('color', 'red');
})'JavaScript' 카테고리의 다른 글
| [JavaScript] Object key 동적으로 추가하기 (0) | 2025.03.04 |
|---|---|
| [Swiper.js] 복제 DOM 이벤트 부착 시점의 문제 (1) | 2025.02.09 |
