TIL - 12 - JavaScript - DOM & Event

DOM이란?🧐

MDN에서 말하는 DOM(Document Object Model)의 정의는 다음과 같다.

The Document Object Model (DOM) is a programming interface for HTML.
DOM은 HTML 문서를 위한 프로그래밍 인터페이스이다.

쉽게 말하면 여러 소프트웨어 간의 교류를 가능하게 해주는 표면 같은 존재이다.

예시를 들면 이해하기가 쉽다.

TV를 보고 있을때 리모콘의 다양한 종류의 버튼들을 통해 TV와 교류(채녈 이동) 한다. 이러한 상황에서 리모콘의 버튼들이 프로그래밍 인터페이스와 같은 역할이고, 이러한 인터페이스를 이용하여 TV를 컨트롤 할 수 있다.

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

위와 같이 .blue라는 클래스를 가진 요소를 선택하여 해당 요소의 스타일을 수정하였다.
즉, DOM이라는 프로그래밍 인터페이스를 사용하여 자바스크립트가 HTML 문서를 조정하는 것이다.

여기서 주의해야 할 사항은 자바스크립트로 화면을 수정한다고 해서 내가 작업하는 HTML 문서(ex.index.html) 자체가 수정되는 것은 아니다.

1. 요소 선택하는 방법 🤏

1. 아이디 이름을 이용하여 선택 by.document.getElementById
- document.getElementById를 이용하여 요소를 선택할 경우 주어지는 값은 하나이다.
- tip.여기서 Id는 페이지당 1개만 존재하므로 element

// start-button 아이디를 가진 요소를 선택하여 `$sb` 변수에 대입
const $sb = document.getElementById("start-button");

// special-button 아이디를 가진 요소의 텍스트 변경
$sb.textContent = "Engine Start";

2. 클래스 이름을 이용하여 선택 by.getElementsByClassName
- getElementsByClassName의 결과값은 배열과 유사한 형태(유사 배열)이다. 그렇기 때문에 대부분의 상황에서 배열의 index위치를 사용해야 한다.
- HTML 상에서 해당 클래스를 가진 요소가 하나 뿐이라도, getElementsByClassName의 결과값은 배열과 유사한 형태이므로 인덱스를 사용하여 접근한다.
- tip.class는 한페이지에 여러개가 존재할 수 있으므로 elements => 배열 or 유사 배열

// letItGo 클래스를 가진 "모든 요소들"을 선택하여 `$container` 변수에 대입
const $letItGo = document.getElementsByClassName("letItGo");

// HTML 상에서 해당 클래스를 가진 요소가 단 하나 뿐이더라도,
// getElementsByClassName의 결과값은 배열과 유사한 형태이므로 인덱스로 접근하여 사용한다.
$letItGo[0].style.backgroundColor = "green";

3. 태그 이름을 이용하여 선택 by.getElementsByTagName
- 특정 태그를 사용한 요소들을 선택
- getElementsByClassName과 getElementsByTagName는 결과값이 대부분 동일한 형태(HTML Element가 담긴 유사 배열)이다.

4. CSS선택자를 이용하여 선택 by.querySelector
- CSS 선택자 문법을 이용해야한다. (실수 조심!)
- querySelector라는 함수는 모든 경우에 "하나의 요소"를 반환한다.
- querySelector 함수의 CSS 선택자와 일치하는 요소가 여러 개일 경우, 가장 첫번째 요소를 반환한다.
- querySelectorAll함수의 CSS 선택자와 일치하는 "모든 요소들"을 유사 배열의 형태로 반환한다.(getElementsByClassName처럼 요소를 제어하고 싶다면 index위치를 사용해야 한다.)

const $container = document.querySelector("#container");
const $listName = document.querySelector(".name");
const $paragraphs = document.querySelectorAll("p");

2. 요소 다루기

DOM을 이용하면 선택한 요소들을 수정하거나 삭제할 수 있다.

const $article = document.querySelector(".meet");
$article.textContent = "Hello!";

HTML요소를 모두다 암기할려고 하지 말고 정확한 검색을 해서 이용하자!
검색어 : 자바스크립트 HTML 요소 텍스트 수정등의 키워드

자주 사용하는 속성

• Element.children
• Element.classList
• Element.innerHTML
• Element.style
• Element.remove
• Element.appendChild

3. 요소 만들기

const secondHead = document.createElement("h2"); // h2 요소를 만들어서 "scondHead"라는 변수에 할당
secondHead.textContent = "소제목"; // h2 요소 텍스트 설정
secondHead.fontSize = "45px";	 // h2 요소 스타일 설정
document.body.appendChild(secondHead); // h2 요소 body 태그의 자식으로 추가

수정과 삭제가 가능하듯, 만들기도 가능하다.

4. event

"event"란 웹에서 발생하는 사건들을 일컫는 단어이다. ex)화면 클릭, 마우스 드래그, 윈도우 사이즈 조절..
이벤트의 종류는 굉장히 많다. 암기보다 많이 사용하면서 익숙해지자!

• Event reference

<div>
  <p>퀴즈를 다시 풀고 싶으시면 아래 버튼을 누르세요!</p>
  <button>시작!</button>
</div>

const reStartBtn = document.querySelector("button");

reStartBtm.addEventListener("click", function onButtonClick () {
	alert("퀴즈 시작합니다!");
}

오늘의 한줄 ✏️

로그인 페이지 구현을 하다가 DOM과 event가 동작으로는
이해를 하는데 개념적으로는 두루뭉실하여 부족하지만
복습용으로 정리를 해봤다. 뭔가 앞으로 벨로그 손님이 될것만 같다.🤷
단순히 빨리 진도를 나가는 것보다 내가 설명할 수 있도록 이해를 해야겠다.

참고

• https://developer.mozilla.org/ko/