코드스테이츠 프론트엔드 부트캠프 Day 16 - DOM

DOM: Doucument Object Model

HTML 요소를 JavaScript Object처럼 조작할 수 있는 Model.

 

---

 

아주 간단한 CRUD 설명

 

C: Create

R: Read

U: Update

D: Delete

 

---

C

 

document.createElement('div')

새로운 <div> 요소를 만든다.

const newDiv = document.createElement('div')
document.body.append(newDiv)

새로 만든 <div>요소를 변수에 할당해 그 변수를 body의 자식으로 집어 넣는다.

 

---

R

DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는, querySelector의 첫 번째 인자로 셀렉터를 전달하여 확인해야 한다.

셀렉터에는 HTML 요소("div"), id("#myID"), class(.myClass) 세 가지가 가장 많이 사용된다.

 

querySelector는 같은 것들 중 첫 번째 엘리먼트를 조회하기 때문에, 여러 개의 요소를 한 번에 가져오기 위해서는, 

querySelectorAll을 사용해야한다. 이렇게 조회한 HTML 요소들은 배열처럼 for문을 사용할 수 있다. 하지만 배열은 아니다.

유사 배열, 배열형 객체라고 하고 정식 명칭은 Array-like Object다.

 

---

U

const newDiv = document.createElement('div')
document.body.append(newDiv)

newDiv.textContent = 'Hello'	// 텍스트 추가
console.log(newDiv)	// <div>Hello</div>

newDiv.classList.add('newStyle')	// 클래스 추가
console.log(newDiv)	// <div class="newStyle">Hello</div>

이런 식으로 class 지정해서 스타일링할 수 있다.

 

---

D

newDiv.remove()