DOM(Document Object Model)

DOM(Document Object Model)

DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작할 수 있는 Model이다. 즉, JavaScript를 사용할 수 있다면, DOM을 이용하여 HTML을 조작할 수 있는 것이다. DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있으며, 소셜미디어 등에서 새롭게 생성되는 게시물을 저장하고 분류하는 작업을 구현할 수 있다.

 

CRUD(Create, Read, Update and Delete)

앞으로 어떤 종류의 개발이나 컴퓨터 언어를 배우더라도, 당장 모든 속성과 메서드를 바로 외울 수는 없다. 그러므로 가장 중요한 CRUD를 먼저 이해하는 것이 새로운 언어를 가장 빠르게 학습하는 방법이다.

 

1. Create

const tweetDiv = document.createElement('div')

div 엘리먼트를 만들었고, 이를 변수 tweetDiv에 할당해 주었다. 현재 tweetDiv라는 요소는 공중부양 중이다. APPEND를 아직 해주지 않았기 때문이다.

 

아직 어디에도 연결되지 못하고 공중에 떠있는 tweetDiv.

document.body.append(tweetDiv)

위와 같이 append를 이용하여 body에 tweetDiv를 붙여줄 수 있다.

 

 

2. Read

JavaScript에서 원시 자료형인 변수의 값을 조회하기 위해서는, 변수의 이름으로 직접 조회할 수 있다. 참조 자료형인 배열은 index를,객체는 key를 이용하여 값을 조회할 수 있다. DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 qeurySelector의 첫 번째 인자로 선택자(selector)를 전달하여 확인할 수 있다. 선택자로는 HTML요소, id, class 이 세가지가 가장 많이 사용된다.

 

querySelector에 '.tweet'을 첫 번째 인자로 넣으면, 클래스 이름이 tweet인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있다.

const oneTweet = document.querySelector('.tweet')

 

여러 개의 요소를 한번에 가져오기 위해서는, querySelectorAll을 사용한다. 이렇게 조회한 HTML 요소들은 '배열처럼' for문을 사용할 수 있다. 하지만 이 요소들은 배열이 아니며, 유사배열/배열형 객체 등 다양한 이름으로 부른다. 정식 명칭은 Array-like Object이다.

const tweets = document.querySelectorAll('.tweet')

 

위의 두 가지 방법만 알아도 대부분의 요소를 조회할 수 있다. get을 이용한 DOM조회 메서드도 있는데, 이는 오래된 방식이지만, 인터넷 익스플로러와의 호환성을 신경써야 한다면 이런 옛날 방식을 써야할 수도 있다.

const getOneTweet = document.getElementbyID('container')
const queryOneTweet = document.querySelector('#container')

 

다음과 같은 코드를 입력하면, container의 맨 마지막 자식요소로 tweetDiv를 추가해 줄 수 있다.

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

 

 

3. Update

먼저, textContent를 이용하여 비어있는 div 엘리먼트에 문자열을 입력한다.

const oneDiv = document.createElement('div');
oneDiv.textContent = '히히';
console.log(oneDiv) // <div>히히</div>

 

CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가해준다.

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">히히</div>

 

<추천> MDN에서 setAttribute 검색

 

 

4. Delete

하나의 요소를 지우려면 remove()를 이용하여 간단하게 삭제 할 수 있다.

const container = document.querySelector('#container')
const oneDiv = document.createElement('div')
container.append(oneDiv)
oneDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

 

innerHTML을 이용하면, 아주 간단하게 모든 자식 요소를 지울 수 있다.

document.querySelector('#container').innerHTML = '';
// id가 container인 요소 아래의 모든 요소를 지운다.

 

하지만 innerHTML은 보안에서 몇 가지 문제를 가지고 있다. 따라서 이 방법을 대신할 다른 메서드를 사용한다. removeChild는 자식 요소를 지정해서 삭제하는 메서드이다. 모든 자식 요소를 삭제하기 위해, 반복문을 활용할 수 있다.

아래의 코드는 자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제하는 코드이다.

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

아래의 코드는 container의 자식 요소가 하나만 남을 때 까지 삭제하는 코드이다.

const container = document = document.querySelector('#container');
while(container.children.length > 1) {
  container.removeChild(container.lastChild);
}

또는 직접 클래스 이름이 tweet인 요소만 찾아서 지우는 방법도 있다.

const tweets = document.querySelector('.tweet')
tweets.forEach(function(tweet) {
  tweet.remove();
})

// or

for (let tweet of tweets) {
  tweet.remove()
}