TIL(20210705) - DOM

🎁  Daily

• DOM(Document Object Model), 유효성 검사(Form validation) 학습
• DOM을 이용한 유효성 검사(아이디, 패스워드)

🤔  Learned

• 이벤트(event)
  - DOM에서 이벤트는 마우스를 클릭하거나, 키보드를 누르는 등의 사용자 액션에 의해 발생한다.
  - 브라우저 창 크기를 조절하거나, 스크롤하는 것도 DOM 이벤트의 일종이다.
  - 이벤트가 발생할 때 실행되는 함수를 이벤트 핸들러라고 부른다.
  - 이벤트와 관련된 속성은 on이라는 접두어가 붙는다. (onclick, onkeyup 등)
  

엘리먼트 객체 중에 자주 사용되는 속성

• CRUD(Create, Read, Update and Delete)를 이용하여 DOM을 제어
  
  - CREATE(생성) :

  const tweetDiv = document.createElement('div')

  
  - APPEND(연결) :

  document.body.append(tweetDiv) 
  //create에서 생성한 tweetDiv를 트리 구조와 연결.

  
  - READ(조회) :

  const oneTweet = document.querySelector('.tweet')

  
  - UPDATE(업데이트) :

  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>

  
  - DELETE(삭제) :

  tweetDiv.remove()

🌈  Tomorrow

• DOM, 유효성 검사 복습
• 콘 레퍼런스 읽고 정리
• 노드백엔드 공부