DOM조작법 CRUD에 대해 알아보자

DOM

DOM은 Document Object Model의 약자로 HTML요소를 Object처럼 조작할수있는 Model이다

 

 

 

 

 

 

console.dir

DOM구조를 조회할때는 console.dir를 사용하자

DOM을 객체의 모습으로 출력해준다. 

 

CRUD (Create, Read, Update and Delete)

document 객체를 통해 HTML엘리먼트를 만들고, 조회하고, 갱신하고, 삭제하는 방법에 대해 알아보자

 

 

 

 

 

CREATE - createElement

document.createElement('div') // <div></div> 를 만들 수 있다

// 매번 div 태그를 만드는것이 귀찮을 경우 변수에 담아서 사용하면 편리하다
const box = document.createElement('div')

이때 box 라는 변수는 그 어떤 엘리먼트에도 속하지못하고 공중부양하고 있는 상태이다 

이를 연결시켜주려면 append 라는 메소드를 사용하자

 

 

 

APPEND - append, appendChild

document.body.append(box)

이렇게 하면 body태그 밑으로 box태그가 생성된다.

 

 

 

READ - querySelector, querySelectorAll

querySelector는 셀렉하는 대상의 첫번째 요소를 가져오고

querySelectorAll은 셀렉대상의 모든 엘리먼트를 유사배열로 받아온다(Array-like Object)

const oneTweet = document.querySelector('.box') 
// class 이름이 box인 HTAML엘리먼트중 첫번째 엘리먼트 조회
const oneTweet = document.querySelector('#box') 
// id 이름이 box인 HTAML엘리먼트중 첫번째 엘리먼트 조회
const oneTweet = document.querySelector('div') 
// 태그 이름이 div인 HTAML엘리먼트중 첫번째 엘리먼트 조회

const tweets = document.querySelectorAll('.box')
// class 이름이 box인 HTAML엘리먼트들 모두 조회

querySelector와 비슷한 역할을 하는 getElementBy

const divbox = document.getElementsByTagName('div');
const textbox = document.getElementsByClassName('test');
const containerbox = document.getElementById('container')

 

 

 

UPDATE - textContent, classList.add

textContent를 이용해 text를 넣어줄 수 있다. 

console.log(oneDiv) // <div></div>
oneDiv.textContent = '안녕하세요';
console.log(oneDiv) // <div>안녕하세요</div>

classList.add와 classList.remove를 통해 class속성을 추가, 삭제할 수 있다. 

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">안녕하세요</div>

다른 attribute도 추가할 수 있다. 

Element.setAttribute(name, value);

 

 

 

DELETE - remove, removeChild

삭제하려는 엘리먼트의 위치를 알고 있는 경우

이는 삭제하고자하는 엘리먼트를 메모리에서 삭제하고 종료하는것

tweetDiv.remove()

 

자식 엘리먼트를 지정해서 삭제하는 메소드 removeChild

이는 메모리에서 삭제하지않고 부모노드와의 관계를 끊어 DOM트리에서 해제하는것 

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