(미완) DOM 조작 API 정리 | 백과 블로그

Javascript

(미완) DOM 조작 API 정리

DOM 조작 API 정리

백과

2026년 8월 6일

목차

실전 DOM 조작 API 정리

매일 쓰는 것 위주로 추린 치트시트. 전체 스펙은 MDN Element 참고.

1. 요소 탐색 (Query / Traversal)

document.querySelector('.box')          // 첫 번째 매칭 요소
document.querySelectorAll('.box')       // 모든 매칭 요소 (NodeList)
document.getElementById('app')          // id로 찾기
document.getElementsByClassName('box')  // class로 찾기 (HTMLCollection, 실시간 반영)
document.getElementsByTagName('div')    // 태그명으로 찾기

el.closest('.parent')       // 조건에 맞는 가장 가까운 조상
el.matches('.active')       // 이 요소가 셀렉터에 맞는지 boolean

el.parentElement            // 부모
el.children                 // 자식들 (요소만)
el.childNodes               // 자식들 (텍스트 노드 포함)
el.firstElementChild
el.lastElementChild
el.nextElementSibling
el.previousElementSibling

querySelector vs getElementById: querySelector가 더 유연(CSS 셀렉터 다 사용 가능)하지만 내부적으로 약간 더 느림. id 하나만 찾을 땐 getElementById가 살짝 빠름 — 근데 실무에서 체감 차이는 거의 없음.

const el = document.createElement('div')
document.createTextNode('hello')

parent.appendChild(el)          // 맨 끝에 추가
parent.removeChild(el)          // 특정 자식 제거
el.remove()                     // 자기 자신 제거 (removeChild보다 간편)
parent.insertBefore(newEl, refEl) // refEl 앞에 삽입

el.replaceWith(newEl)           // 자신을 다른 요소로 교체

// 위치 지정 삽입 (더 유연함)
el.insertAdjacentHTML('beforeend', '<span>hi</span>')
el.insertAdjacentElement('afterend', newEl)
// position: 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend'

el.getAttribute('href')
el.setAttribute('href', '/home')
el.removeAttribute('disabled')
el.hasAttribute('disabled')

el.dataset.userId           // data-user-id="123" → el.dataset.userId === "123"
el.dataset.userId = '456'   // 다시 쓰기도 가능

el.classList.add('active')
el.classList.remove('active')
el.classList.toggle('active')       // 있으면 제거, 없으면 추가
el.classList.toggle('active', bool) // bool에 따라 강제 지정
el.classList.contains('active')     // boolean

el.style.color = 'red'
el.style.marginTop = '10px'
el.style.cssText = 'color: red; font-size: 14px;' // 한 번에 여러 개

getComputedStyle(el).color  // 실제 적용된(계산된) 스타일 읽기

el.textContent   // 순수 텍스트 (HTML 태그 무시, XSS 안전)
el.innerText     // textContent와 비슷하지만 렌더링된 스타일 반영 (느림, 레이아웃 재계산 유발)
el.innerHTML     // HTML 마크업 포함 (직접 넣을 땐 XSS 주의)

el.value         // input, textarea, select 값

el.addEventListener('click', handler)
el.removeEventListener('click', handler)

el.addEventListener('click', handler, { once: true })  // 한 번만 실행
el.addEventListener('click', handler, { capture: true }) // 캡처 단계에서 실행

event.preventDefault()   // 기본 동작 막기 (폼 제출, 링크 이동 등)
event.stopPropagation()  // 이벤트 버블링 중단
event.target              // 실제 이벤트 발생 요소
event.currentTarget        // 리스너 등록된 요소

el.getBoundingClientRect()  // { top, left, width, height, ... } 뷰포트 기준
el.scrollIntoView()          // 해당 요소가 보이도록 스크롤
el.scrollIntoView({ behavior: 'smooth', block: 'center' })

el.offsetWidth / el.offsetHeight   // padding, border 포함 크기
el.clientWidth / el.clientHeight   // padding 포함, border/scrollbar 제외
el.scrollWidth / el.scrollHeight   // 스크롤 영역 포함 전체 크기

window.scrollTo(0, 0)
window.scrollBy(0, 100)
el.scrollTop / el.scrollLeft

el.focus()
el.blur()
el.click()       // 프로그래밍적으로 클릭 트리거
el.select()      // input/textarea 텍스트 전체 선택
el.checkValidity() // 폼 검증 (input의 required, pattern 등 체크)

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible')
    }
  })
})
observer.observe(el)

const resizeObserver = new ResizeObserver((entries) => {
  // 요소 크기 변화 감지
})
resizeObserver.observe(el)

카테고리	필수
탐색	querySelector, querySelectorAll, closest
생성/삭제	createElement, appendChild, remove
속성	getAttribute, setAttribute, dataset
클래스	classList.add/remove/toggle/contains
내용	textContent, innerHTML
이벤트	addEventListener, preventDefault, stopPropagation
크기/스크롤	getBoundingClientRect, scrollIntoView
포커스	focus, blur