JavaScript - DOM

DOM

 

- 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 입니다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다. DOM 은 nodes와 objects로 문서를 표현하며, 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당합니다.

 

 

 

DOM의 개념과 구조

• DOM의 구조는 트리 형태로 되어 있으며, 각각의 요소들을 노드라고 부릅니다. 노드는 여러 종류가 있지만 가장 중요한 것은 문서 노드(document node), 요소 노드(element node), 속성 노드(attribute node), 텍스트 노드(text node)입니다.
• DOM을 사용하여 자바스트립트에서 웹 페이지의 내용과 스타일 등을 동적으로 변경할 수 있으며, 가장 기본적인 사용방법은 DOM API를 이용하는 것입니다.

- document.getElementById(id) : id 속성으로 요소를 선택하는 메서드 - document.querySelector(element) : id, class, 태그 속성으로 요소를 선택하는 메서드 - document.querySelectorAll(element) : 같은 (id, class, 태그) 속성을 공유하는 모든 요소를 선택하는 메서드 - element.classList.add(class) : class 속성에 클래스를 추가하는 메서드 - element.style.color = "red" : style 속성에 색상을 지정하는 프로퍼티 - element.appendChild(child) : 자식 요소를 추가하는 메서드 - element.removeChile(child) :  자식 요소를 삭제하는 메서드

 

 

 

이벤트

 - DOM과 이벤트 처리하기 위해서는 이벤트란 무엇인지 알아야 합니다. 이벤트란 웹 페이지에서 발생하는 사용자의 행동이나 시스템의 변화 등 을 말합니다. 마우스 클릭, 키보드 입력, 화면 크기 변경, 페이지 로딩 등이 있으며, 이벤트 리스너는 특정 요소에서 발생한 이벤트에 반응하도록 설정하는 함수입니다. 이벤트 리스너는 다음과 같은 방식으로 등록하거나 제거할 수 있습니다.

 

- element.addEventListener(type, listener) : type에 해당하는 이벤트가 element에서 발생하면 listener 함수가 실행되도록 등록하는 메서드  - element.removeEventListener(type, listener) : type에 해당하는 이벤트가 element에서 발생해도 listener 함수가 실해오디지 않도록 제거하는 메서드

 

이벤트 위임과 버블링은 이벤트 전파 과정에서 사용되는 개념입니다.

이벤트 버블링(event bubbling)은 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 현상을 말하며,

이벤트 캡쳐링(event Capturing)은 상위 요소에서 발생한 이벤트가 하위 요소로 전파되는 현상을 말합니다.

 

이벤트 버블링 예)

<div id = "parent">           <button id="child">Click me</button> </div>

document.getElementById("parent").addEventListener("click", function() {            console.log("Parent clicked"); });   document.getElementById("Child").addEventListener("click", function() {             console.log("Child clicked"); });

위 코드에서 child 버튼을 클릭하면 다음과 같은 결과가 나옵니다.

 

Child clicked Parent clicked

 

child 버튼에서 발생한 click이벤트가 parent div까지 전파되었기 때문에 그렇습니다.

 

 

 

 

이벤트 위임

 - 이벤트 위임(event delegation)은 상위 요소에 이벤트 리스너를 등록하여 하위 요소들의 이벤트를 처리하는 방식을 말합니다.

 

 

 

 

#출처 엘리스 AI 트랙 JavaScript 101 - (7) DOM