코드스테이츠 16일차 회고

오늘은 DOM에 대해서 배웠다.

JS로 HTML을 조작할 때 사용한다는 것은 알고있었지만, CRUD 실습을

하면서 다시 복습하니까 이해가 잘 되었다.

 

querySelector와 getElementById의 차이가 궁금했었는데 동일한 기능이지만,

요즘에는 querySelector를 더 선호해서 사용한다고 한다.

 

그리고 여러 개의 요소를 한 번에 가져오는 querySelectorAll로  조회된 HTML 요소들이,

배열은 아니지만, for문을 사용할 수 있는 배열형 객체 라는것을 새롭게 알게되었다.

 

이외에도 Element.setAttribute(name,value)를 이용하여 속성을 추가 할 수 있다는 것도

Mdn 검색을 통해서 알게되었다.

 

이후에는 이를 배운 내용을 바탕으로 유효성 검사 과제를 진행하였다.

 

우선 비밀번호가 4글자 이상일 때, 그렇지 않을 때 각각 다른메시지를 보여주는 것을 구현하였다.

 

display: none 인 hide 속성을 이용하여 상황에 맞게 hide 속성을 추가, 삭제를 통해서 화면을 구현하였다.

hide 속성을 통해서 class 추가 삭제 하며 상황에 맞는 화면 구성

글자수에 따른 다른 문구

 

이와 유사하게 비밀번호와 비밀번호 확인이 동일할 때도, 다른 문구가 나오게 구현해보았다.

 

과제는 전부 구현했지만, 추가적인 기능을 생각해보았다.

비밀번호가 다르면 회원가입 버튼 비활성화, 숫자만 입력되는 전화번호 창 등을 내일 추가적으로 구현해야겠다.

 

-끝-