[JavaScript] <head>에 넣은 <script>가 적용이 안된다? DOM 렌더링 시점에 따른 JS 호출 제어

<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를 적용할 수 없다고 말하고 있는 것이다.

따라서 이 경우에는 두 가지의 빠른 해결 방법이 있다.

DOM 요소를 지정하는 코드가 포함된 JavaScript 파일이 DOM 요소가 렌더링 된 뒤에 호출되야 한다면, 단순하게 생각해서 해당 DOM 요소의 다음 순서로 호출되도록 위치를 수정해주면 된다.

<body>
    <h1>Hello World</h1>
    <script src="index.js"></script>
</body>

DOMContentLoaded는 모든 DOM 요소가 렌더링된 다음에 호출되도록 정의하는 이벤트 코드이다.
따라서, 이는 <body> 태그 하단에서 <script> 태그를 호출하는 것과 거의 동일한 동작을 한다.

document.addEventListener('DOMContentLoaded', () => {
  // DOM 렌더링 완료 후에 호출할 코드
  document.querySelector('h1').style.color = 'red';
})

위 코드를 jQuery로 적용할 시에는 아래와 같이 작성한다.

$(document).ready(() => {
  $('h1').css('color', 'red');
})

티스토리툴바