DOM(Document Object Model)

 - DOM

 

DOM 이란 Docoument Object Model의 약자로 문서 객체 모델을 의미한다.

문서의 구조화된 표현을 제공하며 프로그래밍 언어가  DOM 구조에 접근할 수 있는 방법을 제공하여 문거 구조, 스타일, 내용 등을 변경할 수 있게 도와준다.

 

웹페이지는 일종의 문서이므로 문서는 웹 브라우저를 통해 그 내용이 해석되어 화면에 표시되거나 HTML 소스 자체로 나타나기도한다.

 

또한 객체 지향 표현이며, 자바스크립트와 스크립트 언어를 이용해 DOM을 수정할 수 있다.

 

- DOM의 사용 ex(CRUD)

 

자바스크립트언어를 사용하여 DOM을 사용하는 방법이 있다. 

 

ex )

Create 생성은 createElement 메소드를 사용하여 element를 생성할 수 있다.

document.createElement('div');

간단하게 보면 어떠한 클래스에 div들이 종속되어있으면 위에 메소드를 사용하면 종속되지 않은 div 태그를 생성한다.

 

Append  추가는 종속되지 않고 떠 있는 태그를 div의 element를 추가할 수 있다.

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

Read - querySelector, querySelectorAll

 

HTML element의 정보를 조회하기 위해서는 querySelector를 사용하여 첫 번째 인자를 확인할 수 있다.

 

const container = document.querySelector('#container')
const fdiv = document.createElement('div')
container.append(fdiv)

위 코드는 Crate에서 생성한 div 엘리먼트를 container에 넣을 준비를 하고 container의 마지막 자식 엘리먼트로 fdiv를 추가한다.

 

 

Delete - 추가한 fdiv를 remove()를 이용하여 삭제가 가능하다.

const container = document.querySelector('#container')
const fdiv = document.createElement('div')
container.append(fdiv)
fdiv.remove()

 

Update -  비어있는 div 태그를 업데이트가 가능한데 예를 들어, textContent를 사용해 문자열 입력이 가능하다

const fdiv = document.createElement('div')
fdiv.textContent = 'dev'

fdiv.classList.add('fd')

const container = document.querySelector('#container')
container.append(fdiv)

위 코드는 빈 div태그를 생성 후 태그 안에 'dev' 라는 문자열을 입력하고 해당 div태그의 class를 'fd'로 정의하고, 해당 태그를 html문서에 추가한다.

 

console

<div></div>
<div>dev</div>
<div class = "fd">dev</div>

// 이후 container에 추가