CodeStates / DOM

DOM

Document Object Model

• HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작(Manipulation)할 수 있는 Model
• 자바스크립트를 사용하는 방법을 알고 있으면 DOM을 활용하여 HTML을 조작할 수 있다는 의미
• HTML의 아주 작은 부분까지 접근할 수 있도록 여러 뛰어난 웹 개발자들이 모여 철저히 분석하여 준비된 구조(Model; Structure)
• DOM구조를 조회하기 위해서는 Console.dir 이라는 명령어를 사용하면 된다.
  
  
  
  

CREATE - createElement

Chrome Development Tool의 Console창에서 document객체의 createElement 메소드를 활용하여 div element를 만들려면 어떻게 코드를 작성해야 될까요?

document.createElement('div')

이렇게 만든 div Element를 활용하려면 자바스크립트를 활용해서 DOM을 활용할 수 있어야 한다.
자바스크립트에서 어떤 작업의 결과를 담으려면 어떻게 해야 될까?


바로 변수를 선언한 후 결과를 할당하면 된다.

const tweetDiv = document.createElement('div')

이렇게 실행하면 화면에 변화는 없다.
하지만 백그라운드에서는 이미 만들어져있음을 알 수 있다.

이렇게 화면에 안보이는 Element를 Append해야만 실제 웹 페이지 상에 보인다는 것을 알 수 있다.

Append - append, appendChild

Append라는 메소드를 사용해서 body에 넣으려면 어떻게 해야 될까?

바로 다음과 같이 진행해야 한다.

document.body.append(tweetdiv)

이렇게 해도 아무것도 보이지는 않지만 HTML에 새로운 div가 추가된 것을 볼 수 있는데, 바로 Element창에서 확인할 수 있다.

READ - querySelector, querySelectorAll

CSS를 살펴봤을 때의 Selector를 기억한다면 DOM을 효율적으로 들여다 볼 수 있다.
바로 querySelector를 사용하면 된다.
.tweet을 첫번째 인자로 사용하면 tweet을 클래스 이름으로 가진 모든 HTML 엘리먼트를 조회할 수 있다.

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

만약 여러개를 가져오기 위해서는 querySelectorAll을 사용하면 된다.




혹시 아래와 같은 방식을 보게 된다면 단지 비슷한 역할을 하는 오래된 방식이라고만 생각하면 된다.

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

UPDATE - textContent, classList.add

텅빈 div에 뭔가의 글자를 집어 넣고 싶다면 다음과 같이 입력하시면 됩니다.

oneDiv.textContent = 'dev';

(어떤 div이름에 textContent라는 메소드를 사용하시면 됩니다.)

또한 스타일이 적용될 수 있도록 class를 지정하려면 다음과 같이 작성하시면 됩니다.

oneDiv.classList.add('tweet')

(어떤 div이름에 classList.add라는 메소드를 사용하여 class를 지정하시면 됩니다.)

DELETE - remove, removeChild

삭제하는 방법 또한 여러가지가 존재한다.
해당 Element가 어디에 있는지 알고 있는 경우에는 다음과 같이 remove 메소드를 사용하면 된다.

tweetDiv.remove()

또한 자식 엘리먼트를 지우는 방법이 있다.

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

하지만 innerHTML은 보안상의 문제가 있기에 removeChild라는 메소드를 사용하는게 훨씬 안전하다.

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

이 while문은 자식 엘리먼트가 하나도 없을 때까지 삭제하는 의미의 코드이다.

만약 자식 엘리먼트를 하나는 남기게 하고 싶다면?

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

또한 직접 엘리먼트 자체를 찾아서 지울 수도 있다.

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}