[ES6][JS] DOM 객체 CRUD 하는 방법

◆목표

DOM 객체 생성
DOM 객체 읽기
DOM 객체 수정
DOM 객체 삭제

---

1. DOM 객체 생성

메서드명	설명
document.createElement(태그명)	HTML 요소 생성하기
document.appendChild(요소명)	HTML 요소 추가하기

 

2. DOM 객체 읽기(찾기)

메서드	설명
document.getElementById(아이디명)	id로 찾기
document.getElementsByTagName(태그명)	태그로 찾기(배열로 리턴, 복수)
document.getElementsByClassName(클래스명)	class 이름으로 찾기(배열로 리턴, 복수)
document.querySelector(css명)	css Selector로 찾기(첫번째 요소만 선택됨)
document.querySelectorAll(css명)	css Selector로 찾기(모든 요소를 찾음, 배열로 리턴)

 

3. DOM 객체 수정

접근법	설명
element.innerText / element.innerText = 수정값	element Text 부분 내용 확인 / 수정
element.innerHtml / element.innerHtml = 수정값	element HTML 부분 내용 확인 / 수정
element.attribute / element.attribute = 수정값	element 속성값 확인 / 수정
element.style.property / element.style.property	element css 프로퍼티 값 확인 / 수정
element.setAttribute(요소명, 값)	요소의 attribute 값 설정하기

 

4. DOM 객체 삭제

메서드	설명
document.removeChild(요소명)	HTML 요소 삭제하기
document.replaceChild(변경값, 이전값)	HTML 요소 대체하기