노마드 코더 바닐라JS로 크롬 앱 만들기 복습용 정리(2)

 

- JavaScript는 HTML에 이미 연결되어 있다. JavaScript로 HTML을 변경할 수 있음.

 

- 우리의 web site를 의미하는 document가 모든 것들의 시작점이다.

 

 

<< element를 가지고 오는 방법 >>

- getElementById : HTML에서 id를 통해 element를 찾아주는 함수.

  참고) log 대신 dir 을 사용하면 더 자세한 정보를 가져올 수 있다. 

- 많은 element를 한 번에 가지고 와야 하는 경우에는 getElementsByClassName()을 사용하면 된다. 

 

- getElementsByTagName : tag name을 가지고 element들 가지고 오기.

  (tag는 anchor, div, section, button 같은 것들을 의미함.)

 

- querySelector : element를 CSS 방식으로 검색할 수 있음.   ← 가장 많이 사용하게 될 것 ★

  참고) const title = document.querySelector("#hello");

            const title = document.getElementById("hello");

            이 두 코드는 같은 일을 한다.

- querySelectorAll : h1이 여러 개인 경우에는 이 함수를 써야 부합하는 모든 element를 가져다준다.

 

 

- event

click event 1

click event 2

  페이지에서 element를 찾아오고(1),

  그 element에 event listener를 추가하면(2),

  해당 event가 일어날 때 listen하여 반응(3).

 

- listen 하고 싶은 event를 찾는 가장 좋은 방법은 구글에 찾고 싶은 element의 이름을 검색하는 것.

  예) h1 html element mdn 검색 후 Web APIs라는 문장이 포함된 페이지를 찾음.

        https://developer.mozilla.org/en-US/docs/Web/API/Element#events

Element - Web APIs | MDN

        https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

  또는 console.dir을 통해서 element를 console에 출력시킨 다음, on이 붙어있는 property를 확인하면 됨. 

  (사용할 땐 on을 빼고 사용)

  참고) title.addEventListener("click",hadleTitleClick);

            title.onclick = hadleTitleClick;

            이 두 코드는 같은 일을 한다.

 

window - resize 화면 크기가 바뀔 때

  document의 body, head, title 이런 것들은 중요하기 때문에 위와 같이 가능.

  나머지 element들은 querySelector 등으로 찾아와야 함. 

 

---

 

예제

더 보기 좋게 작성된 코드

 

→ 물론 style은 위 방식보다 CSS 파일에 따로 작성하는 것이 더 좋다.

JavaScript는 HTML을 변경하고, CSS는 HTML을 바라보는 구조.

 

→ const를 이용하여 변수를 정의해 주면, 오류 확률을 줄일 수 있다.

 

→ className은 이전 class들은 상관하지 않고 그냥 모든 걸 교체해버리기 때문에 classList를 사용하는 것이 좋다.

contains : 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 알려줌.

 

→ toggle function

: class name이 존재하는지 확인함. 존재한다면 class name을 제거, 존재하지 않는다면 class name을 추가.

코드 한 줄로 같은 일을 할 수 있다..!