JavaScript에서 DOM(Document Object Model)은 웹 페이지의 구조화된 표현을 제공하는 중요한 개념입니다. DOM을 사용하면 JavaScript로 HTML 문서의 구조, 스타일, 내용을 동적으로 접근하고 수정할 수 있습니다. 아래에 DOM의 개념, 동작 방식, 주요 메서드 및 프로퍼티, 이벤트 처리 등을 자세히 설명합니다.
1. DOM의 개념
- DOM의 정의: DOM은 웹 문서의 구조를 트리 형태로 표현하는 객체 모델입니다. HTML 문서의 각 요소는 DOM 트리의 노드로 표현되며, 이 트리를 통해 JavaScript로 웹 페이지를 조작할 수 있습니다.
- 노드: DOM 트리는 여러 종류의 노드로 구성됩니다. 대표적인 노드 유형으로는 Element 노드(HTML 태그), Text 노드(텍스트 내용), Attribute 노드(속성), Document 노드(문서 자체) 등이 있습니다.
2. DOM 트리 구조
- 루트 노드: 모든 HTML 문서의 최상위에는 Document 객체가 위치합니다. 이는 DOM 트리의 루트(root) 노드로, document라는 JavaScript 객체로 접근할 수 있습니다.
- 부모-자식 관계: DOM 트리는 부모-자식 관계로 구성됩니다. 예를 들어, <html> 태그는 <head>와 <body> 태그의 부모이며, <body> 태그는 여러 자식 요소(예: <div>, <p>)를 가질 수 있습니다.
3. DOM 접근과 조작
JavaScript를 사용해 DOM 요소를 선택하고 조작할 수 있습니다. 이를 위해 다양한 메서드가 제공됩니다.
- 요소 선택하기
- document.getElementById('id'): 특정 ID를 가진 요소를 선택합니다.
- document.getElementsByClassName('class'): 특정 클래스를 가진 모든 요소를 선택합니다.
- document.getElementsByTagName('tag'): 특정 태그를 가진 모든 요소를 선택합니다.
- document.querySelector('selector'): CSS 선택자를 사용해 첫 번째 일치하는 요소를 선택합니다.
- document.querySelectorAll('selector'): CSS 선택자를 사용해 일치하는 모든 요소를 선택합니다.
- 요소 조작하기
- element.textContent: 요소의 텍스트 내용을 설정하거나 가져옵니다.
- element.innerHTML: 요소의 HTML 콘텐츠를 설정하거나 가져옵니다. 입력되는 HTML이 사용자로부터 직접 입력된 경우, 이 HTML에 악성 스크립트가 포함될 수 있습니다.
- element.setAttribute('attr', 'value'): 요소의 속성을 설정합니다.
- element.classList.add('class'), element.classList.remove('class'): 요소의 클래스를 추가하거나 제거합니다.
- element.style.property: 인라인 스타일을 설정하거나 수정합니다.
- 새 요소 생성 및 삽입
- document.createElement('tag'): 새로운 HTML 요소를 생성합니다.
- parent.appendChild(child): 부모 요소의 자식으로 새로운 요소를 삽입합니다.
- parent.insertBefore(newNode, referenceNode): 지정한 자식 요소 앞에 새로운 요소를 삽입합니다.
- 요소 삭제
- parent.removeChild(child): 부모 요소에서 특정 자식 요소를 제거합니다.
4. DOM 이벤트 처리
DOM에서 이벤트를 처리하여 사용자와의 상호작용을 구현할 수 있습니다.
- 이벤트 리스너 등록
- element.addEventListener('event', function): 특정 이벤트가 발생할 때 호출될 함수를 등록합니다.
document.getElementById('myButton').addEventListener('click', function() {
alert('Button clicked!');
});
- 이벤트 객체
- 이벤트 리스너가 호출될 때, 이벤트에 대한 정보를 담은 event 객체가 함수의 인자로 전달됩니다. 이를 통해 클릭 위치, 키보드 입력 등 다양한 이벤트 정보를 얻을 수 있습니다.
document.addEventListener('keydown', function(event) {
console.log(`Key pressed: ${event.key}`);
});
- 이벤트 전파
- 버블링(bubbling): 이벤트가 발생한 요소에서 상위 요소로 전파됩니다.
- 캡처링(capturing): 이벤트가 최상위 요소에서 시작해 목표 요소로 전파됩니다.
- event.stopPropagation(): 이벤트 전파를 중지합니다.
- event.stopImmediatePropagation(): 이벤트 전파를 막을 뿐만 아니라, 같은 요소에 바인딩된 다른 이벤트 리스너의 호출과 실행도 막습니다.
- 이벤트 위임
- 상위 요소에 이벤트 리스너를 등록하여 하위 요소의 이벤트를 처리하는 방법입니다. 동적으로 추가된 요소에도 이벤트를 적용할 수 있습니다.
5. DOM 조작의 성능
- DOM 조작은 브라우저의 렌더링 엔진에 영향을 미치기 때문에 성능에 주의가 필요합니다. 빈번한 DOM 업데이트는 렌더링 속도를 저하할 수 있으므로, 필요한 경우에만 DOM을 업데이트하고, 일괄적인 업데이트를 통해 효율성을 높이는 것이 좋습니다. DOM 조작의 성능을 높이기 위해 많은 요소를 한 번에 변경해야 할 때는 DocumentFragment를 사용해 중간 단계를 거치는 방법도 고려할 수 있습니다.ㅍ DocumentFragment는 메모리에 존재하지만, DOM 트리의 일부가 아니어서, 요소들을 DocumentFragment에 추가하고, 이 DocumentFragment를 한 번에 DOM에 삽입하면 성능이 개선될 수 있습니다. DocumentFragment에 삽입된 요소들이 DOM에 추가될 때는, 해당 요소들이 DocumentFragment에서 제거됩니다. DocumentFragment는 임시 컨테이너로, 이를 활용해 DOM의 Reflow(레이아웃 재계산)와 Repaint(화면 갱신)를 최소화할 수 있습니다.
6. 최신 DOM API와 기능
최근에는 다양한 최신 API가 추가되어 DOM 조작이 더욱 간편해졌습니다. 예를 들어, classList API는 클래스를 다루는 데 유용하며, Element.insertAdjacentHTML()은 성능을 높이기 위해 사용할 수 있습니다.
'WebDev > JavaScript' 카테고리의 다른 글
| [기초] JavaScript 컨트롤 구조(Control Structure) (2) | 2024.09.06 |
|---|---|
| [기초] JavaScript 참조형(Reference Type) (0) | 2024.09.03 |
| [기초] JavaScript Destructuring (2) | 2024.09.02 |
| [기초]JavaScript 스프레드 연산자(Spread Operation) (0) | 2024.08.30 |
| [기초]JavaScript 화살표 함수(Arrow Function) (0) | 2024.08.29 |
