[DOM] Read

DOM을 이용하여 HTML element를 조회하는 거다

 

DOM으로 HTML element의 정보를 조회하기 위해서는 querySelector의 첫번째인자로 셀렉터(Selector)를 전달하여 확인할수있다.

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

 

1. querySelector

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

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

 HTML 문서에는 클래스이름이 tweet인 요소가 여러개 있는데, 변수 ,oneTweet에 할당된 요소는 단 하나이다.

 

2. querySlectorAll

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

주의! html요소들은 배열이 아니다!!!!! 

이런 배열 아닌 배열을 유사배열 이라고 한다.(Array-like Object)

 

3. getElementById

querySelector와 비슷한 역할을 하는 오래된 방식이라고만 기억하자

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

 

---

# document.getElementById('div') 

이거는 id가 <div> 요소 하나를 조회한다.

document.getElementsByClassName('div') 

이거는 class가 <div> 요소 여러개를 조회한다.

 

# <div> 요소를 전부 조회하는 방법
document.querySelectorAll('div') 이거랑
document.getElementsByTagName('div') 이거는 같은거다.