[Javascript] DOM

🦄 DOM

1. DOM: Document Object Modeldocument

✅ DOM을 통해 웹페이지의 컨텐츠, 구조, 스타일을 읽고 조작할 수 있음
✅ HTMLElement는 Element의 자식이고, Element는 Node의 자식
✅ Node는 Object의 자식

참조 자료
https://webclub.tistory.com/341

2. 유효성 검사

2-1. 아이디

문제

• 아이디 길이가 4글자 이상인 경우, "사용할 수 있는 아이디 입니다" 문구 띄우기
• 4글자 이하인 경우, "아이디는 네 글자 이상이어야 합니다" 문구 띄우기

나의 코드

✅ index.html

<fieldset>
  <label>아이디</label>
  <input type="text" id="username" />
  <div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>
  <div class="success-message hide">사용할 수 있는 아이디 입니다</div>
</fieldset>

✅ style.css

.hide {
    display: none;
}

✅ script.js

// id 선택자와 class 선택자를 이용해서 html element를 각각 변수에 할당

const inputUsername = document.querySelector("#username");
const errorMsg = document.querySelector(".failure-message");
const successMsg = document.querySelector(".success-message");


const isMoreThan4Length = (value) => value.length >= 4;

// 아이디 입력창에 onkeyup(키보드가 쳐졌을때) 이벤트 핸들러 추가
inputUsername.onkeyup = () => {

    // 위에 선언된 함수를 이용해서 아이디 입력창에 입력된 값(inputUsername.value)이 
    // true 인 경우, 즉 입력된 값의 길이가 4 이상인 경우 if문이 작동함
    // 그렇지 않을 경우, else문이 작동함
    
    if (isMoreThan4Length(inputUsername.value) {
    
    	// remove()와 add()를 이용해
        // hide 클래스를 추가/제거하여 메세지 문구가 뜨도록 설정
        
        successMsg.classList.remove("hide");
        errorMsg.classList.add("hide");     
    } else {
        successMsg.classList.add("hide");
        errorMsg.classList.remove("hide");
    }
};

2-2. 비밀번호

✅ index.html

<fieldset>
  <label>비밀번호</label>
  <input type="password" id="password" />
</fieldset>
<fieldset>
  <label>비밀번호 확인</label>
  <input type="password" id="password-retype" />
  <div class="mismatch-message hide">두 비밀번호가 일치하지 않습니다</div>
</fieldset>

✅ script.js

// id 선택자와 class 선택자를 이용해서 html element를 각각 변수에 할당

const inputPassword = document.querySelector("#password");
const inputCheckPassword = document.querySelector("#password-retype");
const mismatchMsg = document.querySelector(".mismatch-message");

const isMatch = (pw1, pw2) => pw1 === pw2;

// 비밀번호 확인 입력창에 onkeyup(키보드가 쳐졌을때) 이벤트 핸들러 추가
inputPassword.onkeyup = () => {
    if (isMatch(inputPassword.value, inputCheckPassword.value)) {
        mismatchMsg.classList.add("hide");
    } else {
        mismatchMsg.classList.remove("hide");
    }
};

3. 회원가입 버튼

• 아이디가 4글자 이상이고, 비밀번호가 일치할 경우 버튼이 나타나도록 설정

✅ index.html

• 처음 로딩했을때에는 "회원가입" 버튼이 보이지 않도록 설정 ➡️ hide 클래스 이용

<fieldset>
  <button class="signup-btn hide">회원 가입</button>
</fieldset>

✅ script.js

• 일단 비밀번호 확인이 되었을 때, 버튼이 나타나게끔 설정
  ➡️ 비밀번호 확인 입력 창의 이벤트 핸들러에 해당 조건 추가

const button = document.querySelector(".signup-btn");

inputCheckPassword.onkeyup = () => {
    if (isMatch(inputPassword.value, inputCheckPassword.value)) {
        mismatchMsg.classList.add("hide");
        button.classList.remove("hide"); // 추가한 내용
    } else {
        mismatchMsg.classList.remove("hide");
        button.classList.add("hide"); // 추가한 내용
    }
};

• 버튼이 나타난 이후, 아이디를 수정하려고 아이디를 지웠을 경우, 버튼이 사라져야 하는데 그대로 있는 문제 발생
  ➡️ 아이디 입력 창의 이벤트 핸들러에 해당 조건 추가
  ➡️ if()문 안에 if()문 추가
  아이디가 4글자 이상인 경우에서,
  비밀번호 입력창과 비밀번호 확인 입력창이 빈 값이 아니고,
  두 비밀번호가 일치할 경우에만 버튼이 뜨도록 설정

inputUsername.onkeyup = () => {
    if (isMoreThan4Length(inputUsername.value)) {
        successMsg.classList.remove("hide");
        errorMsg.classList.add("hide");
	
    	// 추가된 if문
        if (
            inputPassword.value !== "" &&
            inputCheckPassword.value !== "" &&
            isMatch(inputPassword.value, inputCheckPassword.value)
        ) {
            button.classList.remove("hide");
        }
    } else {
        successMsg.classList.add("hide");
        errorMsg.classList.remove("hide");
        button.classList.add("hide"); // 추가된 내용
    }
};

• 버튼이 나타난 이후, 비밀번호를 바꾸려고 비밀번호를 지우는데 버튼이 그대로 있는 문제 발생
  ➡️ 비밀번호 입력창에 이벤트 핸들러 추가

inputPassword.onkeyup = () => {
    if (isMatch(inputPassword.value, inputCheckPassword.value)) {
        mismatchMsg.classList.add("hide");
        button.classList.remove("hide");
    } else {
        mismatchMsg.classList.remove("hide");
        button.classList.add("hide");
    }
};