HTML과 Javascript가 연결되어 있다. JS를 통해서 HTML안의 내용을 가져오고 바꿀 수 있다.
3.1 정보 가져오기: HTML에 있는 정보를 가져올 때 사용하는 함수에는 getElementById가 있다. 단, 이 함수 안에 들어가는 것은 무조건 문자열이여야 한다. 또한 이 함수의 경우에는 HTML에서 id를 사용해야 한다. 
HTML에서 사용한 id를 찾는 코드를 JS에 작성하면
<h1 id="title">Grab me!</h1>이 내용이 그대로 출력된다.
콘솔창에서 볼 수 있는 여러가지 내용들을 우리가 수정할 수 있다. autofocus가 false이고 class가 null인 상태에서 우리가 HTML에 내용을 추가하면
autofocus가 true가 되고 class에 title이라는 내용이 추가된다.
JS에서 HTML의 내용을 불러와주는 console.dir 대신에 console.innerText을 쓰면 안의 문구를 바꿀 수 있다.
3.2 정보 찾기: id의 개념이 매우 중요하지만 대부분 class을 쓴다. 두 역할이 매우 비슷하기 때문. id와 연결되는 함수가 getElementById였다면, class와 연결되는 함수는 getElementByClassName이다. 한번에 많은 정보를 가져와야 할 때 이 함수를 사용하면 된다. id나 class 외에 div와 같은 태그들을 가져오기 위해서는 getElementsByTagName를 쓰면 된다. 이 함수들은 출력을 배열로 해준다.
하지만 정보를 가져오는 가장 좋은 방법은 querySelector와 querySelectorAll을 쓰는 방법이다. querySelector는 원소를 CSS방식으로 검색하는 것이다. 즉, 특성 class 내부에 있는 h1을 가져올 수 있다는 것이다. 같은 h1이 여러개 있을 때, 이 함수는 제일 첫번째 것만 불러오게 된다. 이 경우, querySelectorAll를 쓰면 그 여러개의 같은 h1을 모두 불러와준다. 이 함수들은 위의 함수들과 달리 배열이 아닌 원소로 출력해준다.
id나 사용하고 싶을 때에는 getElementById를 쓰기보다는 querySelector 안에 #을 쓰는 것이 더 좋다.
3.3 이벤트: 이벤트란 클릭을 하거나 인터넷 연결이 끊어지는 것과 같이 컴퓨터 상에서 일어나는 모든 일들을 칭하는데, JS는 이 모든 사건들을 listen할 수 있다. 이때 addEventListener을 사용해야 한다. 클릭하는 사건을 알고 싶을 때에는 addEventListener("click")을 쓰면 된다. 여기서 그 사건을 인지했을 때 어떠한 과정이 실행되기를 바라면 addEventListener("click", 실행될 내용) 이렇게 쓰면 된다. 
이렇게 코드를 작성했을 때 title부분에 클릭을 하면 함수가 실행되어 title was clicked!라는 문구가 나온다.
3.4 이벤트2: event의 종류가 굉장히 많은데, 직접 구글에 검색해도 좋지만, 콘솔창에서 앞에 on이라고 붙어있는 것들이 모두 event들이라는 것을 알 수 있다.
이 코드를 실행하면 title을 클릭했을 때 글씨가 파랗게 변하고, title 위에 마우스를 가져다놨을 때 문구가 Mouse is here!로 바뀌며, 마우스가 title 위에 있지 않을 경우 Mouse is gone!로 표시된다.
3.5 추가 이벤트: 이벤트를 사용하는 방법에는 두가지가 있다. 첫번째가 지금까지 했던 그 방법이고, 두번째 방법은 title.onclick과 같이 표현하는 것이다. 
하지만 이 두번째 방법보다는 첫번째 방법을 쓰는 것을 추천한다.
위에서 title 내에서 일어나는 사건들에 있어 동작이 실행되도록 했지만, 전체 화면에서 일어나는 모든 사건들을 인식해야할 때에는 window를 쓴다.
3.6 CSS 1: CSS를 JS에서 사용할 수 있다. 
이 코드에서 ===는 currentColor의 값과 blue가 일치하는지를 의미하고, 아랫줄에서 =는 newColor이 tomato로 바꿔주는 역할인 것이다.
이렇게 CSS를 JS파일에서도 할 수 있지만, CSS는 CSS파일에서 하는 것을 추천한다.
3.7 CSS 2: HTML, CSS, JS 모두 각자의 역할이 있는데 CSS는 style, JS는 애니메이션이다. 각자의 역할에 맞게 사용하는 것이 가장 좋다.
위 코드는 3.6강에서 쓴 코드와 같은 결과를 얻어내는데, 이렇게 HTML, CSS, JS를 모두 나눠서 작성하면 더 적은 코드로 동일한 결과물을 얻어낼 수 있다.
위와 같이 같은 class(저 코드에서는 "clicked")를 여러번 쓸 때 오류의 가능성이 있기 때문에 여러번 쓰기보다는
3.8 CSS 3: JS에서 class name을 추가하고 제거하고 원소가 class name을 포함하고 있는지 확인하는 것은 아주 중요한데, 이때 포함하고 있는지 확인하기 위해서 쓰는 것이 contains, remove이다. 
contains와 remove를 모두 포함하는게 toggle이다. 위 코드는 click할 때마다 class가 있으면 remove해주고 없으면 contain 시켜주는 것이다.
