TIL - 12 - JavaScript - DOM & Event

park_kyo_suΒ·2021λ…„ 6μ›” 16일
0

JavaScript

λͺ©λ‘ 보기
4/6
post-thumbnail

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 μš”μ†Œ ν…μŠ€νŠΈ μˆ˜μ •λ“±μ˜ ν‚€μ›Œλ“œ

자주 μ‚¬μš©ν•˜λŠ” 속성

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)ν™”λ©΄ 클릭, 마우슀 λ“œλž˜κ·Έ, μœˆλ„μš° μ‚¬μ΄μ¦ˆ 쑰절..
이벀트의 μ’…λ₯˜λŠ” ꡉμž₯히 λ§Žλ‹€. 암기보닀 많이 μ‚¬μš©ν•˜λ©΄μ„œ μ΅μˆ™ν•΄μ§€μž!

<div>
  <p>ν€΄μ¦ˆλ₯Ό λ‹€μ‹œ ν’€κ³  μ‹ΆμœΌμ‹œλ©΄ μ•„λž˜ λ²„νŠΌμ„ λˆ„λ₯΄μ„Έμš”!</p>
  <button>μ‹œμž‘!</button>
</div>
const reStartBtn = document.querySelector("button");

reStartBtm.addEventListener("click", function onButtonClick () {
	alert("ν€΄μ¦ˆ μ‹œμž‘ν•©λ‹ˆλ‹€!");
}

였늘의 ν•œμ€„ ✏️


둜그인 νŽ˜μ΄μ§€ κ΅¬ν˜„μ„ ν•˜λ‹€κ°€ DOMκ³Ό eventκ°€ λ™μž‘μœΌλ‘œλŠ”
이해λ₯Ό ν•˜λŠ”λ° κ°œλ…μ μœΌλ‘œλŠ” λ‘λ£¨λ­‰μ‹€ν•˜μ—¬ λΆ€μ‘±ν•˜μ§€λ§Œ
볡슡용으둜 정리λ₯Ό ν•΄λ΄€λ‹€. λ­”κ°€ μ•žμœΌλ‘œ 벨둜그 μ†λ‹˜μ΄ λ κ²ƒλ§Œ κ°™λ‹€.🀷
λ‹¨μˆœνžˆ 빨리 진도λ₯Ό λ‚˜κ°€λŠ” 것보닀 λ‚΄κ°€ μ„€λͺ…ν•  수 μžˆλ„λ‘ 이해λ₯Ό ν•΄μ•Όκ² λ‹€.

μ°Έκ³ 

profile
이사쀑 ! https://dpark-log.tistory.com/14

0개의 λŒ“κΈ€