Application Programming Interface.

즉 어플리케이션을 프로그래밍할 수 있는 접점

• Document Object Model, 문서 객체 모델
• DOM
• DOM 소개
• 트리
• Event Reference
• Web APIs

• Counter 실습
• Drag & Drop 실습
• Form Scripting 실습
• Capturing & Bubbling 실습

• document.querySelector(selector) - CSS 선택자를 통해 단일 요소 가져오기
• document.querySelectorAll(selector) - CSS 선택자를 통해 여러 요소 가져오기
• el.querySelector(selector) - CSS 선택자를 통해 단일 자식 요소 가져오기
• el.closest(selector) - 엘리먼트의 조상 중에 CSS 선택자와 일치하는 가장 가까운 조상 요소 가져오기
• el.matches(selector) - 해당 요소가 CSS 선택자와 일치하는지 검사하기

• el.textContent - 요소 본문을 가져오거나 변경할 때 사용하는 속성 (텍스트)
• el.innerHTML - 요소 본문을 가져오거나 변경할 때 사용하는 속성 (HTML)

• el.hasAttribute(attrName) - 어트리뷰트가 있는지 검사하기
• el.getAttribute(attrName) - 어트리뷰트의 값 가져오기
• el.setAttribute(attrName, attrValue) - 어트리뷰트 설정하기
• el.removeAttribute(attrName) - 어트리뷰트 삭제하기

• el.classList.add(className, ...) - 클래스 추가
• el.classList.remove(className, ...) - 클래스 삭제
• el.classList.contains(className) - 클래스 포함 여부 검사

• el.style - 요소의 인라인 스타일을 읽고 쓸 때 사용하는 객체. camelCase 사용
  • el.style.backgroundColor = '#000000' - 요소의 배경색을 검은색으로 변경

• el.addEventListener(eventName, callback) - 이벤트 리스너 등록
• el.removeEventListener(eventName, callback) - 이벤트 리스너 제거

• document.createElement(tagName) - 새로운 엘리먼트 객체 생성하기
• el.cloneNode() - 엘리먼트 복사하기

• el.appendChild(newChild) - 요소 끝에 자식 요소를 삽입하기
• el.insertBefore(newChild, beforeWhat) - 원하는 위치에 자식 요소를 삽입하기
• el.replaceChild(newChild, oldChild) - 자식 요소를 교체하기
• el.removeChild(child) - 자식 요소 제거하기

• el.dataset - data-* 어트리뷰트를 가져오기. (kebab-case가 camelCase로 변환됨)

• el.childNodes - 자식 노드
• el.firstElementChild - 첫 번째 자식 요소
• el.lastElementChild - 마지막 자식 요소
• el.previousElementSibling - 이전 형제 요소
• el.nextElementSibling - 다음 형제 요소
• el.parentElement - 부모 요소
• el.offsetParent - 포지셔닝의 기준이 되는 조상 요소

• el.getBoundingClientRect() - 화면 좌측 상단으로부터의 요소의 위치 및 요소의 크기를 반환
• el.offsetHeight / el.offsetWidth - border를 포함한 요소의 크기
• el.clientHeight / el.clientWidth - border를 제외한 요소의 크기
• el.scrollHeight / el.scrollWidth - 요소 내부에 포함된 콘텐츠의 크기 (스크롤 가능한 영역의 크기)
• el.offsetTop / el.offsetLeft - offsetParent로부터의 요소의 위치
• el.scrollTop / el.scrollLeft - 요소 내부의 콘텐츠가 스크롤된 정도
• el.clientTop / el.clientLeft - border의 너비

• e.target - 실제로 이벤트를 일으킨 요소
• e.currentTarget - 이벤트 전파 과정 중 현재 이벤트가 위치한 요소 (즉, 해당 이벤트 리스너가 등록되어 있는 요소)
• e.stopPropagation() - 이벤트 전파 과정을 멈추기
• e.preventDefault() - 이벤트가 일으키는 브라우저의 기본 동작과정을 취소하기

• change - checkbox, radio등의 타입을 갖는 input 요소나 select 요소에 선택이 일어났을 때 발생
• input - text 타입을 갖는 input 요소나 textarea 요소의 값이 변경되었을 때 발생
• focus - 키보드 포커스가 해당 요소에 옮겨졌을 때 발생
• blur - 키보드 포커스가 해당 요소에서 벗어났을 때 발생
• submit - 폼 전송이 일어났을 때 발생 (폼 내부에서 엔터 키가 입력되었을 때에도 발생)

• click / dblclick - 마우스 클릭 / 더블클릭
• mouseover / mouseout - 요소에 마우스 포인터가 들어왔을 때 / 나갔을 때
• mousedown / mouseup - 요소 위에서 마우스 버튼을 눌렀을 때 / 놓았을 때
• mousemove - 요소 위에서 마우스 포인터가 움직일 때마다

• keydown / keyup - 키보드 버튼을 눌렀을 때 / 놓았을 때
• keypress - 문자가 입력되었을 때

• scroll - 요소 내부의 콘텐츠가 스크롤될 때마다

• 버블링이 일어나는 이벤트도 있고, 일어나지 않는 이벤트도 있음 (submit, focus, blur, change 등)