DOM과 Event, BOM에 대해 정리

1. DOM
   • DOM이란?
     HTML파일을 브라우저가 나타낼 수 있도록 하는 객체 모델.
     브라우저에서 메모리에 저장되는데 트리형태로 저장됨.
     JS가 접근하여 DOM의 구조를 변경할 수 있게 하는 API도 제공함.
   • DOM의 구조를 변경할 수 있게 하는 API에는 무엇이 있을까?
     getElementById, innerHTML, innerText등이 있다.
   • DOM이 왜 중요한가?
     DOM이 없다면 HTML을 JS로 동적으로 변경할 수 없다.
   • DOM과 HTML이 다른 점
     HTML단지 계층 구조로 나타낸 문서이다. 그러나 DOM은 이것을 파싱하여 계층구조로 브라우저의 메모리에 저장된 객체모델이다. DOM에는 document인 루트 노드를 시작으로 브라우저에서 DOM을 조작해줄 수 있는 메서드까지 존재한다.
   • DOM요소 추가 생성하는 방법

   const li = document.createElement('li');
   const ul = document.getElementById('ul')'
   
   ul.appendChild(li);
   

2.  Event
   • 이벤트 핸들러 등록 방법
   1. 어트리뷰트 방식

   <button onClick="sayHi('Lee')"> Click Me! </button>
   

   2)이벤트 핸들러 프로퍼티 방식3)addEventListener 메서드 방식
   • 이벤트 위임이란
     부모 요소에 이벤트를 위임하여 자식요소의 이벤트를 각각 설정하지 않아도 설정되게 만드는 것
   • 이벤트 타깃을 중심으로 전파됨
   • 이벤트 버블링과 캡처링
     이벤트는 document를 시작으로 이벤트 타깃 방향으로 전파됨 (이것이 캡처링) 이벤트 타깃에서부터 다시 window방향으로 전파됨 (이것이 버블링)
   • 커런트 타깃이란?
     이벤트 핸들러를 바인딩한 요소
   • 이벤트 객체의 ‘preventDefault’와 ‘stopPropagation’의 차이점
     preventDefault는 기본 동작을 막는것.
     stopPropagation은 이벤트 버블링을 막는것 (이벤트가 더이상 상위요소로 전파되지 않음)
   • 이벤트 루프와 이벤트 큐에 대해
     브라우저는 싱글 스레드로 동작하므로 이벤트와 같은 비동기 함수를 실행하는 것에 한계가 있다. 비동기 함수의 동작을 구현하기 위해 제공되는 것이 바로 이벤트 큐와같은 것. 이벤트가 동작하게 되면 콜백함수를 이벤트 큐에 보내고, 이벤트 루프는 계속 돌면서 콜스택이 비었는지 확인하게 됨. 콜스택이 비었으면 이벤트루프는 태스크큐에 있는 콜백 함수를 FIFO방식으로 콜스택에 가져와서 실행할 수 있게 해줌
   • 이벤트 리스너의 문제점 이벤트리스너는 계속 메모리를 차지하게 됨. DOM요소가 삭제되어도 이벤트리스너가 계속 참조되면 가비지콜렉팅의 대상이 되지 않음. 그러므로 DOM에서 해제될 때는 꼭 이벤트리스너를 제거하여 메모리누수를 방지하여 주어야 함.
   • 이벤트 위임의 문제점 의도하지 않은 이벤트 버블링이 발생하게 되면 성능저하를 일으킬 수 있다.
3. const $button = document.getElementById('btn')' $button.addEventListener('click', ()=>{ console.log('clicked') })
4. const $button = document.querySelelctor('button'); $button.onclick = function(){ console.log('button clicked'); };
5. Template literal
   DOM을 변경하는 방법.
6. BOM 브라우저를 조작하고 관리할 수 있게 해주는 프로퍼티와 메서드들로 구성되어있는 브라우저가 제공해주는 객체 모델 window, navigator, screen, location, history등이 포함됨.

• window 최상위 객체인 widow.
• agent 브라우저 정보 user agent, 브라우저이름, 버전, 플랫폼 등의 정보 표시
• screen 화면에 대한 정보
• location 현재 문서의 URL 리로드 및 url변경 가능
• history 방문기록을 관리