05-1. DOM๊ณผ DOMํธ๋ฆฌ
DOM: Document Object Model, ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ
DOM์ด๋
- DOM: ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ก ์น ๋ฌธ์์ ์ ๊ทผํ๊ณ ์ ์ดํ ์ ์๋๋ก ์น ๋ฌธ์๋ฅผ ์ฒด๊ณ์ ์ผ๋ก ์ ๋ฆฌํ๋ ๋ฐฉ๋ฒ
- DOM์์๋ ์น ๋ฌธ์๋ฅผ ํ๋์ ๊ฐ์ฒด๋ก ์ ์ํ๊ณ , ์น ๋ฌธ์๋ฅผ ์ด๋ฃจ๋ ๋ชจ๋ ์์(ํ
์คํธ, ์ด๋ฏธ์ง, ํ ๋ฑ)๋ ๊ฐ๊ฐ ๊ฐ์ฒด๋ก ์ ์ํจ
ex) ์น ๋ฌธ์ ์ ์ฒด → document ๊ฐ์ฒด, ์น ๋ฌธ์์ ์ฝ์ ๋ ์ด๋ฏธ์ง → image ๊ฐ์ฒด (→ '๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ' ์ด๋ผ๊ณ ํจ) - ์น ๋ฌธ์์ ๊ฐ์ฒด๋ค๋ ๊ฐ์ฒด์ด๋ฏ๋ก ํ๋กํผํฐ์ ๋ฉ์๋๋ฅผ ๊ฐ์ง๊ณ ์์
DOM ํธ๋ฆฌ
- ์น ๋ฌธ์๋ ์ฌ๋ฌ ๊ฐ์ง ํ๊ทธ๊ฐ ์๋ก ํฌํจ ๊ด๊ณ๋ฅผ ๊ฐ์ง๊ณ ์์. ์ด๋ฐ ๊ด๊ณ ๋๋ฌธ์ ๊ฐ ํ๊ทธ ๊ฐ์๋ '๋ถ๋ชจ'์ '์์' ๊ด๊ณ๊ฐ ์๊น
<!DOCTYPE html>
<html lang = "ko">
<head>
<title>DOM Tree ์์๋ณด๊ธฐ</title>
</head>
<body>
<h1>Do it!</h1>
<img src="images/doit.jpg" alt="๊ณต๋ถํ๋ ์ด๋ฏธ์ง">
</body>
</html>
- html ์์ → head ์์์ body ์์์ ๋ถ๋ชจ ์์
- body ์์ → h1 ์์์ img ์์์ ๋ถ๋ชจ ์์
- ht ์์, img ์์ → body ์์์ ์์ ์์
DOM์ ๊ณ์ธต ๊ตฌ์กฐ(DOM ํธ๋ฆฌ)
- ๋ ธ๋(node): DOM ํธ๋ฆฌ์์ ๊ฐ์ง๊ฐ ๊ฐ๋ผ์ ธ ๋์ค๋ ๋ถ๋ถ
- ๋ฃจํธ(root) ๋ ธ๋: DOM ํธ๋ฆฌ์ ์์ ๋ถ๋ถ์ธ html ๋ ธ๋
- ํ์ ๋ ธ๋: ๊ฐ์ ๋ถ๋ชจ๋ฅผ ๊ฐ์ง ๋ ธ๋๋ค
05-2. ์น ์์์ ์ ๊ทผํ๊ธฐ
- ์น ์์์ ์ ๊ทผํ๋ค: ์น ๋ฌธ์์ ์๋ ์ด๋ฏธ์ง, ํ ์คํธ, ํ ๋ฑ ํน์ ์์๋ฅผ ์ฐพ์๊ฐ๋ ๊ฒ
ํ๋๋ง ์ฝ ์ง์ด๋ด๋ querySelector() ํจ์
โป CSS ์ ํ์ ์ข ๋ฅ
์ ํ์ | ๊ธฐ๋ฅ | ์ฌ์ฉ ์ |
ํ์ ์ ํ์ | ํน์ ํ๊ทธ๋ฅผ ์ฌ์ฉํ ๋ชจ๋ ์์ | p { ... } |
class ์ ํ์ | ํด๋์ค๋ช ์ ์ฌ์ฉํ๋ ํน์ ๋ถ๋ถ | .accent { ... } |
id ์ ํ์ | id๋ช ์ ์ฌ์ฉํ๋ ํน์ ๋ถ๋ถ | #container { ... } |
ํ์ ์ ํ์ | A ์์์ ํ์์ ์๋ ๋ชจ๋ B ์์ | form input { ... } |
์์ ์ ํ์ | A ์์์ ํ์์ ์๋ ์์ ์ค ์์ ๋ ๋ฒจ์ B ์์ | ul > li { ... } |
- ์ ํ์๋ฅผ ์ฌ์ฉํด ์น ์์๋ฅผ ์ ๊ทผํ ๋ querySelctor() ํจ์๋ querySelectorAll() ํจ์๋ฅผ ์ฌ์ฉ
→ ์ด ํจ์๋ค์ doucment ๊ฐ์ฒด์ ํฌํจ๋์ด ์์
(๊ฐ์ฒด์ ํฌํจ๋ ํจ์๋ฅผ '๋ฉ์๋'๋ผ๊ณ ๋ ํจ) - querySelector() ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด ์ง์ ํ ์ ํ์๋ฅผ ์์ ์ค ์ฒซ ๋ฒ์งธ ์์์ ์ ๊ทผํ ์ ์์
document.querySelector(์ ํ์)
// ex) id="container"๋ฅผ ์ฌ์ฉํ ์์์ ์ ๊ทผ
document.querySelector("#container")
- querySelector() ํจ์์์ class ์ ํ์๋ ํ์
์ ํ์(ํ๊ทธ ์ ํ์)๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ๋ ๋ค๋ฆ
→ querySelector() ํจ์์์ class ์ ํ์๋ ํ์ ์ ํ์๋ฅผ ์ฌ์ฉํ๋ฉด ์ ์ฉ๋ ์ฌ๋ฌ ๊ฐ์ ์์ ์ค ์ฒซ ๋ฒ์งธ ์์๋ง ๊ฐ์ ธ์ด
(querySelector() ํจ์๋ 1๊ฐ์ ์์๋ง ๊ฐ์ ธ์ค๊ธฐ ๋๋ฌธ)
๋ชจ๋ ์์๋ฅผ ๊ฐ์ ธ์ค๋ querySelectorAll() ํจ์
- querySelectorAll() : ์ฌ๋ฌ ๊ฐ์ ์์๋ฅผ ๊ฐ์ ธ์ฌ ๋ ์ฌ์ฉ
document.querySelectorAll(์ ํ์)
// ex) .html ๋ฌธ์ - user ํด๋์ค ์ ํ์๋ฅผ ์ฌ์ฉํ ์์ 3๊ฐ
<p class="user">์ด๋ฆ: ๋๋ ๋ฏธ</P>
<p class="user">์ฃผ์: somewhere</p>
<p class="user">์ฐ๋ฝ์ฒ: 1234-5678</p>
- querySelector() ํจ์์ querySelectorAll() ํจ์๊ฐ ๋์ค๊ธฐ ์ ์๋ getElement๋ก ์์ํ๋ ํจ์๋ฅผ ์ฌ์ฉํจ
โป getElement*๋ฉ์๋์ ์ข ๋ฅ
๋ฉ์๋๋ช | ๊ธฐ๋ฅ |
getElementByld(id ๋ช ) | id ์ ํ์๋ฅผ ๊ธฐ์ค์ผ๋ก ์ ๊ทผ |
getElementsByClassName(class ๋ช ) | class ์ ํ์๋ฅผ ๊ธฐ์ค์ผ๋ก ์ ๊ทผ |
getElementsByTagName(ํ๊ทธ๋ช ) | ํ๊ทธ ์ด๋ฆ์ ๊ธฐ์ค์ผ๋ก ์ ๊ทผ |
์น ์์์ ๋ด์ฉ์ ๊ฐ์ ธ์ค๊ณ ์์ ํ๊ธฐ
- ์น ์์์ ์ ๊ทผํ ํ ๋ด์ฉ์ ๊ฐ์ ธ์ค๊ฑฐ๋ ์์ ํ ์ ์๋๋ฐ, ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด์ innerText ํ๋กํผํฐ, innerHTML ํ๋กํผํฐ, textContent ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํจ
(ํ๋กํผํฐ(property): ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด์์ ์์ฑ์ ๋ํ๋ด๋ ์ฉ์ด)
์น ์์์ ๋ด์ฉ ๊ฐ์ ธ์ค๊ธฐ
// 3๊ฐ์ง ํ๋กํํฐ๋ฅผ ์ฌ์ฉํด์ ์น ์์์ ์ ๊ทผํ์ฌ ๋ด์ฉ์ ๊ฐ์ ธ์ฌ ์ ์์
์น ์์.innerText
์น ์์.innerHTML
์น ์์.textContent
ex) ์น ์์์ ๋ด์ฉ ๊ฐ์ ธ์ค๊ธฐ
// .html
// ์๋ต
<div id="profile">
<img src="images/pf.png" alt="๋๋ ๋ฏธ">
<div id="desc">
<p class="user">์ด๋ฆ : ๋๋ ๋ฏธ</p>
<p class="user" style="display:none">์ฃผ์ : somewhere</p>
<p class="user" style="display:none">์ฐ๋ฝ์ฒ : 1234-5678</p>
</div>
// ์๋ต
- sytle="display:none" : ํ๋ฉด์ ๋ณด์ด์ง ์๊ฒ ๊ฐ์ถค
- innerText ํ๋กํผํฐ: ์น ๋ธ๋ผ์ฐ์ ์ฐฝ์ ๋ณด์ด๋ ๋ด์ฉ๋ง ๊ฐ์ ธ์ด
- innerHTML ํ๋กํผํฐ: #desc ์์ ์์ ์๋ ํ๊ทธ์ ๋ด์ฉ์ ํจ๊ป ๊ฐ์ ธ์์ ๋ณด์ฌ์ค. ์์ค์ ์๋๋๋ก ๊ฐ์ ธ์ด
- textContent ํ๋กํผํฐ: ์์์ ๋ด์ฉ์ ๊ฐ์ ธ์ค๋, ์น ๋ธ์๋ฃจ์ ์ฐฝ์ ๋ณด์ด๋ ๋๋ก๊ฐ ์๋๋ผ ์์ค์ ์๋ ๋๋ก ๊ฐ์ ธ์ด
→ ๊ฐ์ถฐ์ง ์์๋ค๊น์ง ๊ฐ์ ธ์์ ํ๋ก๊ทธ๋๋ฐํ ๊ฒฝ์ฐ ์ ์ฉ
์น ์์์ ๋ด์ฉ ์์ ํ๊ธฐ
- innerText, innerHTML, textContent ํ๋กํผํฐ๋ ์น ์์์ ๋ด์ฉ์ ๋ฐ๊ฟ ๋๋ ์ฌ์ฉํจ
- innerText, textContent ํ๋กํผํฐ: ํ
์คํธ ๋ด์ฉ์ ๋ฐ๊ฟ๋ ์ฌ์ฉ
innerHTML ํ๋กํผํฐ: HTML ํ๊ทธ๊ฐ ํฌํจ๋ ๋ด์ฉ์ ๋ฐ๊ฟ ๋ ์ฌ์ฉ
์น ์์.innerText = ๋ด์ฉ
์น ์์.innerHTMl = ๋ด์ฉ
์น ์์.textContent = ๋ด์ฉ
// ์ด๋ฏธ์ง ์์์ ์ ๊ทผํ src ์์ฑ๊ฐ์ ๋ฐ๊พธ์ด ์ด๋ฏธ์ง ๋ณ๊ฒฝ
์ด๋ฏธ์ง ์์.src = ์ด๋ฏธ์ง ํ์ผ
05-3. ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์คํ์ผ ์์ ํ๊ธฐ
CSS ์์ฑ์ ์ ๊ทผํ๊ณ ์์ ํ๊ธฐ
- CSS ์์ฑ์ ์ ๊ทผํ๋ ค๋ฉด ์์์ ์ ๊ทผํ ํ ์์ฝ์ด .style๊ณผ CSS ์์ฑ์ ์ฌ์ฉํด์ผ ํจ
์์.style.์์ฑ๋ช
- ๊ธ์์ ์ ๊ทผ → style.color
- ๋ฐฐ๊ฒฝ์ ์ ๊ทผ → style.backgroundColor
(background-Color ์์ฑ์ฒ๋ผ ๋ ๋จ์ด ์ด์์ผ๋ก ์ด๋ฃจ์ด์ง ์์ฑ์ ์ ๊ทผํ ๋๋ ์ค๊ฐ์ ๋์(-) ์์ด ์ฐ๊ฒฐํด์ ์ฌ์ฉ → ์ฒซ๊ธ์๋ ์๋ฌธ์, ๋๋ฒ์งธ ๊ธ์๋ ๋๋ฌธ์๋ก ์์)
// ex) ์ ๋ชฉ ๋ถ๋ถ์ ํด๋ฆญํ์ ๋ ๊ธ์์๊ณผ ๊ธ์ ๋ฐฐ๊ฒฝ์ ๋ฐ๊พธ๊ธฐ
const tilte = document.querySelector("#title"); // #title ์์๋ฅผ ๊ฐ์ ธ์ด
title.onclick = () => {
title.style.backgroundColor = "black"; // title ์์์ ๋ฐฐ๊ฒฝ์ ์์
title.style.color = "white"; // title ์์์ ๊ธ์์ ์์
}
classList ํ๋กํผํฐ ์ดํด๋ณด๊ธฐ
- classList ํ๋กํผํฐ: ์์์ ์ ์ฉํ ํด๋์ค ์คํ์ผ์ ๋ชจ๋ ๋ชจ์ ๋์ ํ๋กํผํฐ (DOM์์ ์์ฃผ ์ฌ์ฉํจ)
(์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ฉด ํด๋์ค ์คํ์ผ์ ์ถ๊ฐ ๋๋ ์ญ์ ํ๋ฉฐ ๋ค์ํ ํจ๊ณผ๋ฅผ ๋ง๋ค ์ ์๋๋ฐ classList ํ๋กํผํฐ ๋๋ฌธ)
// .html
// ์๋ต
<div id="desc">
<p class="user clicked">์ด๋ฆ : ๋๋ ๋ฏธ</p>
<p class="user">์ฃผ์ : somewhere</p>
<p class="user">์ฐ๋ฝ์ฒ : 1234-5678</p>
</div>
// ์๋ต
- <div> ํ๊ทธ ์์ 3๊ฐ์ <p> ํ๊ทธ๊ฐ ์๋๋ฐ, ๊ฐ ์์์์ ์ฌ์ฉํ๋ ํด๋์ค ์คํ์ผ์ classList ํ๋กํผํฐ์ ์ ์ฅ๋์ด ์์
- user๋ผ๋ ํด๋์ค ์คํ์ผ๊ณผ clicked ๋ผ๋ ํด๋์ค ์คํ์ผ์ ์ฌ์ฉํ๊ณ ์๋ค๋ ๊ฒ์ ์ ์ ์์
ํด๋์ค ์คํ์ผ ์ถ๊ฐํ๊ณ ์ญ์ ํ๊ธฐ
- ํด๋์ค ์คํ์ผ ์ถ๊ฐ → add() ํจ์ ์ฌ์ฉ
- ํด๋์ค ์คํ์ผ ์ญ์ → remove() ํจ์ ์ฌ์ฉ
์์.classList.add(ํด๋์ค๋ช
)
์์.classList.remove(ํด๋์ค๋ช
)
ํด๋์ค ์คํ์ผ์ ์ถ๊ฐํ๋ add() ํจ์
ex) ์ ๋ชฉ ํ ์คํธ๋ฅผ ํด๋ฆญํ์ ๋ background-color ์์ฑ๊ณผ color ์์ฑ ๋ณ๊ฒฝ
// .css
h1 {
font-size:2rem;
margin-bottom:20px ;
}
.clicked {
background-color:yellow;
color: blue;
}
const title = document.querySelector("#title");
title.onclick = () => {
title.classList.add("clicked");
}
- ์ ๋ชฉ ํ ์คํธ๋ฅผ ํด๋ฆญํ์ ๋ ์ ์ฉํ ์คํ์ผ์ ๋ฏธ๋ฆฌ .clicked ๋ผ๋ ์ด๋ฆ์ผ๋ก ๋ง๋ค์ด ๋
- ์ ๋ชฉ ํ ์คํธ๋ฅผ ํด๋ฆญํ๋ฉด classList์ add() ํจ์๋ฅผ ์ฌ์ฉํด .clicked ์คํ์ผ์ ์ถ๊ฐํจ
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํตํด ๋ณ๊ฒฝ
const tilte = document.querySelector("#title"); // #title ์์๋ฅผ ๊ฐ์ ธ์ด
title.onclick = () => {
title.style.backgroundColor = "black"; // title ์์์ ๋ฐฐ๊ฒฝ์ ์์
title.style.color = "white"; // title ์์์ ๊ธ์์ ์์
}
ํด๋ฆญํ์ ๋์ ํด๋์ค ์คํ์ผ์ ๋ฏธ๋ฆฌ ๋ง๋ค์ด ๋๊ณ ์ ๋ชฉ์ ํด๋ฆญํ๋ฉด ๋ฏธ๋ฆฌ ๋ง๋ค์ด ๋ ํด๋์ค ์คํ์ผ ์ ์ฉ
// .css
h1 {
font-size:2rem;
margin-bottom:20px ;
}
.clicked {
background-color:yellow;
color: blue;
}
// .js
const title = document.querySelector("#title");
title.onclick = () => {
title.classList.add("clicked");
}
ํด๋ฆญ ํ์ ๋ ์คํ์ผ๋ง ๋ฐ๋๋ค๋ฉด ๋ณดํต ํ์์ ๋ฐฉ๋ฒ์ ๋ง์ด ์ฌ์ฉํจ
ํน์ ํด๋์ค ์คํ์ผ์ด ์๋ ์์๋ฅผ ์ฐพ์ ์ฃผ๋ contains() ํจ์
์์.classList.contains(ํด๋์ค๋ช
)
// ex) ์ ๋ชฉ ํด๋ฆญํด ๋ฐฐ๊ฒฝ์๊ณผ ๊ธ์์ ๋ณ๊ฒฝ. ์ดํ ์๋๋๋ก ๋๋๋ฆฌ๊ธฐ
const title = document.querySelector("#title");
title.onclick = () => {
if(!title.classList.contains("clicked")){
title.classList.add("clicked");
} else {
title.classList.remove("clicked");
}
}
ํด๋์ค ์คํ์ผ ํ ๊ธํ๊ธฐ
- ํด๋ฆญํ ๋๋ง๋ค ํน์ ํด๋์ค๋ฅผ ์ถ๊ฐํ๊ฑฐ๋ ์ญ์ ํ๊ธฐ๋ฅผ ๋ฐ๋ณตํ๋ ๊ฒฝ์ฐ, classList์ toggle() ํจ์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ํธ๋ฆฌ
์์.classList.toggle(ํด๋์ค๋ช
)
// ex) ์์์ ํ ์ฝ๋ toggle() ํจ์๋ฅผ ์ด์ฉํ์ฌ ์์
const title = document.querySelector("#title");
title.onclick = () => {
title.classList.toggle("clicked");
}
05-4. DOM์์ ํผ ๋ค๋ฃจ๊ธฐ
ํผ: ์น ๋ฌธ์์์ ์ฌ์ฉ์๊ฐ ์ ๋ณด๋ฅผ ์ ๋ ฅํ ์ ์๊ฒ ๋ง๋ค์ด ๋์ ์น ์์
ํผ ์์์์ ์ ๊ทผํ๊ณ ๊ฐ์ ๊ฐ์ ธ์ค๋ ๋ฐฉ๋ฒ
id๋ class ์์ฑ๊ฐ์ ์ฌ์ฉํด ํผ ์์์ ์ ๊ทผํ๊ธฐ
// .html
// ex) '์ด๋ฆ' ํญ๋ชฉ์ ์ฌ์ฉ๋ id ๊ฐ ํ์ธํ๊ธฐ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ํผ๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ</title>
<link rel="stylesheet" href="css/order.css">
</head>
<body>
<div id="container">
<form name="order">
<fieldset>
<legend>์ํ ์ ๋ณด</legend>
<ul>
<li>
<label class="field" for="product">์ํ : </label>
<input type="text" class="input-box" id="product" name="product">
</li>
<li>
<label class="field" for="prod-num">๊ฐฏ์ : </label>
<input type="number" class="input-box" id="prod-num" name="prod-num" value="1" min="1">
</li>
</ul>
</fieldset>
<fieldset>
<legend>์ฃผ๋ฌธ ์ ๋ณด</legend>
<ul>
<li>
<label class="field" for="order-name">์ด๋ฆ : </label>
<input type="text" class="input-box" id="order-name" name="order-name">
</li>
<li>
<label class="field" for="order-tel">์ฐ๋ฝ์ฒ : </label>
<input type="text" class="input-box" id="order-tel" name="order-tel">
</li>
<li>
<label class="field" for="order-addr">์ฃผ์ : </label>
<input type="text" class="input-box" id="order-addr" name="order-addr">
</li>
</ul>
</fieldset>
<button type="submit" class="order">์ฃผ๋ฌธํ๊ธฐ</button>
</form>
</div>
</body>
</html>
ํ ์คํธ ํ๋์ ์ ๋ ฅํ ๊ฐ ๊ฐ์ ธ์ค๊ธฐ
- value ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ๋ฉด ํผ ์์ ์ค ํ ์คํธ ํ๋๋ ์ด๋ฉ์ผ ํ๋์์ ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ๊ฐ์ ๊ฐ์ ธ์ฌ ์ ์์
์์.value
ex) '์ด๋ฆ' ํ๋์ ์ด๋ฆ์ ์ ๋ ฅํ ํ ๋ด์ฉ ๊ฐ์ ธ์ค๊ธฐ
name ์์ฑ๊ฐ์ ์ฌ์ฉํด ํผ ์์ ์ ๊ทผํ๊ธฐ
- id๋ class ์์ฑ ์์ด name ์์ฑ๋ง ์์ผ๋ฉด name ์๋ณ์๋ฅผ ์ฌ์ฉํด ํผ ์์์ ์ ๊ทผํ ์ ์์
- name ์์ฑ์ ์ฌ์ฉํด ํผ ์์์ ์ ๊ทผํ๋ ค๋ฉด <form> ํ๊ทธ๋ถํฐ ์์ํด์ ์ํ๋ ํผ ์์๊น์ง ๊ณ์ธต์ ๋ฐ๋ผ๊ฐ๋ฉด์ name์ ์ง์ ํด์ผ ํจ
- order: form์ name
- product: input์ name
ํผ ๋ฐฐ์ด์ ์ฌ์ฉํด ํผ ์์์ ์ ๊ทผํ๊ธฐ
- ํผ ์์์ id, class, name ์์ฑ์ด ์๋ ๊ฒฝ์ฐ ํผ ๋ฐฐ์ด์ ์ฌ์ฉ
- document์ ์์ฑ ์ค forms ์์ฑ์ ๋ฌธ์์ ์๋ <form> ํ๊ทธ๋ฅผ ๊ฐ์ ธ์์ ๋ฐฐ์ด๊ณผ ๋น์ทํ ํํ๋ก ์ ์ฅํจ
(๋ฌธ์์ ํผ์ด 2๊ฐ ์ด์ ์์ ์ ์์ผ๋ฏ๋ก ๋ฐฐ์ด์ฒ๋ผ ์ฌ๋ฌ ๊ฐ์ ๊ฐ์ผ๋ก ์ ์ฅํ๋ ๊ฒ์) - <form> ํ๊ทธ ์์ ์๋ ์์์ ์ ๊ทผํ ๋๋ ํด๋น ํผ ์์ ์๋ ๋ชจ๋ ์์๋ฅผ ๊ฐ์ ธ์จ๋ elements ์์ฑ์ ์ฌ์ฉ
document.form // ๋ชจ๋ form์ ๊ฐ์ ธ์ด
document.forms[0].elements // ์ฒซ ๋ฒ์งธ form์ ์๋ ํผ ์์๋ฅผ ๋ชจ๋ ๊ฐ์ ธ์ด
์ ํ ๋ชฉ๋ก๊ณผ ํญ๋ชฉ์ ์ ๊ทผํ๊ธฐ
- <select> ํ๊ทธ๋ฅผ ์ฌ์ฉํ ๋ชฉ๋ก → '์ ํ ๋ชฉ๋ก' (ํ์ ๋ฉ๋ด, select ๋ฉ๋ด, select ๋ชฉ๋ก ์ด๋ผ๊ณ ๋ ํจ)
- ์ ํ ๋ชฉ๋ก์ <option> ํ๊ทธ๋ฅผ ์ฌ์ฉํด์ ์ฌ๋ฌ ๊ฐ์ ํญ๋ชฉ์ ํ๊บผ๋ฒ์ ์ง์ ํ ํ ๋ชฉ๋ก์ ํผ์ณ์ ์ํ๋ ํญ๋ชฉ์ ์ ํํ ์ ์์
์ ํ ๋ชฉ๋ก์ ์ ๊ทผํ๊ธฐ
// .html
// ์ ํ ๋ชฉ๋ก ์์ค
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>์๊ฐ์ ์ฒญํ๊ธฐ</title>
<link rel="stylesheet" href="css/getForm.css">
</head>
<body>
<div id="container">
<h1>์๊ฐ์ ์ฒญ</h1>
<form name="testForm">
<fieldset>
<legend>์ ์ฒญ์ธ</legend>
<ul>
<li>
<label class="reg" for="userName">์ด๋ฆ</label>
<input type="text" id="userName" name="userName" maxlength="50">
</li>
<li>
<label class="reg" for="class">ํ๊ณผ</label>
<select name="major" id="major">
<option>---- ํ๊ณผ ์ ํ ----</option>
<option value="archi">๊ฑด์ถ๊ณตํ๊ณผ</option>
<option value="mechanic">๊ธฐ๊ณ๊ณตํ๊ณผ</option>
<option value="indust">์ฐ์
๊ณตํ๊ณผ</option>
<option value="elec">์ ๊ธฐ์ ์๊ณตํ๊ณผ</option>
<option value="computer">์ปดํจํฐ๊ณตํ๊ณผ</option>
<option value="chemical">ํํ๊ณตํ๊ณผ</option>
</select>
</li>
</ul>
</fieldset>
<fieldset>
<legend>์ ์ฒญ ๊ณผ๋ชฉ</legend>
<p>์ด ๋ฌ์ ์ ์ฒญํ ๊ณผ๋ชฉ์ ์ ํํ์ธ์.</p>
<label><input type="radio" name="subject" value="speaking">ํํ</label>
<label><input type="radio" name="subject" value="grammar">๋ฌธ๋ฒ</label>
<label><input type="radio" name="subject" value="writing">์๋ฌธ</label>
</fieldset>
<fieldset>
<legend>๋ฉ์ผ๋ง</legend>
<p>๋ฉ์ผ๋ก ๋ฐ๊ณ ์ถ์ ๋ด์ค ์ฃผ์ ๋ฅผ ์ ํํด ์ฃผ์ธ์</p>
<label><input type="checkbox" id="new" name="mailing" value="news">ํด์ธ ๋จ์ </label>
<label><input type="checkbox" id="dialog" name="mailing" value="dialog">5๋ถ ํํ</label>
<label><input type="checkbox" id="pops" name="mailing" value="pops">๋ชจ๋ํ์ค</label>
</fieldset>
</form>
<button id="send">์ ์กํ๊ธฐ</button>
</div>
<script src="js/getForm.js"></script>
</body>
</html>
- length ์์ฑ: ์ต์ ํญ๋ชฉ์ ๊ฐ์
- selectedIndex: ์ฌ์ฉ์๊ฐ ์ ํํ ์ต์ ์ ์ธ๋ฑ์ค๊ฐ ์ ์ฅ๋จ(์์ง ์ ํํ ํญ๋ชฉ์ด ์์ผ๋ฏ๋ก ์ฒซ ๋ฒ์งธ ํญ๋ชฉ์ ๊ฐ๋ฆฌํค๋ 0๊ธฐ ๊ธฐ๋ณธ๊ฐ์ผ๋ก ๋ค์ด์๋ ์ํ)
์๋ฆผ ์ฐฝ์ ์ ํํ ํญ๋ชฉ ํ์ํ๊ธฐ
- ์ ํํ ํญ๋ชฉ์ ๋ด์ฉ์ ๊ฐ์ ธ์ฌ ๋๋ innerText ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ๋ฉด ๋จ
- ์ ํ ๋ชฉ๋ก์ ํจ์๋ฅผ ์ฐ๊ฒฐํ ๋๋ onclick์ด ์๋ onchange๋ฅผ ์ฌ์ฉ
const selectMenu = document.querySelector("#major"); // ์ ํ ๋ชฉ๋ก์ ๊ฐ์ ธ์ selectMenu๋ก ์ ์ฅ
function displaySelect() {
let selectedText = selectMenu.options[selectMenu.selectedIndex].innerText;
alert(`[${selectedText}]๋ฅผ ์ ํํ์ต๋๋ค.`);
}
selectMenu.onchange = displaySelect;
๋ผ๋์ค ๋ฒํผ๊ณผ ์ฒดํฌ ๋ฐ์ค์ ์ ๊ทผํ๊ธฐ
- ๋ผ๋์ค ๋ฒํผ: ์ฌ๋ฌ ๊ฐ์ง ํญ๋ชฉ ์ค ํ๋๋ง ์ ํ ๊ฐ๋ฅ
- ์ฒดํฌ ๋ฐ์ค: ์ฌ๋ฌ ๊ฐ ์ ํ ๊ฐ๋ฅ
// ์๋ต
<fieldset>
<legend>์ ์ฒญ ๊ณผ๋ชฉ</legend>
<p>์ด ๋ฌ์ ์ ์ฒญํ ๊ณผ๋ชฉ์ ์ ํํ์ธ์.</p>
<label><input type="radio" name="subject" value="speaking">ํํ</label>
<label><input type="radio" name="subject" value="grammar">๋ฌธ๋ฒ</label>
<label><input type="radio" name="subject" value="writing">์๋ฌธ</label>
</fieldset>
// ์๋ต
- ๋ผ๋์ค ๋ฒํผ์ด๋ ์ฒดํฌ ๋ฐ์ค๋ ๊ฐ ํญ๋ชฉ๋ค์ name ๊ฐ์ด ๋ชจ๋ ๊ฐ์ → ๊ทธ๋ฃน ์์์ ํญ๋ชฉ์ ์ ํํ๋ฏ๋ก ๊ทธ๋ฃน๋ณ๋ก ๊ฐ์ name์ ๋ถ์๊ธฐ ๋๋ฌธ
๋ผ๋์ค ๋ฒํผ์ ์ ๊ทผํ๊ธฐ
- ๋ผ๋์ค ๋ฒํผ์ ์ฌ๋ฌ ๊ฐ์ง ํญ๋ชฉ์ด ์์ด๋ ํ๋์ ๋ฉ์ด๋ฆฌ์ด๋ฏ๋ก name ์์ฑ์ ์ฌ์ฉํด ์ ๊ทผ
- '๋ฌธ๋ฒ' ํญ๋ชฉ์ ์ ํํ์ผ๋ฉด HTML ์์ค์์ ์ง์ ํ value ๊ฐ์ธ grammar๊ฐ ์ ์ฅ๋จ
์ฒดํฌ ๋ฐ์ค์ ์ ๊ทผํ๊ธฐ
- ์ฒดํฌ ๋ฐ์ค๋ ํ๋์ ์ฃผ์ ๋ก ๋ฌถ์ ์ ์์ผ๋ฏ๋ก ๊ฐ ํญ๋ชฉ์ name ๊ฐ์ ๋๊ฐ์ด ๋ง๋ค์ด์ผ ํจ
- ๋ผ๋์ค ๋ฒํผ๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก name ์ฌ์ฉํ์ฌ ์ ๊ทผ
checked ์์ฑ์ ์ฌ์ฉํด ์ ํํ ํญ๋ชฉ์ ์ ๊ทผํ๊ธฐ
- ๋ผ๋์ค ๋ฒํผ์ด๋ ์ฒดํฌ ๋ฐ์ค์๋ checked ์์ฑ์ด ์์
- checked ์์ฑ → ์ ํํ๊ฑฐ๋ ์ ํํ์ง ์๊ฑฐ๋, ๋๊ฐ์ง ๊ฐ๋ง ๊ฐ์ง๋ฏ๋ก ๋ ผ๋ฆฌํ ๊ฐ์ผ๋ก ํํ
- ํน์ ํญ๋ชฉ ์ ํ์ checked ์์ฑ์ true๊ฐ ๋จ (์ ํํ์ง ์์์ ๊ฒฝ์ฐ false)
๊ต์ฌ: Do it! ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ์ ์ ์