๊ฐ๋ฐ์ผ์ง๐_09
๐ก ์ด๋ฒ ์ฃผ์๋
DOM
์ ๋ํด ์์๋ณด์์ผ๋ฉฐ ์ด๋ฒคํธ ํจ์์ ํ์ด๋จธ ํจ์์ ๋ํด์๋ ๋ฐฐ์ ๋ค. ๋ํ ๋ฐฐ์ด ๋ด์ฉ์ ์ ์ฉํ์ฌ Scroll To Top ๋ฒํผ๊ณผ ์ํ ์ฌ๋ผ์ด๋๋ฅผ ๊ตฌํํด๋ณด๋ ์ค์ต์ ํ์๋ค.
์๋ก ๋ฐฐ์ด ๋ด์ฉ๐ผ
โ DOM : HTML ๋ฌธ์์ ๋ํ ์ธํฐํ์ด์ค
โช ์ฒซ์งธ๋ก ๋ทฐ ํฌํธ์ ๋ฌด์์ ๋ ๋๋ง ํ ์ง ๊ฒฐ์ ํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ค.
โช ๋์งธ๋ก๋ ํ์ด์ง์ ์ฝํ
์ธ ๋ฐ ๊ตฌ์กฐ, ๊ทธ๋ฆฌ๊ณ ์คํ์ผ์ด ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋จ์ ์ํด ์์ ๋๊ธฐ ์ํด ์ฌ์ฉ๋๋ค.
โช DOM์ ๋ฌธ์๋ฅผ ๋
ผ๋ฆฌ ํธ๋ฆฌ๋ก ํํํ๋ค. ํธ๋ฆฌ์ ๊ฐ ๋ธ๋์น๋ ๋
ธ๋์์ ๋๋๋ฉฐ, ๊ฐ ๋
ธ๋๋ ๊ฐ์ฒด๋ฅผ ๊ฐ๋๋ค.
-> ๋
ธ๋ : ์ด๋ฒคํธ ์ฒ๋ฆฌ๊ธฐ๋ ํฌํจํ ์ ์๋ค. ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ์๊ฐ, ํด๋น ์ด๋ฒคํธ์ ์ฐ๊ฒฐํ ์ฒ๋ฆฌ๊ธฐ๊ฐ ๋ฐ๋ํ๋ค.
๐DOM์ ์๋ณธ HTML ๋ฌธ์ ํํ์ ๋น์ทํ์ง๋ง ๋ค์๊ณผ ๊ฐ์ ์ฐจ์ด์ ์ด ์๋ค.
1. ํญ์ ์ ํจํ HTML ํ์์ด๋ค.
2. ์๋ฐ์คํฌ๋ฆฝํธ์ ์์ ๋ ์ ์๋ ๋์ ๋ชจ๋ธ์ด์ด์ผ ํ๋ค.
3. ๊ฐ์ ์์๋ฅผ ํฌํจํ์ง ์๋๋ค. (Ex. ::after)
4. ๋ณด์ด์ง ์๋ ์์๋ฅผ ํฌํจํ๋ค. (Ex. display: none)
โ HTML ์์์ ๋
ธ๋ ๊ฐ์ฒด
HTML ์์๋ HTML ๋ฌธ์๋ฅผ ๊ตฌ์ฑํ๋ ๊ฐ๋ณ์ ์ธ ์์๋ฅผ ์๋ฏธํ๋ค.
-> HTML ์์๋ ๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ์์ง์ ์ํด ํ์ฑ๋์ด DOM์ ๊ตฌ์ฑํ๋ ์์ ๋
ธ๋ ๊ฐ์ฒด๋ก ๋ณํ๋๋ค. ์ด๋ HTML ์์์ attribute๋ attribute node๋ก, HTML ์์์ text ์ฝํ
์ธ ๋ text node๋ก ๋ณํ๋๋ค.
โ ์์ ๋
ธ๋ ์ทจ๋
HTML์ ๊ตฌ์กฐ๋ ๋ด์ฉ ๋๋ ์คํ์ผ ๋ฑ์ ๋์ ์ผ๋ก ์กฐ์ํ๋ ค๋ฉด js ํ์ผ์์ ๋จผ์ ์์ ๋
ธ๋๋ฅผ ์ทจ๋ํด์ผ ํ๋ค.
๐DOM์์ ์์ ๋
ธ๋๋ฅผ ์ทจ๋ํ ์ ์๋ ๋ค์ํ ๋ฉ์๋
โช getElementById
: id๋ฅผ ์ด์ฉํ ์์ ๋
ธ๋ ์ทจ๋
// id ์ด๋ฆ์ด slide1์ธ ์์ ๋
ธ๋๋ฅผ ํ์ํ์ฌ ๋ฐํ
const $elem = document.getElementById('slide1')
โช getElementsByTagName
: ํ๊ทธ์ด๋ฆ์ ์ด์ฉํ ์์ ๋
ธ๋ ์ทจ๋
// ํ๊ทธ ์ด๋ฆ์ด li์ธ ์์ ๋
ธ๋๋ฅผ ๋ชจ๋ ํ์ํ์ฌ ๋ฐํ
const $elems = document.getElementsByTagName('li')
โช getElementsByClassName
: class๋ฅผ ์ด์ฉํ ์์ ๋
ธ๋ ์ทจ๋
// class ์ด๋ฆ์ด btn์ธ ๋ชจ๋ ๋
ธ๋๋ฅผ ํ์ํ์ฌ ๊ฐ์ฒด์ ๋ด์ ๋ฐํ
const $elems = document.getElementsByClassName('btn')
โช queryquerySelector
: CSS ์ ํ์๋ฅผ ์ด์ฉํ ์์ ๋
ธ๋ ์ทจ๋
// class ์ด๋ฆ์ด scrollToTop์ธ ์์๋ฅผ ํ์ํ์ฌ ๋ฐํ
const scrollToTopEl = document.querySelector('.scrollToTop')
// id ์ด๋ฆ์ด slide1์ธ ์์๋ฅผ ํ์ํ์ฌ ๋ฐํ
const firstSlide = document.querySelector('#slide1')
โช querySelectorAll
: CSS ์ ํ์๋ฅผ ์ด์ฉํ ๋ชจ๋ ์์ ๋
ธ๋ ์ทจ๋
// ul ์์์ ์์ ์์์ธ li ์์๋ฅผ ๋ชจ๋ ํ์ํ์ฌ ๋ฐํ
const $elems = document.querySelectorAll('ul > li');
โ DOM ์กฐ์
โช innerHTML
ํ๋กํผํฐ : ์์ ๋
ธ๋์ HTML
๋งํฌ์
์ ์ทจ๋ํ๊ฑฐ๋ ๋ณ๊ฒฝํ๋ค.
โช insertAdjacentHTML
๋ฉ์๋ : ๊ธฐ์กด ์์๋ฅผ ์ ๊ฑฐํ์ง ์์ผ๋ฉด์ ์์น๋ฅผ ์ง์ ํด ์๋ก์ด ์์๋ฅผ ์ฝ์
ํ๋ค.
โช createElement
๋ก ์์ ๋
ธ๋๋ฅผ ์์ฑ, createTextNode
๋ก ํ
์คํธ ๋
ธ๋๋ฅผ ์์ฑํ๊ณ appendChild
๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ์์ ๋
ธ๋๋ฅผ DOM
์ ์ถ๊ฐํ๋ค.
โช insertBefore(newNode, childNode)
๋ฉ์๋ : childNode ์์ newNode๋ฅผ ์ฝ์
ํ๋ค.
โช cloneNode([deep: true | false])
๋ฉ์๋ : ๋
ธ๋์ ์ฌ๋ณธ์ ์์ฑํ์ฌ ๋ฐํํ๋ค.
โช replaceChild(newChild, oldChild)
๋ฉ์๋ : oldChild๋ฅผ newChild๋ก ๋์ฒดํ๋ค.
โช removeChild(child)
๋ฉ์๋ : ์ธ์๋ก ์ ๋ฌํ child๋ฅผ ์ญ์ ํ๋ค.
โช style
๋ก ์ธ๋ผ์ธ ์คํ์ผ์ ์กฐ์ํ๋ค.
โช className
ํ๋กํผํฐ : HTML
์์์ class
๊ฐ์ ์ทจ๋ํ๊ฑฐ๋ ๋ณ๊ฒฝํ๋ค.
โช classList
ํ๋กํผํฐ : class
์ ๋ณด๋ฅผ ๋ด์ ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ค.
โ ์ด๋ฒคํธ
๋ธ๋ผ์ฐ์ ๋ ํด๋ฆญ, ํค๋ณด๋ ์
๋ ฅ, ๋ง์ฐ์ค ์ด๋ ๋ฑ๊ณผ ๊ฐ์ ์ฌ๊ฑด์ด ๋ฐ์ํ๋ฉด ์ด๋ฅผ ๊ฐ์งํ์ฌ ์ด๋ฒคํธ๋ฅผ ๋ฐ์์ํจ๋ค.
โช ์ด๋ฒคํธ ํ์
โ ํ์ด๋จธ ํจ์
ํจ์๋ฅผ ์ผ์ ์๊ฐ์ด ์ง๋ ์ดํ์ ํธ์ถํ๊ณ ์ถ์ ๋ ํ์ด๋จธ ํจ์๋ฅผ ์ฌ์ฉํ๋ค.
โช ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ด๋จธ ํจ์์๋ setTimeout
๊ณผ setInterval
(๊ทธ๋ฆฌ๊ณ ์ด ๋์ ์ ๊ฑฐํ ์ ์๋ clearTimeout
๊ณผ clearInterval
)์ด ์๋ค.
๐setTimeout
๊ณผ setInterval
์ ์ฐจ์ด๋ ํจ์ ํธ์ถ์ ๋ฐ๋ณต์ ์๋ค.
setTimeout ํจ์๊ฐ ์์ฑํ ํ์ด๋จธ๋ ๋จ ํ ๋ฒ ๋์, setInterval ํจ์๊ฐ ์์ฑํ ํจ์๋ ๋ฐ๋ณต ๋์ํ๋ค.
โช setTimeout
์์
// ์ฒซ๋ฒ์งธ ํ๋ผ๋ฏธํฐ: ํ์ด๋จธ๊ฐ ๋ง๋ฃ๋ ์ดํ ํธ์ถํ๋ ์ฝ๋ฐฑ ํจ์
// ๋๋ฒ์งธ ํ๋ผ๋ฏธํฐ: ํ์ด๋จธ ๋ง๋ฃ ์๊ฐ
// ์ธ๋ฒ์งธ(์ด์) ํ๋ผ๋ฏธํฐ:
// ํธ์ถ ์ค์ผ์ค๋งํ ์ฝ๋ฐฑ ํจ์์ ์ ๋ฌํด์ผ ํ ์ธ์๊ฐ ์กด์ฌํ๋ค๋ฉด ์ธ๋ฒ์งธ ์ดํ์ ์ธ์๋ก ์ ๋ฌ
setTimeout(() => console.log('1์ด๊ฐ ์ง๋ฌ๋ค'), 1000)
โช setInterval
, clearInterval
์์
let count = 0;
// setInterval ํจ์์ ํ๋ผ๋ฏธํฐ๋ setTimeout๊ณผ ๋์ผ
const countToFive = setInterval(() => {
count++;
// console.log(count);
// count๊ฐ์ด 5๊ฐ ๋๋ฉด ํจ์ ์ค์ผ์ค๋ง์ ์ทจ์
if (count === 5) clearInterval(countToFive);
}, 1000);
๐Scroll To Top
๋ฒํผ ํ๋ก์ ํธ์ ์ ์ฉํด๋ณด๊ธฐ
: ์ด๋ฒ ์ฃผ์ ์ค์ตํด๋ณธ Scroll To Top
๋ฒํผ์ ํ๋ก์ ํธ์ ์ ์ฉํด๋ดค๋ค. css์์๋ ๋ฒํผ์ด ๋ณด์ด์ง ์๋๋ก display: none;
์ ํ์๊ณ ์น ํ์ด์ง์ ํน์ ์์น์์๋ถํฐ๋ ๋ฒํผ์ด ๋ํ๋๋๋ก ํ๊ณ ๋ฒํผ์ ๋๋ ์ ๋ ํ์ด์ง๊ฐ ์๋จ์ผ๋ก ์ด๋ํ๋๋ก ํ๊ธฐ ์ํด js์์ ์ด๋ฒคํธ๋ฅผ ์ถ๊ฐํ์๋ค.
๋๋์
ํ์์ ๋ค์ํ ์น ํ์ด์ง๋ฅผ ์ ์ํ๋ฉด์ ์์ฃผ ์ฌ์ฉํด๋ณด์๋ Scroll To Top
๋ฒํผ์ ๋ด ํด๋ก ์ฝ๋ฉ ์ฌ์ดํธ์ ์ ์ฉํด๋ณผ ์ ์์ด์ ์ข์๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ ๋ํ ๊ฐ๋
์ ์ธ ๋ถ๋ถ์ ์ค๊ฐ๊ณ ์ฌ ์ดํ๋ถํฐ ๊ณ์ ์ ํด์๋๋ฐ ์ด๋ฅผ ์ง์ ํด๋ก ์ฝ๋ฉํ๋๋ฐ ์จ๋ณธ์ ์ด ๋ง์ง ์์์ Scroll To Top
๋ฒํผ์ ๊ตฌํํด๋ด๋๊ฒ ์ฝ์ง ์์๊ณ ์๊ฐ๋ ๊ฝค ๊ฑธ๋ ธ๋ค. ์์ผ๋ก ๋จ์ ์๊ฐ๋์ ํ๋ก์ ํธ๋ฅผ ์ค๋นํ๋ฉด์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ ํ์ฉํ ์ฝ๋๋ฅผ ๊ณ์ ์จ๋ณด๋ฉฐ ๊ฐ๋
๋ ๋ช
ํํ ํ๊ณ ์ต์ํด์ง๋๋ก ๋
ธ๋ ฅํด์ผ๊ฒ ๋ค. ํ์ด๋จธ ํจ์์ ์ํ ์ฌ๋ผ์ด๋ ๋ง๋๋ ์ค์ต๋ ์์
์๊ฐ์ ์ดํด๋ณธ ๋ด์ฉ์ธ๋ฐ ์ด๋ฒ ์ฃผ์๋ ์๊ฐ์ด ๋ถ์กฑํ์ฌ ๋ด ํด๋ก ์ฝ๋ฉ ์ฌ์ดํธ์ ์ง์ ์ ์ฉํด๋ณด์ง ๋ชปํ ์ ์ด ์์ฝ๋ค. ์ด์ ๊ธฐ๋ง๊ณ ์ฌ๊ฐ ์ผ๋ง ๋จ์ง ์์๋๋ฐ ํ๋ก์ ํธ๋ฅผ ์ ์์ฑ์์ผ์ ์ ์ถํ ์ ์์์ง ๊ฑฑ์ ์ด ๋๋ค. ์ํฌ๋ฆฌ ์๊ฐ์ ์ ํ์ฉํด์ผ ๊ฒ ๋ค:-)
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๊ฐ๋ฐ์ผ์ง๐_09), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@jycho98/๊ฐ๋ฐ์ผ์ง09์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค