Vanilla JS #4

Grab HTML in JS

만일 container 클래스 아래의 button만을 선택하고 싶다면,

querySelector(".continaer button");

처럼 부모 자식관계를 이용해 세밀하게 태그를 잡을 수 있다.

console.dir() vs console.log()

log()와 dir()의 차이 MDN document

• console.log는 요소를 HTML과 같은 트리 구조로 출력합니다.
• console.dir은 요소를 JSON과 같은 트리 구조로 출력합니다.

HTML의 속성 이용하기

form의 내용이 비어있으면 안된다는 로직을 구현한다고 하자.

<!--HTML-->
<form id="myForm">
  <input type="text"></input>
	<button>
    Enter
	</button>
</form>

//JS
const button=document.querySelector("#myForm button");
const input=document.querySelector("#myForm input");
function handleButtonClick(){
  const value=input.value;
  if(!value) alert("You should write someting anyway");
}
button.addEventListener("click",handleButtonClick);

그러나 우리의 브라우저는 똑똑해서 JS에 있는 이 코드를 딱 한 단어로 대체할 수 있다.

<input type="text" required></input>

이렇게 HTML의 속성을 잘 이용하면 JS 코드 몇줄을 쉽게 대체할 수 있다.

Event Handler Function

모든 eventListener function의 첫 인자는 항상 event에 대한 정보를 갖게 된다.

JS는 이벤트 핸들러를 호출할 때 function의 첫 인자로 event 정보를 자동으로 제공하므로,

우리는 그저 그 인자를 받기 위한 공간만 제공하면 된다.

예시

<!--HTML-->
<form id="myForm">
  <input type="text"></input>
	<button>
    Enter
	</button>
</form>

//
const button = document.querySelector("#myForm button");
const input = document.querySelector("#myForm input");
function handleButtonClick(event) {
  event.preventDefault(); // 브라우저에 기본 정의된 이벤트 처리를 막음 (이 경우는 새로고침을 막음)
  console.log(event);
}
button.addEventListener("click", handleButtonClick);

실행하면 콘솔에 다음과 같이 event에 대한 정보가 찍힌다.

이러한 정보를 이용해 이벤트 핸들러에서 더 다양한 처리를 해줄 수 있다.

HTML 요소 삭제

요소를 삭제하는 방식은 2가지가 있다.

1. display.none인 CSS 클래스를 추가하거나 삭제하여 안보이게만 하는 방법
2. JS에서 HTML 태그를 remove()를 이용해 아예 삭제하는 방법

Raw String

사용자가 멋대로 정의한 string을 raw string이라 하며, 실수에 의한 오류를 막기 위해 상수로 정의해서 사용하자.

이때 대문자로 표기하는 것이 관습이다.

ex) const MY_CLASS_KEY=”myClass”;

참고

문자열의 백틱(`)은 유용하다.

"Hello"+username;
`Hello ${username}`

둘은 동일한 의미이다.