3.0~3.5

3. JAVASCRIPT ON THE BROWSER

3.0 The Document Object

▶️ JS는 HTML에 이미 연결되어 있어, Element들을 변경하고 읽을 수 있다.

document

• console 창에 document라고 치면 저장된 html 파일들을 보여준다.
  - document는 우리의 웹사이트를 의미, 모든것 들의 시작점이라고 볼 수 있다.
  • document는 브라우저에 이미 존재하는 object으로, 접근가능한 html을 가리키는 객체이다.
    - 아래와 같이 JS의 관점으로 보여준다.

    👉 document.title을 치면 "Momentum"을 불러온다.
    이처럼 JS는 HTML에 접근하여 읽을 수 있게 설정 되어있음

• 객체이기 때문에, html 내용을 변경할 수도 있다.

  • 예) document.title = "hi"

---

3.1 HTML in Javascript

element를 가져오는 함수들을 이용해 JS로 정보가져오기_id

id로 가져오기

document.getElementById('id명')

• string 을 전달받는 함수이기 때문에 id명에 '' 이나 ""을 붙여주어야한다.
• HTML에서 id를 통해 element를 찾아준다.

💡 console.dir() : element를 더 자세하게 보여줌

---

3.2 Searching For Elements

element를 가져오는 함수들을 이용해 JS로 정보가져오기_class

class로 가져오기

document.getElementsByClassName("class명")

• 위의 코드는 html에 같은 class를 가진 모든 태그의 element가 속해 있음 (태그들이 들어있는 배열)

querySelector 와 querySelectorAll

querySelector

• 특정태그를 지정해서 가져올 수 있다.

  document.querySelector(".hello h1")
  👉hello라는 클래스에 속해있는 h1 태그

  <div class ="hello">
  <h1>hihi</h1>
  </div>

• 단 하나의 element를 리턴해준다(찾은경우).

  • 찾지 못했다면 null 을 리턴

• 여러태그가 같은 조건이라면 첫번째 태그만 가져온다.

• CSS selector를 사용하여 검색할 수 있다.

querySelectorAll

• selector안의 조건에 부합하는 모든 element를 가져온다.

자주 뜨는에러!!

▶️ 해당 변수가 존재하지 않으니 변수 내부의 innerText를 호출하지 마십시오의 뜻

---

3.3 Events

addEventListener()

▶️JS 에게 무슨 event를 listen하고싶은지 알려줌

.addEventListener("듣고싶은 event",호출할 함수)

title.addEventListener('click',hi);

👉title 변수에 들어있는 태그가 click되면 hi()라는 함수를 호출
주의: 함수뒤의 ()는 넣어주지 않는다.함수만 넘겨주고 JS가 click이벤트가 실행되었을때 대신실행

---

3.4 Events part Two

event종류 찾는법

▪️event 를 찾는방법:
첫번째
1. 구글에 이벤트를 추가하고 싶은 태그의 이름을 MDN에 검색 (ex. h1 html element MDN)
2. 링크에 Web APIs라는 문장이 포함된 페이지를 찾는다.(JS 관점에서의 HTML element
3. HTMLheadingelement > HTMLElement > events 부분 참고

두번째
1. console.dir(태그이름)을 통해서 element를 console에 출력시키기
2. 이름 앞에 on이 있는 property 찾기
3. on뒤의 것들이 모두 event

---

3.5 More Events

window interface / object

▶️ 태그뿐만 아니라 웹브라우저 창의 변화 이벤트에 따라 함수를 사용할 수 있다.

window.addEventListener("이벤트", 함수);

---

(코드챌린지) 풀고 제출완료

포인트!!

▶️ 객체안에 있는 함수를 불러오는것
▶️ html태그를 JS에서 불러오는것.
▶️ 필요한 event 를 구글링해서 찾는것