DOM 연습 6개

『DOM을 깨우치다』를 읽던 2022년 1월에 DOM API 를 직접 써 보려고 만든 연습이다. 같은 폴더의 폼 검증 모듈과 홈페이지는 따로 올렸다. 책 정리는 DOM 노트에 있다.

• 자동차 경주: innerText 로 제목을 바꾸고, 팔레트에 mouseover 하면 색 이름을 보여 주고, 버튼을 누르면 setInterval 로 두 자동차가 marginLeft 를 늘리며 달린다. 위 화면이 이것이다.
• 쇼핑 리스트: createElement 와 appendChild 로 항목을 넣고, 삭제 버튼은 removeChild, 검색창은 keyup 으로 거른다.
• 페이지 넘기기: 이전·다음 버튼으로 1~7 사이를 오가고 끝에서는 alert 를 띄운다.
• 배경색 바꾸기: mouseover 한 블록의 id 를 classList 에 더해 색을 입힌다.
• 스타벅스 메뉴 세기: childNodes 를 돌며 p 태그를 세어 메뉴 수를 alert 로 알려 준다.
• 이벤트 버블링: 버튼으로 e.target 과 e.currentTarget 을 바꿔 가며 어느 요소가 잡히는지 본다.

페이지 넘기기, 스타벅스, 자동차 경주는 alert 를 쓰는 곳이 있어 미리보기 안에서는 브라우저 확인창이 뜬다.