DOM_READ

개념

• JS에서 원시 자료형인 변수의 값을 조회하기 위해서는, 변수의 이름으로 직접 조회할 수 있다.
• 참조 자료형인 배열은 index를, 객체는 key를 이용해 값을 조회할 수있다.
• 하지만 DOM은 조금 다른 방법을 사용해야한다. DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(selector)를 전달하여 확인할 수 있다.
• 셀렉터로는 HTML 요소("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용된다.
  ※ querySeclector는 셀럭터를 조회한다는 의미를 가지고 있다. query의 의미가 "질문하다"라는 뜻을 가지고 있다.
  ※ query라는 단어는 개발자 간에 "ㅇㅇㅇ를 조회한다"라는 의미는 "쿼리를 날리다"라는 jargon(특정 영역에서만 사용되는 단어)로 굳어졌기 때문에 알고 있어야 한다.

querySelector

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

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

• querySelector로 클래스 이름이 tweet인 HTML 요소를 조회한다.

querySelectorAll

여러 개의 요소를 한 번에 가져오기 위해선 querySelectorAll을 사용한다.

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

• 위 처럼 조회하면 HTML 요소들은 배열처럼 for문을 사용하실 수 있다. (유사 배열)
• 조회한 HTML 요소들은 배열은 아니며 이런 배열 아닌 배열을 유사 배열,배열형 객체 등 다양한 이름으로 부른다.
• 정식 명칭은 Array-like Object 이다.

※ querySelector 와 querySelectorAll 만 알아도 대부분의 요소를 조회할 수 있다.

get으로 시작하는 DOM조회 메서드를 볼 수도 있다.

• 위 메서드는 querySelector와 비슷한 역할을 하는 오래된 방식이다.

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

• getElementById와 querySelector로 각각 받아 온 container 요소는 하나의 요소이다.

• CREATE에서 생성한 div 요소를 container에 넣을 준비가 되었다.

• conatainer의 맨 마지막 자식 요소로 tweetDiv를 추가한다.

	// 위 내용을 코딩 으로 한다면
	const container = document.querySelector('#container')
	const tweetDiv = document.createElement('div')
	container.append(tweetDiv)

-tweetDiv를 conainer의 마지막 지식 요소로 추가한다.

• id가 container인 엘리먼트의 마지막 자식 요소로 tweeDiv를 추가한다.

• 새롭게 추가된 tweetDiv는 별도의 class가 지정되어 있지 않아, CSS를 이용한 스타일링이 적용되지 않았다.

• 다음 장에 설명할tweeDiv에 class를 붙여 스타일링응 적용한다.