DOM

document.getElementXXX()

document.querySelector()

요소.style.속성 = "스타일 속성값"

const box = document.getElementById('box'); box.style.color = 'red';

const box = document.getElementById('box'); // 개별 스타일 속성 지정 box.style.backgroundColor = 'blue'; box.style.width = '200px'; box.style.height = '100px'; box.style.border = '2px solid black'; // cssText를 사용한 여러 스타일 동시 지정 box.style.cssText = 'background-color: blue; width: 200px; height: 100px; border: 2px solid black;'; // Object.assign을 사용한 여러 스타일 동시 지정 Object.assign(box.style, { backgroundColor: 'blue', width: '200px', height: '100px', border: '2px solid black' });

<ul class="list"> <!-- 리스트 --> <li><a href="">리스트1</a></li> <li><a href="">리스트2</a></li> </ul>

// 내용 변경 element.textContent = '새로운 텍스트'; element.innerHTML = '<span>HTML 포함</span>'; // 스타일 변경 element.style.backgroundColor = 'blue'; element.style.fontSize = '20px'; // 클래스 조작 element.classList.add('active'); element.classList.remove('inactive');

// 새 요소 생성 const div = document.createElement('div'); div.textContent = '새로운 div 요소'; // 문서에 추가 document.body.appendChild(div); // 특정 위치에 삽입 parentElement.insertBefore(div, referenceElement);

// 이벤트 리스너 추가 element.addEventListener('click', function(event) { console.log('클릭됨!'); }); // 이벤트 객체 활용 input.addEventListener('keyup', function(event) { if (event.key === 'Enter') { console.log('엔터키 입력!'); } });

// 요소 직접 제거 element.remove(); // 부모 노드를 통한 제거 parentElement.removeChild(childElement); // 모든 자식 요소 제거 while (element.firstChild) { element.removeChild(element.firstChild); }