Application Programming Interface.
즉 어플리케이션을 프로그래밍할 수 있는 접점
- Document Object Model, 문서 객체 모델
- DOM
- DOM 소개
- 트리
- Event Reference
- Web APIs
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 등)