JavaScript 치트시트

8. DOM 조작

8.1 요소 선택

const header = document.getElementById('header');
const firstBtn = document.querySelector('button');
const allBtns = document.querySelectorAll('.btn');
console.log(header, firstBtn, allBtns);

8.2 속성 및 내용 변경

header.textContent = '새로운 헤더';
header.innerHTML = '<span>HTML 포함 텍스트</span>';
header.setAttribute('class', 'highlight');

8.3 스타일 변경

header.style.color = 'blue';
header.style.fontSize = '24px';

8.4 이벤트 처리

firstBtn.addEventListener('click', () => {
  alert('버튼 클릭됨!');
});

8.5 DOM 생성, 삽입, 삭제

// 생성
const div = document.createElement('div');
div.textContent = '새로운 DIV';

// 삽입
document.body.appendChild(div);

// 삭제
document.body.removeChild(div);

// 교체
const newDiv = document.createElement('div');
newDiv.textContent = '교체된 DIV';
document.body.replaceChild(newDiv, header);