# DOM(Document Object Model)

돔이란 웹페이지의 HTML을 계층화 시켜 트리구조로 만든 객체(Object)모델
JavaScript는 이 모델로 웹페이지에 접근하고, 페이지를 수정 가능하다.

const wecodeId = document.getElementById('idName')
const wecodeClass = document.getElementByClassName('className')

const wecodeTag = document.getElementsByTagName('tagName')

const newwecode = document.createElement('newTagName')

# Event

사용자가 인입되어 발생하는 동작 ( 클릭 이벤트, 마우스 이벤트, 스크롤 이벤트, 터치 이벤트, resize(화면 크기 변화) 이벤트,...)

# addEventListener

요소.addEventListener(이벤트종류, function() {
  //이벤트가 일어났을 때 실행할 내용
});

# 이벤트 종류

click
contextmenu
dblclick
mousedown
mouseenter
mouseleave
mousemove
mouseover
mouseout
mouseup
pointerlockchange
pointerlockerror
select
wheel

# clickEvent

로그인 버튼->로그인 api호출 , 상품 사진-> 상품 상세화면 이동, 자세히보기 버튼-> 팝업화면 출력

const thisIsButton = document.getElementsByClassName('login-btn')[0];
// index[0]번째 위치한 .login-btn을 변수에 담아 사용예정 
// -> 클래스는 중복되게 선언가능하여 index[]로 찾아서 실행가능

thisIsButton.addEventListener('click', function() {
  // .login-btn을 담은 변수에 클릭이벤트가 발생하면 펑션 실행
  const password = document.getElementById('password').value;
  // 아이디 패스워드의 벨류값을 패스워드 변수에 담음
  const rePassword = document.getElementById('re-password').value;
  // 아이디 패스워드확인의 벨류값을 리패스워드 변수에 담음
  
  if (!password) {
    alert('비밀번호를 입력해주세요!');
    return;
  }
  // 패스워드벨류값이 맞지않을경우 alert실행
  
  if (!rePassword) {
    alert('비밀번호 확인을 입력해주세요!');
    return;
  }
  // 리패스워드벨류값이 맞이않을경우 alert실행
  if (password !== rePassword) {
    alert('비밀번호가 맞지 않습니다!');
    return;
  }
  // 패스워드 및 리패스워드가 서로 맞지않으면 alert 실행
  
  alert('로그인 성공!!');
  // 위의 if에 맞지않은경우에 해당하지않은 경우 alert실행해서 로그인성공
});

# keyEvent

keydown : 키보드를 눌렀을때
keyup : 키보드를 누르고 땠을때
keypress : 키보드를 눌러 어떤 텍스트를 작성되는 순간 발생 (스페이스 포함)

const thisIsPw = document.getElementById('password');
const thisIsCode = document.getElementById('code');


thisIsPw.addEventListener('keydown', function(e) {
  thisIsCode.innerHTML = e.keyCode;
});