q1: DOM 조작
a1:
DOM 조작이란?
**DOM (Document Object Model)**은 웹 페이지의 구조를 표현하는 객체 모델입니다.
DOM 조작은 JavaScript 등을 사용하여 웹 페이지의 HTML 및 CSS 요소를 동적으로 추가, 수정, 삭제하거나 스타일을 변경하는 작업을 말합니다.
1. DOM의 역할
웹 페이지는 브라우저에 로드되면, HTML 문서는 DOM 트리라는 구조로 변환됩니다. DOM은 브라우저와 프로그래밍 언어(JavaScript 등) 간의 상호작용을 가능하게 해줍니다.
• DOM 구조는 HTML 태그를 계층적 트리 구조로 표현합니다.
• 각 HTML 요소는 DOM의 **노드(Node)**로 표현됩니다.
• 문서 노드: 최상위 HTML 문서 (<html>)
• 요소 노드: 개별 태그 (<div>, <p>, <h1> 등)
• 텍스트 노드: 태그 안의 내용 (텍스트)
2. DOM 조작으로 가능한 작업
(1) 요소 선택
DOM 조작을 시작하려면 HTML 요소를 선택해야 합니다. 이를 위해 다양한 메서드를 사용합니다.
• getElementById: 특정 ID를 가진 요소 선택
• getElementsByClassName: 특정 클래스를 가진 요소 선택
• querySelector / querySelectorAll: CSS 선택자를 사용하여 요소 선택
const element = document.getElementById("myDiv");
const items = document.querySelectorAll(".list-item");
(2) 요소 내용 변경
HTML 요소의 텍스트나 내용을 수정할 수 있습니다.
• innerHTML: 요소의 내부 HTML을 변경
• textContent: 요소의 텍스트만 변경
const element = document.getElementById("myDiv");
element.innerHTML = "<p>새로운 내용</p>";
(3) 요소 속성 변경
HTML 속성(예: src, href, class 등)을 추가하거나 수정할 수 있습니다.
• setAttribute: 속성 추가 또는 변경
• getAttribute: 속성 값 가져오기
const image = document.querySelector("img");
image.setAttribute("src", "new-image.jpg");
(4) 요소 스타일 변경
CSS 스타일을 JavaScript로 수정할 수 있습니다.
• style 속성을 사용하여 개별 스타일 변경
const element = document.getElementById("myDiv");
element.style.backgroundColor = "blue";
(5) DOM 구조 변경
• 요소 추가: appendChild, insertBefore 메서드
• 요소 삭제: removeChild 메서드
const newDiv = document.createElement("div");
newDiv.textContent = "새로운 요소";
document.body.appendChild(newDiv);
3. DOM 조작의 활용 사례
• 실시간 데이터 업데이트: AJAX 요청 결과를 DOM에 반영 (예: 댓글 추가, 날씨 정보 갱신)
• 사용자 인터페이스 동작: 버튼 클릭 시 특정 내용 표시/숨기기
• 애니메이션 구현: 요소 이동, 크기 변경 등
• 폼 유효성 검사: 입력값 확인 후 사용자에게 메시지 표시
4. DOM 조작의 한계
• DOM 조작은 브라우저에서 실행되므로 클라이언트의 성능에 영향을 받을 수 있습니다.
• 복잡한 DOM 조작은 코드 관리와 성능 최적화가 어려울 수 있습니다. 이를 해결하기 위해 React, Vue.js와 같은 프레임워크가 사용됩니다.
5. 간단한 예제: 버튼 클릭 시 내용 변경
<!DOCTYPE html>
<html>
<head>
<title>DOM 조작 예제</title>
</head>
<body>
<div id="content">Hello, World!</div>
<button id="changeButton">내용 변경</button>
<script>
const button = document.getElementById("changeButton");
const content = document.getElementById("content");
button.addEventListener("click", () => {
content.textContent = "안녕하세요, DOM 조작!";
});
</script>
</body>
</html>
결과: 버튼을 클릭하면 <div id="content">의 내용이 변경됩니다.
DOM 조작을 통해 페이지를 새로고침하지 않고도 동적인 동작을 구현할 수 있습니다.
DOM 조작 241121
2024. 11. 21. 06:35
반응형