0
๐ .html ํ์ผ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="myNumber">0</div>
<div id="btns">
<div>
<button id="decrease">-</button>
<button id="increase">+</button>
</div>
<div>
<button class="color-btn red" data-color="#FF0000"></button>
<button class="color-btn orange" data-color="#FFA500"></button>
<button class="color-btn yellow" data-color="#FFFF00"></button>
<button class="color-btn green" data-color="#008000"></button>
<button class="color-btn blue" data-color="#0000FF"></button>
<button class="color-btn indigo" data-color="#4B0082"></button>
<button class="color-btn purple" data-color="#800080"></button>
<button class="color-btn black" data-color="#000000"></button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
๐ .js ํ์ผ
// css ์ ํ์๋ก ํ๊ทธ ์ ํํ๊ธฐ
const myTag = document.querySelector('#myNumber');
console.log(myTag);
const myTag2 = document.getElementById('myNumber');
console.log(myTag2);
const myTag3 = document.querySelector('.color-btn');
console.log(myTag3);
const myTags1 = document.querySelectorAll('.color-btn');
console.log(myTags1);
const myTags2 = document.getElementsByClassName('color-btn');
console.log(myTags2);
1. getElement ๋ฐฉ์
- getElementById : ์ ๊ทผํ๊ณ ์ ํ๋ ํ๊ทธ์ id ๊ฐ์ ๋ฌธ์์ด๋ก ์ ๋ฌํด ์ค๋ค.
- ๋ด๋ถ์ ๋ค๋ฅธ ์ฌ๋ฌํ๊ทธ๋ค์ ํฌํจํ๊ณ ์์ผ๋ฉด ํด๋น ํ๊ทธ ๋ด๋ถ์ ์๋ ๋ชจ๋ฑ ๋ด์ฉ๋ค์ด ํ์๋๋ค.
- id๋ ๊ณ ์ ํ ๊ฐ์ด๊ธฐ ๋๋ฌธ์ ํ์ํ ํ๊ทธ๋ฅผ ๋ช ํ๊ฒ ์ ํํ ์ ์๋ค.
- ์กด์ฌํ์ง ์๋ ํ๊ทธ๋ฅผ ์ ํํ๊ฒ ๋๋ฉด null์ด ์ถ๋ ฅ๋๋ค.
- getElementsByClassName
- ํ๊ทธ์ ์ด๋ฆ์ element's'๊ฐ ๋ค์ด๊ฐ๋ ๊ฒ์ ์ฃผ์ํ๋ค.
- HTMLCollection
- ๊ฐ ๊ฐ๋ค๋ง๋ค ์ธ๋ฑ์ค๊ฐ ์์ด์ ์ธ๋ฑ์ค๋ก ์ ๊ทผ์ด ๊ฐ๋ฅํ๋ค.
- length ํ๋กํผํฐ๊ฐ ์์ด์ ๋ง์น ๋ฐฐ์ด ๊ฐ์ ๋ณด์ด์ง๋ง, split์ด๋ push๊ฐ์ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๊ธฐ ์ด๋ ต๊ธฐ ๋๋ฌธ์ ์ ์ฌ ๋ฐฐ์ด์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.
- for..if ๋ฌธ์ ๊ฐ๋ฅํ๋ค.
- ์กด์ฌํ์ง ์๋ ํด๋์ค ๊ฐ์ ์ฐพ๊ฒ ๋๋ฉด null์ด ์๋๋ผ ๋น HTMLCollection[] ์ด ์ถ๋ ฅ๋ฉ๋๋ค.
2. querySelector ๋ฐฉ์
- querySelector : JavaScript์ CSS ์ ํ์๋ฅผ ๊ฐ์ง๊ณ HTML ํ๊ทธ๋ฅผ ์ ์ฐํ๊ฒ ์ ํํ ์ ์๋ค.
- querySelectorAll : ์ฌ๋ฌ ํ๊ทธ ์ ํ ๊ฐ๋ฅ
- ํ๋์ ๋ฉ์๋๋ก ์ ์ฐํ๊ฒ ํ๊ทธ์ ํ ๊ฐ๋ฅํ๊ณ ํ๊ทธ์ ๊ธธ์ด๊ฐ ์งง๋ค. ๋ฐ๋ผ์ ์กฐ๊ธ ๋ ํ์ฉ๋๊ฐ ๋์ querySelector ์ฌ์ฉ์ ์ถ์ฒํ๋ค.
๐จ ์ฃผ์ํด์ผ ํ ์
- ํด๋์ค๋ ํ๊ทธ ์ด๋ฆ์ฒ๋ผ ์ฌ๋ฌ ๊ฐ์ ์์๊ฐ ์กด์ฌํ๋ ์ ํ์๋ฅผ ์ฐ๋๋ผ๋ ๊ทธ ์ค ๊ฐ์ฅ ์ฒซ๋ฒ์งธ ์์ ํ๋๋ง ์ ํํ๋ค๋ ์
'๐ฉ๐ปโ๐ป ํ๋ก๊ทธ๋๋ฐ ์ธ์ด > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [Javascript] - ํจ์ ์ค์ฝํ์ ๋ธ๋ก ์ค์ฝํ์ ์ฐจ์ด์ (0) | 2024.07.19 |
|---|---|
| [Javascript] - ์ฆ์ ์คํ ํจ์๋ ? (0) | 2024.07.19 |
| [Javascript] - ํจ์ ์ ์ธ์๊ณผ ํจ์ ํํ์์ ์ฐจ์ด์ (0) | 2024.07.19 |
| [DOM ์ด๋ฒคํธ ๊ฐ๋ ] - ๋ฒ๋ธ๋ง๊ณผ ์บก์ณ๋ง (0) | 2024.07.17 |
| [Javascript] - ์ ์ฌ ๋ฐฐ์ด์ด๋ ? (0) | 2024.07.16 |
