Achievement Goals

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

(1)CREATE - createElement

document.createElement('div')

• 새로운 div element를 만들수있다.

새롭게 생성한 div element는 어떻게 활용할 수 있나요?

const tweetDiv = document.createElement('div')

• 변수를 선언하고 어떤 작업의 결과를 변수에 할당합니다.

tweetDiv 라는 요소는 현재 공중부양 중입니다. APPEND 를 이용해 실제 웹 페이지 상에도 보이는 것을 확인할 수 있습니다.

(2)APPEND - append, appendChild

document.body.append(tweetDiv)

• 변수 tweetDiv에 담긴 새로운 div 엘리먼트를 body 엘리먼트에 append 합니다.
  

(3)READ - querySelector, querySelectorAll

• DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(Selector)를 전달하여 확인할 수 있습니다
• 셀렉터로는 HTML 태그("div"), id("#tweetList"), class(.tweet)가 가장 많이 사용된다.

(3-1)querySelector

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

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

HTML 문서에는 클래스 이름이 tweet 인 엘리먼트가 여러 개 있는 데, 변수 oneTweet 에 할당된 엘리먼트는 단 하나입니다.
여러 개의 엘리먼트를 한 번에 가져오기 위해서는, querySelectorAll 을 사용합니다.

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

• [그림] document.querySelectorAll은 유사배열 /배열형 객체 Array-like Object의 형태로 가져온다.

(3-2)getElementById

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

• getElementbyId = querySelector
• 이런 메소드는 querySelector 와 비슷한 역할을 하는 오래된 방식이라고만 이해하면 됩니다. 만약 이전 버전의 브라우저(인터넷 익스플로러) 호환성을 신경 써야 한다면, 이런 옛날 방식을 사용해야 할 수도 있습니다.

(4) div 엘리먼트를 container에 넣기

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

(5)Futher Study

• MDN에서 querySelector를 검색하여, 다음의 질문에 대해 학습합니다.

• querySelector의 첫번째 인자에 'div'를 넣으면 어떻게 될까요?

  • 제일 처음으로 검색되는 div를 뱉거나, div 가 없으면 null 을 리턴
    

• querySelector를 통해서 더 복잡한 작업을 할 수 있을까요?

  • 관련사이트

• querySelector의 부모는 꼭 document 객체여야만 할까요?

  • document 하위의 어떤 객체든 자식 엘리먼트를 가지고 있다면 querySelector의 부모가 될 수 있습니다.

참고: 코드스테이츠