DOM (돔)

• Document Object Model
• 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델.
• JavaScript는 DOM 모델로 웹페이지에 접근하고, 페이지를 수정할 수 있다.
• DOM은 HTML인 웹페이지와 스크립팅 언어를 서로 잇는 역할이다

document 라는 전역객체를 통해 DOM 구조에 접근할 수 있다.

• document 객체는 HTML 문서를 나타낸다.
• document 객체는 DOM 트리의 root node에 접근하게 해준다.
• document 객체로 요소에 접근하듯이 요소의 속성에도 접근할 수 있으며, class / id도 추가하고 style도 수정할 수 있다.
• 요소의 내용은 innerHTML로 접근하고 수정할 수 있다.

document.body.innerHTML = "내용 다 바꿈";
// body 태그 내부에 있는 것을 "내용 다 바꿈" 이라는 텍스트로 바꾼 것.
// body 태그 내에 엄청 많은 요소가 있더라도 innerHTML을 사용하면 내용 전부 교체됨.

let el = document.querySelector('.blue'); // class명 'blue'를 찾는 docuent 객체.
el.style.backgroundColor = 'blue'; // 배경색을 'blue'로 바꾸는 스타일 변경

background-color 대신 backgroundColor 를 썼다?

• JavaScript에서 style 수정시, hypen(-) 사용할 수 없다.
• style에 접근하고 싶을 때는 hypen(-) 대신 camelCase 표기법으로 바꾸면 된다.

이벤트

• 사용자가 페이지 안에서 특정한 행동을 했을 때.
• 특정 요소에 interactive한 반응을 할 수 있게 하는 것.

.addEventListener

• 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받은 함수를 실행시켜 준다.

요소.addEventListener(이벤트 종류, function() {
 // Event 발생시 실행할 내용
});

• 특정 요소에 addEventListener 함수를 붙이고(호출하고), 인자로 이벤트 종류와, 이벤트가 발생했을 때 실행할 함수로 전달합니다.
• 이렇게 인자로 전달된 함수를 콜백함수라고 부른다.

.getElementsByClassName

const thisIsButton = document.getElementsByClassName('login-btn')[0];

• document에서 class의 이름이 'login-btn'인 요소를 가지고 와라.
• 끝에 [0]이 붙은 이유?
  • class 이름은 여러 요소에 중복해서 이름을 줄 수 있다. 그래서 해당되는 값들이, 배열에 반환이 된다.
  • 해당 클래스명을 가진 요소가 하나밖에 없으면, 요소가 하나인(배열 길이가 한 개인) 배열이 반환된다.
  • 그렇지만 해당값이 여러 개인 경우, [0]을 붙이면 해당값 중에서 제일 첫 번째 클래스 요소만 반환된다.
• 반면 .getElementsById는 id 값은 한 개로 고유하기 때문에 인덱스 [0]을 붙여줄 필요가 없다.

- 클릭 이벤트

thisIsButton.addEventListener('click', function() {
  const pw = documnet.getElementById('password').value;
  const repw = documnet.getElementById('re-password').value;
  
  if (!pw) { // 값이 없으면
    alert("비밀번호를 입력해 주세요");
    return;
  }
  
  if (!repw) {
    alert("비밀번호 확인을 입력해 주세요");
    return;
  }
  if (pw !== repw) {
    alert("비밀번호가 맞지 않습니다");
    return;
  }
  
    alert('회원가입 성공!!');
});

• button.login-btn 첫 번째 요소를 클릭하면, 두 번째 인자로 넘긴 콜백함수가 실행된다.

- 키보드 이벤트

• keydown : 키보드 눌렀을 때 발생
• keyup : 키보드를 누르고 떼는 순간 발생
• keypress : 키보드를 눌러 어떤 텍스트가 작성되는 순간 발생.

const pw = document.getElementById('password');
const cd = document.getElementById('code');

pw.addEventListener('keydown', function(e) {
  cd.innerHTML = e.code;
});

• input#password 요소에 keydown 이벤트 발생시 함수 실행하라는 addEventListener 추가.
• span#cd의 내용에 e.code 실행. (입력된 키의 이름 정보)
• e.code : 입력된 '키'에 대한 정보. 예를 들면 엔터 '키'의 이름(code)은 'Enter' 이다.

☑️ 평소에 다른 웹 사이트에서 로그인 할 때, 어디는 엔터를 치면 로그인이 되고, 어디는 엔터를 쳐도 로그인이 되지 않아 불편하다고 생각했을 것이다. 이는 프론트엔드 개발자가 key 이벤트를 추가해서 엔터를 감지하여 로그인이 되도록 프로그래밍을 했느냐, 안 했냐에 따른 차이다.

pw.addEventListener('keydown', function(e) {
	if (e.code === 'Enter') {
		// Enter 키를 keydown 키를 눌렀을 때 실행될 내용 
	}
});

getElementById와 getElementsByClass 의 차이점.

> getElementById

💡 이름부터 살펴보자. 특히 "Element" 부분.

• id값은 고유하기 때문에, 딱 하나의 값을 가진다. 고로 이름에서도 알 수 있듯이 "Element"이므로, ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용하다.
• 고유한 Element 객체를 반환한다.

> getElementsByClass

💡 이름부터 살펴보자. 특히 "Elements" 부분.

• "Elements"라고 되어있다. 클래스값은 중복으로 쓸 수 있기 때문에 같은 클래스값이 여러 개 있을 수도 있다.

• 만약 class 값이 good인 요소가 여러 개 있다. getElementsByClass('good'); 을 썼을 때, class 값이 good인 요소가 여러 개 다 잡힐 것이다. 그러면 그 요소들이 있는 순서대로 배열에 저장되며, 배열은 순서(인덱스)가 있다. 그 여러 개 중에서 내가 선택하고 싶은 요소를 골라야 하기 때문에 getElementsByClass('good'); 끝에 인덱스를 붙여야 한다. → getElementsByClass('good')[인덱스명];

  → 만약 1번째 요소를 잡고 싶다면 getElementsByClass('good')[0];

그렇다면 getElementById와 querySelector의 차이는 뭐고, 어떨 때 쓰일까?

• HTML의 해당 태그에 id값이 없는 요소가 있다면, querySelector를 쓴다.
• 사용법도 다른 듯하다. getElementById('id명') / querySelector('id명') or querySelector('input#id명')
• 제공한 CSS 선택자를 만족하는 첫 번째 [**Element](https://developer.mozilla.org/ko/docs/Web/API/Element) 객체**를 반환한다. 결과가 없다면 null.
• 선택자를 만족하는 모든 요소의 목록이 필요하다면 [querySelectorAll()](https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll)을 대신 사용하면 된다.
• querySelector 보다는 getElementById 이 더 지원이 잘되는 편이라고 한다.

꿀팁🍯 | 통째로 요소 잡기

const a = document.querySelector('p.classValue');
const b = document.querySelector('p#idValue');

꿀팁🍯 | 요소의 내용값 잡기

a.value;
b.value;