DOM
DOM
Document Object Model
: HTML을 '객체 형태'로 파싱해서 구조화한 모델.
문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드
브라우저가 이해할 수 있는 구조, 노드 트리로 표현됨
DOM API
웹 문서의 동적 변경을 위해, DOM은 프로그래밍언어가 자신에게 접근/수정할 수 있는 방법 제공.
js로 DOM에 접근하여, 노드추가/삭제/변경/이벤트처리/수정 등이 가능해짐
예시) document.getElementById() 등
https://poiemaweb.com/js-dom#3-dom-query--traversing-%EC%9A%94%EC%86%8C%EC%97%90%EC%9D%98-%EC%A0%91%EA%B7%BC
DOM | PoiemaWeb
브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(문서 객체 모델. Document Object Model)을 생성한다. 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해서는 웹 문서를 브라우저
poiemaweb.com
BOM
Browser Object Model
자스를 이용해 '브라우저' 정보에 접근하거나, 브라우저의 여러 기능을 제어하기 위해 사용하는 객체 모델
브라우저의 새 창을 열거나 다르 문서로 이동 등
window 객체: 웹 브라우저의 창을 나타내는 객체
document: 웹페이지 전체 <--> window: 브라우저 전체
주의) DOM 접근과 조작은 비용 많이 들기에 최소화하기
Event
웹브라우저가 알려주는 HTML 요소에 대한 사건의발생
심화) 이벤트 루프와 동시성
js는 single-thread 언어 -> 한번에 하나의 작업만 수행 가능
but, 이벤트 루프가 js의 동시성 지원
자바스크립트 엔진
1. Call stack
2. Heap
-> js엔진은 작업 요청되면 Call stack을 사용해 요청된 작업을 순차적으로 실행함
=> 그럼 여러 task를 어떻게 동시에 처리하는지? = 비동기 처리
Event Loop
비동기 함수들을 적절한 시점에 실행시키는 관리자.
끊임없이 돌아가는 js 내 루프
- Event Queue (Task Queue)
- Web API
동작 방식
Event Handler 등록
Event Handler : 이벤트가 발생하면 실행되는 함수
- addEventListener: 특정한 이벤트가 발생함을 감지하는 역할. 감지하면 핸들러 실행
- element.addEventListener(event, handler ,options);
- handler는 함수 호출을 넣는게 아니라, 함수 자체를 넣어야함 -> 인수를 못넣는 이슈!
- 따라서, 인수 전달은 우회해서 함.
- 이벤트 핸들러 프로퍼티 방식
- element.onclick = function (e) { … }
- addEventListener보다 먼저 실행되긴 하지만, 핸들러 프로퍼티 하나 당 하나의 이벤트 핸들러만 바인딩 가능
Event Object (이벤트 객체)
이벤트에 대한 상세 정보를 핸들러에 인수 형태로 전달
ex) type, target, currentTarget 등
기본 동작의 변경
기본동작: ex) 폼 제출시 페이지 새로고침됨, 링크 클릭시 해당 url로 이동함 등등
이러한 기본동작을 변경하기 위한 메소드들
- e.preventDefault(): 이벤트의 기본 동작을 중단함
- e.stopPropagation() : 이벤트가 상위요소로 전파되지 않도록 중단함. 이벤트 버블링과 캡처링 전파현상 막을 수 있음
심화) 이벤트 버블링/캡처링과 이벤트 위임
이벤트 버블링: 특정 요소에서 이벤트 발생시, 상위 요소로 쭉 전파 -> default
이벤트 캡쳐링: 버블링과 반대방향으로 이벤트 전파
이벤트 위임
하위요소에 각각 이벤트 붙이는게 아닌, 상위 -> 하위 요소의 이벤트들을 제어하는 방식
https://www.notion.so/dosopt/DOM-0eedf900e301415790be7a5eb7d48d0e?pvs=4#e839100432cc4bda8490f09ae9ad76dc