Vanilla JS #3

HTML in JS

JS 내부에서 HTML 태그들을 읽고, 바꾸고, 추가할 수 있다.

Grabing HTML

document 객체 : JS에서 HTML에 접근할 수 있는 객체.

HTML 요소를 가져 올 수 있는 방법은 3가지가 존재한다.

1. ID로 가져오기

   • document.getElementById()

2. Class로 가져오기

   • document.getElementByClassName()

3. Tag로 가져오기

   • document.getElementByTagName()

그러나, element를 CSS 방식으로 가져올 수 있는 방법이 존재하는데, 바로 querySelector이다. 이 방식이 가장 선호된다.

querySelector(), querySelector() HTML 요소를 CSS 방식으로 검색하여 가져올 수 있다.

ex) document.getSelector(“.main h1”) 위 구문은 main 클래스를 가진 부모 아래의 h1 요소를 선택한다.

Event

Event Listener

이벤트를 처리하려면 이벤트를 담당하는 함수인 이벤트 리스너를 등록해주어야 한다.

버튼에 이벤트를 처리해보자.

const button = document.querySelector("button");

function handleButtonClick() {
  console.log("button was clicked!");
}

button.addEventListener("click", handleButtonClick);

이와 같이 이벤트 리스너를 등록하려면

htmlTag.addEventListener("event",function)

이 양식을 지키면 된다.

다만, 함수를 실행하는 것이 아닌 위임하는 것이므로 함수를 실행시키면 안된다.

따라서 함수에 괄호를 씌우면 안된다는 것을 유의하자.

참고로 이벤트 리스너를 위와 같이 addEventListener를 이용하는 것이 아닌

htmlTag.onClick=function

이렇게 아예 이벤트 이름을 명시해서 사용할 수도 있는데, 선호에 따라 한가지를 통일해서 사용하면 된다.

Event with controlling CSS-class

이벤트 핸들러로 HTML 요소의 속성값을 직접 변경해 줄 수 있지만,

JS는 로직을 구현하는 놈이므로, 스타일을 바꾸는 것은 CSS에 위임하자.

즉, 다시 JS에서는 클래스를 추가해주는 것으로 끝내자.

[예시 코드]

/*CSS file*/
.clicked {
  background-color: red;
}

//JS
const button = document.querySelector("button");

function handleButtonClick() {
  button.classList.toggle("clicked");
}

button.addEventListener("click", handleButtonClick);

1. className()을 이용할 경우 클래스가 덮어 씌워지게 된다.

   -> classList.remove() / classList.add()를 사용할 것

2. remove(), add()를 상황에 따라 써야 하므로 코드가 불필요하게 길어진다.

   -> toggle()을 사용하자. 있으면 제거, 없으면 추가하는 똑똑한 함수이다.

참고

raw-value : 개발자가 마음대로 설정한 식별자. 하드 코딩하기 보다는 따로 상수로 만들어주고 사용하자.

이때 문자 상수는 전부 대문자를 사용하는 것이 관례이다.

//비추천 : 하드코딩
h1.className = "superClass";
h2.className = "superClass";
//h3.className="superClas" <- 이렇게 스펠링 실수할 수 있음 (에러 직접 찾아야함)

//추천 : 상수로 만들어사용 -> 실수 발생하면 에러 발생
const SUPPER_CLASS = "superClass";
h1.className = SUPER_CLASS;
h2.className = SUPER_CLASS;
//h3.className=SUPER_CLAS; <- 스펠링 실수하면 에러를 발생시켜준다.