[JavaScript] DOM, Event

1.DOM

DOM이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체모델을 의미한다.
JS는 이러한 모델을 통해 웹 페이지에 접근하고 페이지를 수정할 수 있다.

즉, DOM은 HTML/CSS와 JS를 잇는 일종의 가교 역할을 한다고 볼 수 있다.

1. JS는 어떤 방법으로 HTML에 접근할 수 있을까?

바로 document라는 전역객체를 통해서 가능하다.

document.body.innerHTML = '내용을 바꿔보자';

JS에 이와 같은 코드를 작성한다면 HTML body태그 내부의 내용을 '내용을 바꿔보자'라는 텍스트로 모두 바꾼 것이다.

2. 특정 element를 수정하려면?

tag나 class 또는 ID를 통해서 css/로 접근할 수 있다.

let blue = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';

여기서 주의할 점은 backgroundColor에 -를 사용하지 않고 Camel Case를 사용한다는 점!


또한 요소의 내용에 접근하고 수정하려면 innerHTML을 통해서 가능하다.

let title = document.getElementsByClassName('h1-title')[0];	
// 'h1-title'class를 가진 모든 자식 엘리먼트의 실시간 HTMLCollection 을 반환
//	[0]은 그 중 첫번째 element로 들어감.
title.innerHTML = '바뀐 제목!!!';					

3. 특정 element를 생성하려면?

.createElement 함수를 통해 element를 생성할 수 있다.
그러나 이는 함수의 요소를 만들어줄 뿐 어디에 위치시킬지를 지정한 것이 아니다.
따라서 특정 element를 만든 이후에는 어딘가의 element에 append해줘야 한다.

function addElements() {
  let createPtag = document.createElement('p');   //P태그 생성하기
  let h1 = document.querySelector('h1');          //h1요소 선택
  createPtag.innerHTML = "DOM"                    //DOM이라는 텍스트를 넣기
  createPtag.className = "dom"                    //dom이라는 class이름 넣기
  h1.appendChild(createPtag);			  //h1요소의 뒤쪽에 추가
}
addElements();

4. getElementsByClassName 와 .querySelector의 차이

.getElementsByClassName

.getElementsByClassName('className')[0];
.getElementsByTagName('h1')[0];
동일한 태그나 클래스 중 배열의 위치표시'[]'에 따라 element에 접근
ID의 경우 특정 태그에 유일하게 적용되어 있으므로 배열의 위치표시를 따로 설정하지 않아도 됨.

.querySelector

.querySelector('h1')
.querySelector('.className')

동일한 태그나 클래스 중 가장 위에 위치한 element로 접근
클래스 element에 접근하는 경우 .className을, ID로 접근하는 경우 #IDName을 적어야 한다.

2. EVENT

특정 Element에 이벤트를 생성하기 위하서는 addEventListener 함수를 사용한다.

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

아래 예시를 통해 EVENT를 어떻게 구현하는지 알아보자.

const thisIsButton = document.getElementsByClassName('login-btn')[0];
//먼저 어떤 요소에 이벤트를 넣을지 DOM을 통해 접근

thisIsButton.addEventListener('click', function() {
  const password = document.getElementById('password').value;
  const rePassword = document.getElementById('re-password').value;
//특정 요소에 이벤트 요소를 JS를 통해 구현하기
  if (!password) {
    alert('비밀번호를 입력해주세요!');
    return;
  }
 
  if (!rePassword) {
    alert('비밀번호 확인을 입력해주세요!');
    return;
  }
 
  if (password !== rePassword) {
    alert('비밀번호가 맞지 않습니다!');
    return;
  }
 
  alert('로그인 성공!!');
});

또한 .addEventListener 함수에서는 두번 째 인자인 함수에 e라는 인자를 추가할 수 있다.

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

thisIsPw.addEventListener('keydown', function(e) {
  thisIsCode.innerHTML = e.keyCode;
  if (e.keyCode === 13) {
     //로그인 함수로 이동
  }
});