📖 DOM( Document Object Model )

🐋 DOM: 구조화된 문서( XML, HTML )를 객체 형태로 표현하는 방식

❓DOM TREE

🐋 DOM: 자바스크립트 엔진이 HTML 코드를 해석한 결과로 각각의 태그가 자바스크립트의 node 객체로 변환

• node: HTML DOM에서 정보를 저장하는 계층적 단위
• node tree: 노드들의 집합으로 노드 간의 관계를 트리 구조로 나타낸 것 !

✔️ document 객체

🐋 웹 페이지를 의미

• JavaScript에서 DOM에 접근하고자 할 때에는 document 객체를 사용해야 한다
  document - node 객체는 HTML 요소의 선택과 조작, 생성 및 추가, 이벤트 핸들러 추가 등 HTML 요소와 관련된 작업을 도와주는 다양한 메서드를 제공한다.

---

✔️ HTML 요소의 선택

메서드 사용 예시	설 명
document.getElementById(’box’)	해당 아이디의 요소를 선택
document.getElementsByclassName(’list-item’)	해당 클래스에 속한 요소를 모두 선택
document.getElementsByName(’email’)	해당 name 속성값을 가지는 요소를 모두 선택
document.querySelectorAll(’ul > li’)	해당 CSS 선택자로 선택되는 요소를 모두 선택
document.querySelector(’header > #title’)	해당 CSS 선택자로 선택되는 요소를 첫 번째 요소 선택

📍 Elements 복수형, All의 경우 여러 개의 요소가 선택되어 배열로 반환한다. 선택된 요소들 . 일부만 사용하고 싶을 경우 index 번호를 이용하여 접근할 수 있다.

✔️ HTML 요소의 생성 및 추가

메서드 사용 예시	설 명
document.createElement(’form’)	해당 태그의 HTML 요소를 생성
document.write(’hello world’)	텍스트를 화면에 출력
요소.appendChild(node)	해당 요소 내부 가장 마지막에 node 추가

📍 createElement() 로 생성된 노드는 appendChlid()로 DOM에 추가하지 않으면 자바스크립트에만 존재하기 때문에 화면에 보여지지 않는다 !

✔️ HTLM 요소의 조작

메서드 사용 예시	설 명
요소.style.스타일속성 = ‘200px’	요소의 스타일 조회 및 변경
요소.innerHTML = ‘<li><span>hello</span></li>’	요소 하위의 HTML 조회 및 변경
요소.innerText = ‘hello Tia’	요소 하위의 텍스트 조회 및 변경
요소.getAttribute(’placeholder’) / 요소.setAttribute(’min’, ‘20’)	요소의 HTML 속성 조회 및 변경
요소.classList = ‘button button-red’	요소의 class 수정

---

❓ Event

✔️ HTML 이벤트

🐋 이벤트( event ) ?
웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생
이벤트( 사건 )이 발생하면 이에 반응하여 특정 동작을 수행하는 함수가 실행된다 !

✔️ HTML event

✔️ event 관리하기

사용 예시	설 명
요소.addEventListner(’click’, function() {…})	이벤트가 발생했을 때 처리를 담당하는 함수
요소.removeEventListener(’click’, function() {…})	이벤트를 제거할 때 처리를 담당하는 함수
<요소 onclick=’handler()’ />	요소의 ‘on이벤트명’ 속성에 동작 추가하는 방법
요소.onclick = function() {…}	node 객체 프로퍼티에 핸들러 함수를 등록하는 방법

✔️ event 객체

🐋 이벤트 핸들러 함수에 첫 번째 인수로 전달되는 객체: 해당 이벤트에 대한 정보와 기능이 담김

---

✔️ event propagation

🐋 브라우저에서 이벤트가 발생했을 때, 이벤트가 DOM 트리 내에서 어떻게 전파되는가? 에 대한 개념으로 Capturing( 캡처링 ), Target( 타깃 ), Bubbling( 버블링 ) 3가지 단계로 나뉜다.

1. Capturing( 캡처링 )

   이벤트가 최상위 부모 요소에서부터 시작해 하위 요소로 내려가면서 발생하는 단계

   • 순서: window → document → 최상위 부모 → 타깃의 부모 → 타깃( 이벤트 발생 요소 )

2. Target( 타깃 )

   이벤트가 실제로 발생한 요소에서 실행되는 단계로 요소에서 발생한 이벤트를 처리

   • 순서: 타깃( 이벤트 발생 요소 )에서 이벤트 실행

3. Bubbling( 버블링 )

   타깃에서 이벤트 처리가 끝난 후 다시 부모 요소로 이벤트가 전파

   • 타깃 → 타깃의 부모 → 최상위 부모 → document → window

📍 event.stopPropagation() 메서드를 사용하여 이벤트 버블링을 막을 수 있다.