Document

• document는 브라우저에 이미 존재하는 Object 객체로 이는 우리가 접근할 수 있는 HTML을 가리키는 객체를 의미한다.
• document 객체를 사용해서 HTML과 연결되어있는 JS는 HTML에 접근하여 여러 정보를 가져오고 가져온 정보를 JS코드에서 볼 수도 있다.
  -JS로 HTML에 있는 title을 가져오고, body를 가져올 수 있다.

<script>
document.title
document.body
</script>

HTML in Javascript

JS로 HTML을 가져오는 방법들

1> getElementById

• getElementById는 document 객체의 함수로 HTML에서 id를 통해 element를 가져올 수 있다.
• 또한 이러한 document 함수를 사용하여 가져온 element들을 변경할 수 도 있다.

2> getElementsByClassName

• getElementsByClassNames는 HTML의 class를 통해 element를 배열로 가져온다.

3> getElementsByTagName

• getElementsByTagName는 HTML의 Tag를 통해 element를 배열로 가져온다.

4> querySelector(권장)

• querySelector는 HTML의 element를 CSS selecotr를 사용하여 가져온다. 오직 첫 번째element만을 return 한다.

5> querySelectorAll

• querySelectorAll은 HTML의 element를 CSS selecotr 사용해 배열의 형태를 가져온다. selecotr 안의 조건에 부합하는 모든 element를 가져준다.

... 결론, 거의 대부분 querySelector 가끔 querySelectorAll를 사용하자