DOM 다루기 (CRUD + append)

어떤 컴퓨터 언어를 배우더라도  가장먼저 집중해야 할 것은 CRUD가 되겠다. 

 

이번에는 document 객체를 통해서 html 엘리먼트를 create, read, update, delete 방법을 학습한다.

특히, DOM 에서는 html 에 적용(append) 하는 메서드가 따로 있으니 주의해야 겠다.

 

 

 

 

CREATE 생성

document.createElement('div')를 사용하여 div를 생성한다

document.createElement('div')
<div>​</div>​ 


//자바스크립트에서 어떤 작업의 결과를 담으려면?
//변수를 선언하고 어떤 작업의 결과를 변수에 할당
//여기서는 div element를 tweetDiv에 할당

const tweetDiv = document.createElement('div')

아직 화면에 변화가 없는 것이 당연, 공중부양 중
이어지는 콘텐츠 APPEND 에서 tweetDiv를 트리구조에 연결!

 

 

 

 

 

 

 

APPEND 연결

document.body.append(tweetDiv)

append( ) 를 이용해서 body 안에 tweetDiv 를 연결해줌.

 

• 아무것도 보이지 않는데 잘못 입력한 것인가?

아니다. div 요소에 아무런 내용을 입력하지 않아서 보이지 x

 

• 내용은 어떻게 넣는가?

UPDATE에서 자세하게 설명, textContent 라는 메서드 활용!

tweetDiv.textContent = '지은이짱';
'지은이짱'

console.log(tweetDiv)
//<div>​지은이짱​</div>​

 

 

 

 

 

 

 

READ 조회

DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫번째 인자로 셀렉터(selector)를 전달하여 사용할 수 있다.

셀렉터로는 html요소("div"), id(#~~),class(.~~) 세가지가 많이 사용된다.

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

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

 

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

querySelectorAll 로 클래스 이름이 tweet인 모든 html 요소를 배열형 객체로 받아온다.

 

 

 

querySelector과 querySelectorAll 만 알아도 대부분의 요소를 조회할 수 있지만, get 으로 시작하는 DOM조회 메서드를 볼 수 있다. 이 메서드는 querySelector와 비슷한 역할을 하는 오래된 방식이다.

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

console.log(getOneTweet === queryOneTweet) // true

 

CREATE 에서 생성한 div요소(tweetDiv)를 container 안에 마지막 자식요소로 추가한다.

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

container.append(tweetDiv)

div요소(tweetDiv)를 container 안에 마지막 자식요소로 추가된 모습

 

 

 

 

 

 

 

UPDATE 요소변경

먼저, oneDiv 라는 이름의 <div> 요소를 만들었다.

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

textContent 라는 요소를 사용해서, 비어있는 <div></div> 에 문자열을 입력한다.

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

 <div>dev</div> 이대로 container 에 append 하면 css 스타일링이 적용되지 않는다. CSS 스타일링이 적용될 수 있도록 element에 class 를 추가하자. classList.add 를 이용해 추가한다.

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

 

순서대로 div 생성, 문자열 추가, 클래스 추가라는 과정을 거쳤다. 

이번에는 append()를 이용해서 container 의 자식요소로 넣어보겠다.

const container = document.querSelector('#container')
container.append(oneDiv)

화면에 보이는 대로 dev 상자가 생겼다

 

 

 

 

 

 

 

DELETE 삭제

삭제하는 방법에도 여러가지가 있습니다. 먼저 삭제하려는 요소의 위치를 알고있는 경우이다.

remove() 메서드를 사용한다.

 

const oneDiv = document.createElement('div');
oneDiv.remove()

 

여러개의 자식요소를 지우려면 어떻게 할까?

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

innerHTML 을 사용해 id 가 container인 요소 아래의 모든 자식요소를 지웠다. 하지만, innerHTML은 보안에서 몇가지 문제가 있기 때문에 다른 메서드를 사용해도 좋다.

 

 

바로 removeChild 입니다

removeChild 는 자식요소를 지정해서 삭제하는 메서드 이다. 모든 자식요소를 삭제하기 위해 반복문(while, for 등)을 활용할 수 있다. 다음 코드는 자식요소가 남아있지 않을 때까지, 첫번째 자식요소를 삭제하는 코드이다.

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

while(container.firstChild){
    container.removeChild(container.firstChild);
}

하지만 이렇게 되면, 제목인 tweet list 까지 삭제해버린다. 

어떻게  tweet list를 남겨둘 수 있을까?

container 의 자식요소가 1개만 남을때까지 마지막에 오는 자식요소를 제거한다.

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

while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

 

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

2가지 방법!

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

tweets.forEach(function(tweet){
    tweet.remove();
})

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

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