2024-10-18 (DOM,API)

window

window는 DOM, BOM,JavaScript로 구성, 브라우저의 전역 객체

-DOM(문서객체모델) : html 태그들을 브라우저가 읽을 수 있는 tree형태로 변경

-BOM : 브라우저에서 제공하는 API 집합체

-JavaScript : DOM, BOM을 조작

DOM

• 노드(Node) : DOM Tree에서 각각의 DOM 요소
• 돔요소 선택 : document.querySelector(selectors)
• 돔요소 추가
  • 끝에 추가 : document.createElement(tagName) => element.appendChild(child)
  • 중간에 추가 : lement.insertBefore(newNode, referenceNode)
• 돔요소 삭제 :element.removeChild(child)
• 돔요소 교체 : element.replaceChild(newChild, oldChild)

DOM API

• 클래스 토글 : element.classList.toggle(class-name)
• 이벤트 추가 : element.addEventListener(type, listener)
• 이벤트 제거 : element.removeEventListener(type, listener)
• 이벤트 핸들러 어트리뷰트(바닐라js에선 비추💩)

<button onclick="alert('Button clicked!')">Click Me</button>

• mouseover : 요소 위에 커서 올렸을 때
• mouseout : 요소 위에 있던 커서가 밖으로 나갔을 때
• DOMContentLoaded : HTML 문서가 로드되고, DOM 완성되었을 때
• load : 모든 리소스 (HTML, 이미지 등)가 완전히 로드되었을 때

이벤트 전파

• 이벤트 캡쳐링 : window 전역객체 → 이벤트타겟으로 이벤트가 전파되는 현상
• 이벤트 버블링 : 이벤트타겟 → window 전역객체으로 이벤트가 전파되는 현상
• https://codepen.io/iduaqiow-the-bold/pen/JjgJyXL?editors=1111

* event.target : 이벤트가 실제로 발생한 요소

* event.currentTarget : 이벤트 리스너가 부착된 요소, 즉 이벤트를 핸들링하는 요소

이벤트 위임

• 자식요소에서 발생한 이벤트를 부모 요소가 대신 처리할 수 있도록 위임하는 것
• 여러 개의 이벤트 리스너 대신 단 하나의 이벤트 리스너로 메모리 절약 가능