트위터 클론 중 DOM을 사용하며

JS 파일에서 HTML DOM에 접근하는 방법
​ html에 태그, class, id 등 선택자를 설정하고 JS에서 사용한다.(어떻게?? 글을 쭉 읽어봅시다 ~ )
​ document라는 html의 루트에 접근해서 document가 가지고 있는 메서드를 사용했다.
​ querySelector(type: string)를 풀어보면 “선택자를 물어본다”라고 생각할 수 있겠다.
​ 그리고 string 타입으로 선택자를 작성해주면 된다.
.으로 시작한것은 class 선택자, #으로 시작하는 것은 id 선택자이다.
​ querySelector() 외에도 getElementById, getElementsByClassName, getElementsByTagName 도 있다.
​ getElementById는 풀어보면 html 요소에 id 속성이 있고 속성의 값이 있을 때 id값으로 해당 요소의 DOM에 접근할 수 있다.
​ document.getElementById(‘id의 값’)
​ ! id는 문서 내에서 유일해야 한다.(유일한 값, 하나밖에 없어야 한다.) 부정의 NOT 아니에요~
​ getElementsByClassName는 풀어보면 html 요소에 class 속성이 있고 속성의 값이 있을 때 class값으로 해당 요소의 DOM에 접근할 수 있다.
​ document.getElementsByClassName(‘class의 값’)
​ ! class는 동일한 값이 중복 가능하고, 복수 개의 값을 설정할 수 있다. 부정의 NOT 아니에요~
​

querySelector()는 id, class를 구분해서 querySelector()에게 넘겨줘야 하고 ​ getElementById(), getElementsByClassName()는 무조건 id, 무조건 class 정해져 있기 때문에 정해진 선택자로 ​ getElementById(), getElementsByClassName()에게 넘겨줘야 한다.