오늘도 삽질중

DOM(돔이란?, console.dir, 돔 메소드 연습: 간단 todo-list, 간단 유효성검사) 본문

[Js Node]/DOM

DOM(돔이란?, console.dir, 돔 메소드 연습: 간단 todo-list, 간단 유효성검사)

해빋 2021. 9. 13. 23:09

<목차>

  • DOM이란?
  • HTML에 JavaScript 적용하기
  • DOM구조를 조회
  • 돔 메소드 연습 CRUD(create , read ,update, delete) (ex 간단 투두리스트, 유효성검사)

 

DOM (Document Object Model)

-HTML요소를 Object처럼 조작할 수 있는 모델이다. 즉 자바스크립트를 이용하면 DOM으로 HTML을 조작할 수 있다.

(HTML을 조작한다? DOM을 위해 웹 개발자들이 HTML의 아주 작은 부분까지 접근할 수 있는 구조를 만들었다. 이렇게 만들어진 구조를 이용해 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들수 있다.)
-자바스크립트는 다양한 일을 할 수 있지만, 웹 페이지를 제어하기 위한 목적으로 오랜기간 사용되었다. 

 

HTML에 JavaScript 적용하기

HTML에 JavaScript를 적용하기 위해서는 <script>태그를 이용한다. 이 태그는 <body>태그가 끝나기 전에 삽입한다.

 

 

DOM구조를 조회

DOM구조를 조회할 때에는 console.dir이 유용한다. console.dir은 console.log와 달리 DOM을 객체의 모습으로 출력한다.

 

 

 

CRUD(create , read ,update, delete)

-document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제(DELETE)한다.  

 

DOM의 여러 메소드들을 간단한 todolist, 유효성검사를 통해 연습

  • createElement - CREATE
  • querySelector, querySelectorAll - READ
  • textContent, id, classList, setAttribute - UPDATE
  • remove, removeChild, innerHTML = "" , textContent = "" - DELETE
  • appendChild - APPEND

돔 연습: Todolist

<body>
    <div class = "todoName">To Do List</div>
    <form class = 'input_form'>
        <input type ="text" placeholder = "write here">
    </form>
    <ul class = 'input_list'>
    
    </ul>
    

    <script src = "newTodo.js"></script>
</body>
const todoName = document.querySelector('.todoName')
const inputForm = document.querySelector('.input_form');
const inputWrite = document.querySelector('.input_form input');
const inputList = document.querySelector('.input_list');

const body = document.querySelector('body')
body.style.background = "teal";
// 만약에 inputWrite에 입력을 한다면
// 예를들어 inputWrite에 공부하기라고 치고 엔터를 누른다면(submit)
// inputList에 inputWrite.value에 이름이 기재가 된다.


inputForm.onsubmit = function (event) {
    const li = document.createElement('li')
    const span = document.createElement('span')
    const button = document.createElement('button')
    const button2 = document.createElement('button')
       console.log('클릭확인');
       event.preventDefault();

       inputList.appendChild(li);
       li.appendChild(span);
       li.appendChild(button);
       li.appendChild(button2);
       button.innerHTML = '✔️';
       button.style.margin = '10px';
       button2.textContent = '❌ ';
       span.textContent = inputWrite.value; 

       button.addEventListener("click" , function() {
        span.style.textDecoration = "line-through";
        span.style.textDecorationColor = "red";
       })
       
       button2.addEventListener("click", function() {
           li.remove();
       })
       
}
button:hover{
    background-color: blueviolet;
}

돔연습: 간단투두리스트

돔 연습: 유효성 검사

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

  <fieldset>
    <label>비밀번호</label>
    <input id = 'password' type = "password">
  </fieldset>

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

  <fieldset>
    <button class = "button">회원가입</button>
  </fieldset>
  
 

  <script src="script.js"></script>
</body>
let elFailureMessage = document.querySelector('.failure-message');
let elSuccessMessage = document.querySelector('.success-message');
let elInputUsername = document.querySelector('#username');
let password1 = document.querySelector('#password');
let password2 = document.querySelector('#password-retype');
let misMatch = 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');
   }
}

function isMoreThan4Length(value) {
  return value.length >= 4 

}

password2.onkeyup = function() {
  if (isMatch(password1.value, password2.value)) {
   misMatch.classList.add('hide');
  }else {
   misMatch.classList.remove('hide');
  }
} 

function isMatch (a, b) {
  return a === b
  
}
body{
  background-color: coral;
}
.hide {
  display: none;
}

 

 

돔 연습: 간단 유효성검사

 

Comments