[JavaScript] className๊ณผ classList

ํ˜œ๋ฆฐยท2022๋…„ 8์›” 19์ผ
3

JavaScript

๋ชฉ๋ก ๋ณด๊ธฐ
17/21
post-thumbnail

๐Ÿพ ๋“ค์–ด๊ฐ€๋ฉฐ


์•„๋ž˜์˜ ์˜ˆ์ œ๋Š” HTMLํŒŒ์ผ์— ์กด์žฌํ•˜๋Š” <span>ํƒœ๊ทธ ์•ˆ์— JavaScript๋กœ <p>ํƒœ๊ทธ๋ฅผ ๋งŒ๋“ค์–ด ๋„ฃ์–ด์ฃผ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ, <p>ํƒœ๊ทธ์˜ ์Šคํƒ€์ผ์„ ์กฐ์ •ํ•ด์ฃผ๊ธฐ ์œ„ํ•ด JavaScript๋กœ class๋ฅผ ๋„ฃ์–ด ์Šคํƒ€์ผ์„ ์ง€์ •ํ•ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

์ด ๋•Œ, class๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ๋Š” ๋ฐฉ์‹์œผ๋กœ className๊ณผ classList๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์˜ค๋Š˜์€ className๊ณผ classList์— ๋Œ€ํ•œ ํฌ์ŠคํŒ…์„ ํ•˜๋ฉฐ ์ด ๋‘˜์˜ ์ฐจ์ด์ ์„ ์ •๋ฆฌํ•ด๋‘๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค๐Ÿ˜Š



๐Ÿ“’ className๊ณผ classList


className๊ณผ classList๋Š” class๋ฅผ ๊ด€๋ฆฌํ•ด์ฃผ๋Š” DOM ํ”„๋กœํผํ‹ฐ์ž…๋‹ˆ๋‹ค. className์€ class ์ „์ฒด๋ฅผ ๊ด€๋ฆฌํ•  ๋•Œ, classList๋Š” ๊ฐœ๋ณ„ class๋ฅผ ๊ด€๋ฆฌํ•  ๋•Œ ํŽธ๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ’๐Ÿปโ€โ™€๏ธ className์€ ํ•ด๋‹น ์š”์†Œ์— ์ง€์ •๋œ class๊ฐ’์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒclassName๋Š” ๋ฌด์–ธ๊ฐ€๋ฅผ ๋Œ€์ž…ํ•˜๋ฉด class ์ „์ฒด๊ฐ€ ๋ฐ”๋€Œ์–ด๋ฒ„๋ฆฌ์ฃ . ํด๋ž˜์Šค ํ•˜๋‚˜๋งŒ ์กฐ์ž‘ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

๐Ÿ’๐Ÿปโ€โ™€๏ธ ๋ฐ˜๋ฉด์— classList๋Š” JavaScript์—์„œ ๋…ธ๋“œ์˜ ํด๋ž˜์Šค๋ฅผ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋„๋ก ์ œ๊ณต๋˜๋Š” ๊ธฐ๋Šฅ์ด์—์š”. ํด๋ž˜์Šค๋ฅผ ํ•˜๋‚˜๋งŒ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ add, remove, contains, toggle๋“ฑ์˜ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์ฃ !


1. className

className์€ ํŠน์ • ์š”์†Œ์˜ class ์ด๋ฆ„์„ ๋ฌธ์ž์—ด๋กœ returnํ•ฉ๋‹ˆ๋‹ค.

(1) class ์ด๋ฆ„ ์ฝ๊ธฐ

element.className;

(2) class ์ถ”๊ฐ€

element.className = '์ด๋ฆ„';



2. classList

classList๋Š” ์ฝ๊ธฐ ์ „์šฉ ํ”„๋กœํผํ‹ฐ์ด๋ฉฐ, className์„ ํ†ตํ•ด class์— ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ์‹์„ ๋Œ€์ฒดํ•˜๋Š” ๊ฐ„ํŽธํ•œ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

(1) class ์ด๋ฆ„ ์ฝ๊ธฐ

// class ์ด๋ฆ„ ์ฝ๊ธฐ
element.classList;

// class item ํ•˜๋‹ˆ์‹น ์ฝ๊ธฐ
element.classList.item(index);

(2) class ์ถ”๊ฐ€

element.classList.add('์ด๋ฆ„');

๐Ÿ–๐Ÿป ์—ฌ๊ธฐ์„œ ์ž ๊น! className๊ณผ ๋‹ค๋ฅธ์ 

  • className์€ ์ถ”๊ฐ€ํ•˜๋ ค๋Š” ํด๋ž˜์Šค๊ฐ€ ์ด๋ฏธ ์žˆ์–ด๋„ ์ค‘๋ณตํ•˜์—ฌ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ฐ˜๋ฉด์— ์œ„์™€ ๊ฐ™์ด classList.add๋กœ ์ถ”๊ฐ€ํ•  ๊ฒฝ์šฐ์—” ๋‹ฌ๋ผ์š”. ์ถ”๊ฐ€ํ•˜๋ ค๋Š” ํด๋ž˜์Šค๊ฐ€ ์ด๋ฏธ class ์†์„ฑ์— ํฌํ•จ๋˜์–ด ์žˆ๋‹ค๋ฉด ํ•ด๋‹น ํด๋ž˜์Šค๋ฅผ ์ค‘๋ณตํ•˜์—ฌ ์ถ”๊ฐ€ํ•˜์ง€ ์•Š์•„์š”!

(3) class ์ œ๊ฑฐ

element.classList.remove('์ด๋ฆ„');

(4) class ์กด์žฌ ํ™•์ธ

// ์กด์žฌํ•˜๋ฉด true, ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฉด false ๋ฐ˜ํ™˜
element.classList.contains('์ด๋ฆ„');

// ์กด์žฌํ•˜๋ฉด class ์ œ๊ฑฐ, ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฉด class ์ถ”๊ฐ€
element.classList.toggle('์ด๋ฆ„');

(5) class ๊ต์ฒด

element.classList.replace('์ด๋ฆ„');



๐Ÿป ๋งˆ๋ฌด๋ฆฌํ•˜๋ฉฐ


์ฒ˜์Œ์— ์•„๋ž˜์˜ ์˜ˆ์ œ๋กœ ์ธํ•ด className๊ณผ classList์— ๋Œ€ํ•œ ๊ถ๊ธˆ์ฆ์ด ์ƒ๊ฒผ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•˜๊ณ  ๋‹ค์‹œ๋ณด๋‹ˆ, ์•„๋ž˜๋Š” ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ๋ผ์„œ ๊ฐœ๋ณ„ ํด๋ž˜์Šค๋งŒ์„ ์กฐ์ž‘ํ•ด์ฃผ๊ณ  ์žˆ์–ด์š”. ๋”ฐ๋ผ์„œ, classList๊ฐ€ ์•„๋‹Œ className์„ ์‚ฌ์šฉํ•ด๋„ ๋ฌธ์ œ๋˜์ง€ ์•Š์„ ๊ฒƒ ๊ฐ™๋„ค์š”! ๋งŒ์•ฝ ๋” ๋‹ค์–‘ํ•œ ํด๋ž˜์Šค๋ฅผ ์กฐ์ž‘ํ•ด์ฃผ๋Š” ์ƒํ™ฉ์ด ์ƒ๊ธด๋‹ค๋ฉด classList๋ฅผ ์“ฐ๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.



๐Ÿ“œ ์ฐธ๊ณ 


๋ชจ๋˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŠœํ† ๋ฆฌ์–ผ, ์Šคํƒ€์ผ๊ณผ ํด๋ž˜์Šค
MDN, className
MDN, classList

profile
FE Developer

2๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2023๋…„ 5์›” 26์ผ

๊ธ€ ์ž˜๋ณด๊ณ  ๊ฐ‘๋‹ˆ๋‹ค!

1๊ฐœ์˜ ๋‹ต๊ธ€