[JS] DOM 사용하기

DOM

• DOM이란 쉽게 말해, HTML의 요소들을 브라우저가 객체(노드)로 표현한 것이다.
• <ul> <li> <div> 등의 형태로 이루어져있음.
• 이러한 DOM 요소들은 Javascript로 조작이 가능한데, 그 메소드들을 정리해 보려고 한다.

DOM 메소드

1. 요소 생성하기

• createElement('요소 이름')

	// div 태그 생성해서 div에 저장
	const div = document.createElement('div');

2. 단일 요소 불러오기

• getElementById('요소 id')

	// id가 root인 요소를 container에 저장
	const container = document.getElementById('root')

• querySelector('요소 id/class명')

	// id가 root인 요소를 container에 저장
	const container = document.querySelector('#root');

	// class가 root인 요소를 container에 저장
	const container = document.querySelector('.root');

3. 요소에 문자열 생성하기(대체하기)

• textContent = '문자열';

	// 요소 특정
	const $app = document.querySelector('#app');

	// $app에 텍스트 추가
	$app.textContent = '이유난';

textContent로 설정한 문자열은 문자열을 추가하는 개념이 아니고, 기존 문자열을 대체하는 개념이므로 사용에 주의!

4. 요소에 자식 요소 추가하기

• appendChild(변수명)

	const ul = document.createElement('ul');
	const li = document.createElement('li');
	
	// ul요소에 li 태그 추가
	ul.appendChild(li);

5. 요소에 문자열 추가하기

• innerHTML = '문자열'

	const ul = document.createElement('ul');
	const li = document.createElement('li');
	// li 요소에 '이윤환' 문자열 추가
	li.innerHTML = '이윤환';