[JavaScript] What - DOMContentLoaded 이벤트

하쮸·2025년 10월 30일

DOMContentLoaded JavaScript

Error, Why, What, How

목록 보기

49/62

1. 문서 객체 모델이란?

Document Object Modal(=DOM)
JavaScript - 문서 객체 모델(DOM)

2. DOMContentLoaded를 왜? 써야하는지.

2-1. Ex 1.

HTML 파일의 내용은 위에서부터 아래로 차례대로 실행됨.
script태그를 HTML 파일 내부 어디에 위치하냐에 따라서 실행 순서가 달라짐.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>console.log('head 태그 내부에 script 태그')</script>       <!-- head 태그 내부에 script 태그 -->
</head>
<body>
    <script>console.log('body 태그 내부에 script 태그')</script>       <!-- body 태그 내부에 script 태그 -->
    <h1>DOMContentLoaded </h1>
    <script>console.log('body 태그 끝나기 직전에 script 태그')</script>       <!-- body 태그 끝나기 직전에 script 태그 -->
</body>
</html>

2-2. Ex 2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>document.body.innerHTML += '<h1>head 태그 내부에 script 태그</h1>'</script>       <!-- head 태그 내부에 script 태그 -->
</head>
<body>
    <script>document.body.innerHTML += '<h1>body 태그 내부에 script 태그</h1>'</script>       <!-- body 태그 내부에 script 태그 -->
    <h1>DOMContentLoaded </h1>
    <script>document.body.innerHTML += '<h1>body 태그 끝나기 직전에 script 태그</h1>'</script>       <!-- body 태그 끝나기 직전에 script 태그 -->
</body>
</html>

실행 결과를 보면 head태그 내부에 있던 코드는 실행되지 않았고
TypeError: Cannot read properties of null (reading 'innerHTML')이라는 에러가 발생하였음.
- 왜냐하면 head태그 안에 작성한 document.body.innerHTML의 시점에서는 아직 body태그가 만들어지지 않았기 때문에
  이 body태그를 조작할 수 없음.
HTML의 태그들을 자바스크립트로 조작하기 위해서는 그 태그가 생성된 이후의 시점이어야됨.
- 그래서 일반적으로 JavaScript코드는 </body>태그 직전에 작성하는 것이 좋음.

2-3. head 태그 안에서 DOM 객체 조작.

head 태그 안에서 DOM을 조작하려는 경우,
DOM이 모두 로드된 이후에 실행되도록 아래의 코드를 사용함.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            <!-- DOM 조작 가능. -->
      		document.body.innerHTML += '<h1> head 태그 내부에 script 태그</h1>'
        })
    </script>
</head>
<body>

    <h1>DOMContentLoaded </h1>
    <script>document.body.innerHTML += '<h1>body 태그 끝나기 직전에 script 태그</h1>'</script>       <!-- body 태그 끝나기 직전에 script 태그 -->
</body>
</html>