-
[JS] DOM 다루기, 유효성 검사IT/부트캠프 2023. 5. 2. 15:35
I. DOM 다루기
1. create
아무것도 연결되어 있지 않는 노드 그리기
const tweetDiv = document.createElement('div')2. append
부모 노드에 포함하기
이때부터 엘리먼트 요소 확인 가능
document.body.append(tweetDiv)3. read
querySelector로 선택자를 조회한다.
id가 container인 엘리먼트의 마지막 자식 요소로 tweetDiv를 추가한다.
const container = document.querySelector('#container') const tweetDiv = document.createElement('div') container.append(tweetDiv)4. update
const oneDiv = document.createElement('div'); console.log(oneDiv) // <div></div> oneDiv.textContent = 'dev'; console.log(oneDiv) // <div>dev</div> oneDiv.classList.add('tweet') console.log(oneDiv) // <div class="tweet">dev</div> const container = document.querySelector('#container') container.append(oneDiv)5. delete
const container = document.querySelector('#container') const oneDiv = document.createElement('div') container.append(oneDiv) oneDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.자식클래스 이름이 tweet인 요소들만 삭제한다.
const tweets = document.querySelectorAll('.tweet') tweets.forEach(function(tweet){ tweet.remove(); })II. 유효성검사
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>유효성 검사</title> <link rel="stylesheet" href="global-style.css" /> <link rel="stylesheet" href="style.css" /> <link href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css" rel="stylesheet" type="text/css" /> <script src="validator.js"></script> </head> <body> <main> <img class="logo" src="./images/codestates-logo.png" alt="CODE_STATES_LOGO" /> <fieldset> <input type="text" id="username" placeholder="아이디" /> </fieldset> <div class="success-message hide">사용할 수 있는 아이디입니다</div> <div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div> <fieldset> <input type="password" id="password" placeholder="비밀번호" /> </fieldset> <fieldset> <input type="password" id="password-retype" placeholder="비밀번호 확인" /> </fieldset> <div class="mismatch-message hide">비밀번호가 일치하지 않습니다</div> <fieldset class="signup"> <button>회원가입</button> </fieldset> <script src="script.js"></script> </main> </body> </html>script.js
let elInputUsername = document.querySelector('#username') console.log(elInputUsername); let elFailureMessage = document.querySelector('.failure-message') let elSuccessMessage = document.querySelector('.success-message') let elPassword = document.querySelector('#password') let elPasswordRetype = document.querySelector('#password-retype') let elMismatchMessage = document.querySelector('.mismatch-message') elInputUsername.onkeyup = function(){ if(isMoreThan4Length(elInputUsername.value)){ elSuccessMessage.classList.remove('hide') elFailureMessage.classList.add('hide') } else { elSuccessMessage.classList.add('hide') elFailureMessage.classList.remove('hide') } } elPasswordRetype.onkeyup = function() { if (isMatch(elPassword.value, elPasswordRetype.value)) { elMismatchMessage.classList.add('hide'); } else { elMismatchMessage.classList.remove('hide'); } } function isMoreThan4Length(value) { return value.length >= 4 } function isMatch (password1, password2) { return password1 === password2 }'IT > 부트캠프' 카테고리의 다른 글
[Figma] 컴포넌트 구현, 모바일 유튜브 App 클론 구현! (0) 2023.06.15 [JS] Fetch API 의사코드 작성해보기 (0) 2023.05.17 Koans 문제 풀이 오답노트 (0) 2023.05.01 [WSL2] 명령어 정리 (0) 2023.04.24 [JS] 계산기 프로그램 구현하기 (1) 2023.04.22