DOM(Document Object Model)의 구조

자바스크립트

 

DOM은 Document Object Model의 약자로,

HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다.

즉, JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다.

 

그렇다면 HTML에서 JS는 어떻게 실행 될까?

웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춘다.

HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행한다.

<script> 요소는 등장과 함께 실행된다는 사실!

 

자바스크립트에서 DOM은 documnet 객체에 구현되어 있다. 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 documnet 객체를 조회할 수 있다.

console.log(document.body)

 

 DOM을 이용하여 CRUD만들기

DOM을 이용하여 HTML Element 추가하기

const div = document.createElement('div')

div 변수에 <div>태그를 생성했다.

이 태그를 사용하려면? append가 필요하다

document.body.append(div)

 

DOM을 이용하여 HTML Element를 조회하기

DOM에서 HTML element를 조회하기 위해서는 선택자(selector)를 사용한다.

const one = document.querySelector('.one') // 해당 선택자 조회
const two = document.querySelectorAll('.two') // 모든 선택자 조회

const getOne = document.getElementById('container') // #을 붙이지 않는다.
const queryOne = document.querySelector('#container') // #을 붙인다.
console.log(getOne === queryOne) // true

 

DOM을 이용하여 HTML Element를 변경하기

div.textContent = 'dev';
console.log(div) // <div>dev</div>

div 엘리먼트 안에 contents를 넣기 위해서는 element.textContent를 사용한다.

 

앞서 생성한 div 엘리먼트를 container에 append 했을 때, CSS 스타일링이 적용되지 않는다. CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가한다.

div.classList.add('hello')
console.log(div) // <div class="hello">dev</div>

element.classList.add('')로 css 셀렉터를 추가할 수 있다.

 

DOM을 이용하여 HTML Element에 자식요소 추가하기

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

container의 자식 요소로 div가 추가됐다.

 

+ element.setAttribute()

element.setAttribute( 'attributename', 'attributevalue' )

attributename에는 속성 이름을, attributevalue에는 속성값을 넣는다.

document.getElementById( 'hello' ).setAttribute( 'title', 'This is title' )

// <div id="hello" title="This is title"></div>

id 값이 hello인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다.

style의 다른 속성을 덮어 쓸수 있으므로 권장하지 않음.

 

element.style.title = "This is title";

이렇게 쓸것을 권장함

 

DOM을 이용하여 HTML Element 삭제하기

div.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

 

+ 특정 Element의 자식요소 다 지우기

document.querySelector('#container').innerHTML = '';

id가 container인 element의 자식요소를 모두 지움. 하지만 innerHTML은 권장하지 않음(보안 상의 이유)

 

+ 그래서 removeChild를 사용함

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

while문을 사용해서 id가 container인 element의 자식 요소중 첫번째 자식요소만 제거한다.