DOM

Achievement Goals

• DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.
  • createElement - CREATE
  • querySelector, querySelectorAll - READ
  • textContent, id, classList, setAttribute - UPDATE
  • remove, removeChild, innerHTML = "" , textContent = "" - DELETE
  • appendChild - APPEND
  • innerHTML과 textContent의 차이

 

DOM 구조를 조회하고 싶을때

console.dir

console.dir 은 console.log 와 달리 DOM을 객체의 모습으로 출력합니다.

 

 

document 객체의 createElement 메소드를 이용하여 div element를 만듭니다.

document.createElement('div')

 

div element를 변수 tweetDiv 에 할당합니다.

const tweetDiv = document.createElement('div')

 

CREATE에서 생성한 tweetDiv를 트리 구조와 연결합니다.

CREATE에서는 다음과 같이 tweetDiv 를 생성합니다.

const tweetDiv = document.createElement('div')
document.body.append(tweetDiv)

querySelector

클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.

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

 

여러 개의 엘리먼트를 한 번에 가져오기 위해서는, querySelectorAll 을 사용합니다.

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

만약 이전 버전의 브라우저(인터넷 익스플로러) 호환성을 신경 써야 한다면, 이런 옛날 방식을 사용해야 할 수도 있습니다.

const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true

 

 remove, removeChild

가장 마지막에있는(가장 마지막에 생성한) element를 삭제합니다.

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.

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

다음의 코드는 자식 엘리먼트가 남아있지 않을 때까지, 첫 번째 자식 엘리먼트를 삭제하는 코드입니다.

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