25. DOM의 기본 개념과 접근 및 제어 방법 설명
JavaScript에서 DOM(Document Object Model)은 HTML이나 XML 문서를 프로그래밍적으로 조작할 수 있도록 문서를 표현한 객체 기반의 구조입니다. DOM은 문서를 트리 구조로 표현하며, 각 요소와 속성을 노드(Node)로 나타냅니다. 이를 통해 JavaScript를 사용하여 웹 페이지를 동적으로 수정하거나 조작할 수 있습니다.
DOM의 기본 개념
문서 트리 구조:
DOM은 문서를 트리 형태로 표현하며, 각 노드는 문서의 개별 요소를 나타냅니다.
예: <html> 은 최상위 노드이고, <body>나 <head>는 그 자식 노드입니다.
노드(Node):
DOM은 여러 유형의 노드로 구성됩니다.
요소 노드(Element Node): HTML 태그를 나타냅니다. 예: <div>, <p>.
텍스트 노드(Text Node): 요소 안의 텍스트를 나타냅니다.
속성 노드(Attribute Node): 요소의 속성을 나타냅니다. 예: id, class.
주석 노드(Comment Node): HTML 주석을 나타냅니다.
DOM 인터페이스:
DOM은 브라우저에서 제공하는 API로, JavaScript를 통해 문서의 구조, 스타일, 콘텐츠를 수정할 수 있습니다.
DOM 접근 방법
JavaScript를 사용하여 DOM의 요소에 접근하려면 document 객체를 사용합니다. 주요 메서드는 다음과 같습니다:
getElementById:
특정 id를 가진 요소에 접근합니다.
예:
javascript
코드 복사
const element = document.getElementById('myId');
getElementsByClassName:특정 클래스 이름을 가진 모든 요소를 가져옵니다(HTMLCollection 반환).
예:
javascript
코드 복사
const elements = document.getElementsByClassName('myClass');
getElementsByTagName:특정 태그 이름을 가진 모든 요소를 가져옵니다.
예:
javascript
코드 복사
const elements = document.getElementsByTagName('div');querySelector:
CSS 선택자를 사용하여 첫 번째 일치하는 요소를 가져옵니다.
예:
javascript
코드 복사
const element = document.querySelector('.myClass');querySelectorAll:
CSS 선택자를 사용하여 모든 일치하는 요소를 가져옵니다(NodeList 반환).
예:
javascript
코드 복사
const elements = document.querySelectorAll('div.myClass');DOM 제어 방법
DOM에 접근한 뒤에는 해당 요소를 제어할 수 있습니다.
- 내용 변경
innerHTML: 요소의 HTML 콘텐츠를 설정하거나 가져옵니다.
javascript
코드 복사
element.innerHTML = '<strong>New Content</strong>';textContent: 요소의 텍스트만 변경합니다(HTML 무시).
javascript
코드 복사
element.textContent = 'New Text Content';- 속성 변경
setAttribute / getAttribute: 속성을 설정하거나 가져옵니다.
javascript
코드 복사
element.setAttribute('src', 'image.jpg');
const src = element.getAttribute('src');속성 직접 접근:
javascript
코드 복사
element.id = 'newId';
element.className = 'newClass';- 스타일 변경
style 속성을 사용하여 인라인 스타일을 설정합니다.
javascript
코드 복사
element.style.color = 'red';
element.style.backgroundColor = 'yellow';- 클래스 제어
classList를 사용하여 클래스를 추가, 제거, 토글할 수 있습니다.
javascript
코드 복사
element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('hidden');- 노드 추가/삭제
새로운 요소 생성: createElement
javascript
코드 복사
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello World';노드 추가: appendChild, insertBefore
javascript
코드 복사
const parent = document.getElementById('parent');
parent.appendChild(newDiv);노드 삭제: removeChild
javascript
코드 복사
parent.removeChild(newDiv);- 이벤트 추가
이벤트 리스너를 추가하여 사용자 상호작용을 처리할 수 있습니다.
javascript
코드 복사
element.addEventListener('click', () => {
alert('Element clicked!');
});예제
HTML:
html
코드 복사
<div id="example">Hello</div>
<button id="changeText">Change Text</button>JavaScript:
javascript
코드 복사
const button = document.getElementById('changeText');
button.addEventListener('click', () => {
const exampleDiv = document.getElementById('example');
exampleDiv.textContent = 'Text Changed!';
});이 코드는 버튼을 클릭하면 <div id="example">의 텍스트를 변경합니다.
요약
DOM은 HTML 문서를 프로그래밍적으로 조작하기 위한 구조입니다.
요소에 접근하는 방법에는 ID, 클래스, 태그 이름, CSS 선택자를 사용하는 다양한 메서드가 있습니다.
DOM 요소의 내용, 스타일, 속성 등을 JavaScript를 통해 동적으로 제어할 수 있습니다.
이벤트 리스너를 통해 사용자와의 상호작용을 처리할 수 있습니다.
