반응형
1. DOM (Document Object Model)이란?
📌 HTML 문서를 자바스크립트가 다룰 수 있게 만든 구조
- DOM은 우리가 작성한 HTML 문서를 브라우저가 트리처럼 분해해서 객체(노드)로 만들어 놓은 것입니다.
- 마치 웹페이지를 레고 블록처럼 쪼개서 하나하나 조작할 수 있게 만든 구조라고 보면 돼요.
2. DOM은 왜 중요할까?
HTML은 정적인 문서지만, DOM 덕분에 자바스크립트를 사용해 HTML을 실시간으로 바꾸거나 조작할 수 있어요.
예를 들어:
- 버튼을 클릭하면 글자가 바뀌고,
- 새로운 내용을 동적으로 추가하거나,
- 이미지를 숨기거나 보여줄 수도 있어요.
3. DOM을 다루는 방법: DOM API 정리
DOM은 자바스크립트로 조작하기 위한 다양한 함수(메서드)와 속성들을 제공합니다.
이것들을 DOM API라고 해요.
(1) 문서 탐색 및 선택
document.getElementById(id)
지정된 id 속성을 가진 요소를 반환합니다.
const element = document.getElementById('myElement');
document.getElementsByClassName(className)
지정된 클래스 이름을 가진 모든 요소를 HTMLCollection으로 반환합니다.
const elements = document.getElementsByClassName('myClass');
document.getElementsByTagName(tagName)
지정된 태그 이름을 가진 모든 요소를 HTMLCollection으로 반환합니다.
const elements = document.getElementsByTagName('div');
document.querySelector(selector)
CSS 선택자를 사용하여 일치하는 첫 번째 요소를 반환합니다.
const element = document.querySelector('.myClass');
document.querySelectorAll(selector)
CSS 선택자를 사용하여 일치하는 모든 요소를 NodeList로 반환합니다.
const elements = document.querySelectorAll('.myClass');
(2) 요소 생성 및 조작
document.createElement(tagName)
지정된 태그 이름의 새로운 요소를 생성합니다.
const newDiv = document.createElement('div');
element.appendChild(child)
지정된 자식을 요소의 끝에 추가합니다.
const parent = document.getElementById('parent');
const child = document.createElement('div');
parent.appendChild(child);
element.insertBefore(newNode, referenceNode)
새로운 노드를 지정된 참조 노드 앞에 삽입합니다.
const parent = document.getElementById('parent');
const newNode = document.createElement('div');
const referenceNode = document.getElementById('child');
parent.insertBefore(newNode, referenceNode);
element.removeChild(child)
지정된 자식 노드를 제거합니다.
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.removeChild(child);
element.replaceChild(newChild, oldChild)
지정된 자식 노드를 다른 노드로 교체합니다.
const parent = document.getElementById('parent');
const newChild = document.createElement('div');
const oldChild = document.getElementById('child');
parent.replaceChild(newChild, oldChild);
(3) 속성 조작
element.setAttribute(name, value)
요소에 지정된 속성을 추가하거나 변경합니다.
const element = document.getElementById('myElement');
element.setAttribute('class', 'newClass');
element.getAttribute(name)
요소에서 지정된 속성 값을 반환합니다.
const value = document.getElementById('myElement').getAttribute('class');
element.removeAttribute(name)
요소에서 지정된 속성을 제거합니다.
const element = document.getElementById('myElement');
element.removeAttribute('class');
(4) 스타일 조작
element.style.propertyName = value
요소의 인라인 스타일 속성을 설정합니다.
const element = document.getElementById('myElement');
element.style.color = 'red';
element.classList
요소의 클래스 리스트에 대한 접근을 제공합니다.
const element = document.getElementById('myElement');
element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('active');
(5) 이벤트 처리
element.addEventListener(type, listener)
요소에 이벤트 리스너를 추가합니다.
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
alert('Button clicked!');
});
element.removeEventListener(type, listener)
요소에서 이벤트 리스너를 제거합니다.
const button = document.getElementById('myButton');
const handleClick = () => {
alert('Button clicked!');
};
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);
반응형