#3. JavaScript on the Browser

HTML element를 가져오는 방법들

document.getElementById("id값");
document.getElementsByClassName("class이름");
document.getElementsByTagName("tag명");

각각 id, class, tag 이름을 가지고 요소를 찾아올 수 있다

하지만 querySelector를 사용하면 css selector를 사용하여 element를 검색할 수 있기 때문에 더 편하다

document.querySelector(".hello h1");
document.querySelectorAll(".hello h1");

querySelector는 hello라는 클래스 명을 가진 요소 안의 h1 태그를 단일 element로 반환한다

querySelectorAll은 같은 조건의 element들을 배열로 반환해준다

 +) querySelector는 getElement에 비해 느리다... 하지만 편의성 측면에서 압도적이기 때문에(jQuery는 querySelector보다 느림에도 잘 사용되고 있다) 잘 혼용해서 사용하자

 

Event Listener 추가하기

element.addEventListener("click", 함수명);

위와 같이 이벤트 리스너를 추가하게 되면, click 이벤트를 받았을 경우 함수명에 해당하는 함수를 실행시킨다

* 함수명 뒤에 ()가 붙게 되면 자동으로 실행되니, 제외하고 써야 한다

* 람다 함수를 사용하거나 function() { }을 사용하는 경우도 자동 실행되지 않음

* 나중에 removeEventListener(type(ex. "click"), 함수명)를 이용해서 이벤트 리스너를 제거할 수도 있다

 

element.onclick = 함수명;
element.onclick = 함수명2;

혹은 이런 식으로 코드를 작성할 수도 있는데, 이 경우에는 해당 element의 onclick을 지정해주는 방식이라, 첫번째 줄의 함수는 실행되지 않고, 두번째 줄의 함수만 실행된다

* addEventListener는 말 그대로 add 해주는 거라 여러 개를 추가해도 모두 동작한다

 

여러 이벤트들은 https://developer.mozilla.org/ko/docs/Web/API/HTMLElement 사이트 등을 참고하면 좋다

 

JavaScript와 CSS

// 클래스명 전체를 변경할 수 있다
element.className = "클래스네임";

// bool 값을 반환
const isContain = element.classList.contains("클래스명");

// 해당 클래스를 제거
element.classList.remove("클래스명");

// 해당 클래스가 존재하면 제거, 존재하지 않으면 추가
element.classList.toggle("클래스명");

* 바닐라 자바스크립트에서는 classList를 받아와서 관리해야 한다