Quest 05. Playing with DOM

Introduction

• 이번 퀘스트에서는 자바스크립트를 통해 브라우저의 실제 DOM 노드를 조작하는 법에 대하여 알아볼 예정입니다.

Topics

• DOM API
  • document 객체
  • document.getElementById(), document.querySelector(), document.querySelectorAll() 함수들
  • 기타 DOM 조작을 위한 함수와 속성들
• Closure

Resources

• 자바스크립트 완벽 가이드, 인사이트
• 자바스크립트 객체지향 프로그래밍, 위키북스

Checklist

• 자바스크립트를 통해 DOM 객체에 CSS Class를 주거나 없애려면 어떻게 해야 하나요?
  • IE9나 그 이전의 옛날 브라우저들에서는 어떻게 해야 하나요?
• 자바스크립트의 변수가 유효한 범위는 어떻게 결정되나요?
  • var과 let으로 변수를 정의하는 방법들은 어떻게 다르게 동작하나요?

Quest

• Skeleton 디렉토리에 주어진 HTML을 조작하는 스크립트를 완성해 보세요.
  • 첫째 줄에 있는 사각형의 박스들을 클릭할 때마다 배경색이 노란색↔흰색으로 토글되어야 합니다.
  • 둘째 줄에 있는 사각형의 박스들을 클릭할 때마다 enabled라는 이름의 CSS Class가 클릭된 DOM 노드에 추가되거나 제거되어야 합니다.
• 구현에는 여러 가지 방법이 있으나, 다른 곳은 건드리지 않고 TODO 부분만 고치는 방향으로 하시는 것을 권장해 드립니다.