Chapter 1-9. DOM 소개

JavaScript

Chapter 1-9. DOM 소개

Chansman 2025. 3. 31. 19:04

📌 DOM 소개 & 콘텐츠 변경하기

DOM(Document Object Model)은 자바스크립트가 웹 페이지의 콘텐츠를 제어하고 조작할 수 있도록 하는 중요한 개념입니다. DOM은 웹 페이지의 각 요소를 객체화하여 추가, 수정, 삭제 및 이벤트 처리를 가능하게 해줍니다. 이 글에서는 DOM이란 무엇이며, 웹 콘텐츠를 변경하는 방법에 대해 알아보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" contect="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 소개 & 콘텐츠 변경하기기</title>
    
</head>
<body>    
    
        <p>대한민국의 역습입니다!</p>
        <p class="comment">손흥민 크로스 몰고갑니다. 역습입니다!</p>
        <p class="comment" id="goal">조규성의 환성적인 마무리 ~ 골</p>
           
    <script>
        //입력 - 처리 - 출력
        const p1 = document.querySelector("p")
        const p2 = document.querySelector(".comment")
        const p3 = document.querySelector("#goal")

        console.log(p1.textContent)
        console.log(p2.textContent)
        console.log(p3.textContent)

        p1.textContent = "우루과이의 역습입니다"
        p2.textContent = "수아레즈의 멋진패스"
        p3.textContent = "포뮬란의 논스톱 슛, 골~"
        
        
    </script>
</body>
</html>

🚦 DOM(Document Object Model) 이란?

DOM은 웹 페이지의 HTML 문서 구조를 객체 형태로 나타낸 모델입니다. 웹 브라우저는 HTML 코드를 해석하고 이를 DOM 트리로 변환하여 화면에 표시합니다. 자바스크립트는 DOM을 사용하여 웹 페이지의 내용을 동적으로 수정하거나 이벤트를 처리할 수 있습니다.

DOM은 웹 페이지에서 각 요소를 객체로 접근하고 조작할 수 있는 프로그래밍 인터페이스입니다. 이를 통해 사용자는 웹 페이지의 콘텐츠를 추가, 수정, 삭제하고 이벤트 처리를 할 수 있습니다.

💻 DOM에 접근하기

자바스크립트에서 document 객체를 사용하여 현재 웹 페이지의 콘텐츠에 접근할 수 있습니다. window.document는 웹 페이지의 DOM을 나타내며, 이를 통해 페이지의 요소를 조작하거나 정보에 접근할 수 있습니다.

window.document: 현재 페이지의 DOM을 의미하며, 이를 사용하여 웹 요소를 생성하거나 수정할 수 있습니다.

예시:

let title = window.document.querySelector('h1');
console.log(title.textContent); // <h1>의 텍스트 내용 출력

🔍 querySelector와 textContent

1.querySelector:

querySelector는 CSS 선택자를 사용하여 문서 내에서 첫 번째로 일치하는 요소를 선택합니다.
선택자가 일치하는 요소가 없으면 null을 반환합니다.

예시:

let element = document.querySelector('.myClass'); // 첫 번째 '.myClass' 요소 선택
console.log(element); // 해당 요소를 출력

2. textContent:

textContent는 선택한 요소의 텍스트 콘텐츠를 반환하거나 수정할 수 있는 속성입니다.
텍스트를 읽거나 변경할 수 있어, 웹 페이지의 내용을 동적으로 수정하는 데 사용됩니다.

예시:

let para = document.querySelector('p');
console.log(para.textContent); // p 요소의 텍스트 내용 출력
para.textContent = "새로운 텍스트"; // p 요소의 텍스트 변경

✅ 마무리

DOM은 자바스크립트가 웹 페이지의 구조를 제어하는 데 중요한 역할을 합니다.
document 객체를 통해 웹 페이지의 요소에 접근하고, **querySelector**와 **textContent**를 사용하여 동적 수정과 정보 출력을 쉽게 할 수 있습니다.
**DOM**을 이해하고 활용하면, 웹 페이지의 내용을 실시간으로 업데이트하고, 이벤트를 처리하는 능력이 향상됩니다.

✅ 실질적인 이점

HTML을 직접 수정하는 것보다 유리한 점:
- 동적 웹 페이지를 만들 때, 자바스크립트를 사용하여 실시간으로 콘텐츠를 변경하고, 사용자 인터랙션에 반응할 수 있는 동적 웹 페이지를 구성할 수 있습니다. HTML을 직접 수정하는 방식은 정적인 콘텐츠 변경에만 적합하지만, DOM을 이용하면 동적이고 인터랙티브한 콘텐츠 변경이 가능합니다.
자바스크립트를 이용한 동적 페이지 처리:
- 예를 들어, 버튼 클릭 시 텍스트가 변하거나, 페이지를 새로고침하지 않고 데이터를 업데이트하는 작업을 할 수 있습니다.
이벤트 처리와 상호작용:
- DOM을 사용하면 클릭, 입력, 마우스 이동 등 다양한 이벤트 처리를 통해 사용자와 상호작용할 수 있습니다. HTML에서 직접 작성하는 것과 달리, 자바스크립트를 사용해 웹 요소의 상태를 실시간으로 변경할 수 있습니다.

이제 자바스크립트를 활용하여 동적 웹 페이지를 만들 수 있는 능력을 얻었습니다!