📌 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에서 직접 작성하는 것과 달리, 자바스크립트를 사용해 웹 요소의 상태를 실시간으로 변경할 수 있습니다.
이제 자바스크립트를 활용하여 동적 웹 페이지를 만들 수 있는 능력을 얻었습니다!
'JavaScript' 카테고리의 다른 글
| Chapter 2-13. 조건문(javascript) (0) | 2025.03.31 |
|---|---|
| Chapter 2-12. 비교연산(javascript) (0) | 2025.03.31 |
| Chapter 1-8. undefined 외 (0) | 2025.03.31 |
| Chapter 1-7. 템플릿 리터럴 (0) | 2025.03.31 |
| Chapter 1-6. 문자열 prompt (0) | 2025.03.31 |