DOM์ด๋ผ๋ ๊ฒ์ DOM์ Document Object Model์ ์ฝ์๋ก, HTML(Document)์ ์ ๊ทผํ์ฌ Object(JavaScript Object)์ฒ๋ผ HTML์ ์กฐ์(Manipulation)ํ ์ ์๋ Model์ด๋ผ๋ ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์๋ค.
ํ๋ง๋๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉ์ ํ๋ ๋ฐฉ๋ฒ์ ์๊ณ ์๋ค๋ฉด DOM์ ํ์ฉํ์ฌ HTML์ ์กฐ์ํ ์ ์๋ค๋ ๋ป์ด๋ค.
๋๋ ์ค๋ DOM์ ์ฒ์ ์ ํ๋๋ฐ ๋ญ๋ผ ๊ทธ๋ด๊น ๋๊ฒ ์์ํ๊ธฐ๋ ํ๊ณ ์ด์ํ ๋ถ๋ถ์ด ์์ง ์์ ์์๋ค. ๊ทธ๋์ ์์ ์ฌ์ง์ ํ๋ ๊ฐ์ ธ์๋๋ฐ DOM์ ๊ตฌ์กฐ๋ ํ์ฌ ์กฐ์ง๋์ ๊ฐ๋ค. html์ ์๋ ๋ถ๋ชจ-์์ ๊ด๊ณ๋ฅผ ๊ฐ์ง๊ณ ์๋ ๊ฒ์ ๊ทธ๋ ค๋ณด๋ฉด ๋น์ทํ ๊ตฌ์กฐ๊ฐ ์์ ์ฌ์ง๊ณผ ๊ฐ์ด ๋ง๋ค์ด ์ง๋ค.
๋จผ์ ์ค๋ urclass์์ ๋ฐฐ์ด ๋ด์ฉ์์ creat,append,appendChild,querySelector,querySelectorAll, textContent,remove,removeChild ๋ฑ์ ๋ฐฐ์ ๋๋ฐ ํ๋ํ๋ ๋ป๊ณผ ๋ด์ฉ์ ๋ณด๋ฉด์ ์ค๋ช ์ ํด๋ด์ผ๊ฒ ๋ค.
๐ CRUD๋?
Document ๊ฐ์ฒด๋ฅผ ํตํด์ HTML ์๋ฆฌ๋จผํธ๋ฅผ
C : Create ๋ง๋ค๊ณ
R : read ์กฐํํ๊ณ
U : Update ๊ฐฑ์ ํ๊ณ
D : Delete ์ญ์ ํ๊ณ
createElement๋?
const tweetDiv = document.createElement('div')
MDN์์๋ append๋ฅผ "๋ฉ์๋๋ FormData ๊ฐ์ฒด์ ๊ธฐ์กด ํค์ ์ ๊ฐ์ ์ถ๊ฐํ๊ฑฐ๋, ํค๊ฐ ์๋ ๊ฒฝ์ฐ ํค๋ฅผ ์ถ๊ฐํฉ๋๋ค." ์ค๋ช ์ ํ๊ณ ์๋ค. ์กฐ๊ธ ์ฝ๊ฒ ์ค๋ช ์ ํ์๋ฉด "์ ํํ ์์์ ๋ด์ฉ์ ๋์ content์ ์ถ๊ฐํ๋ค๊ณ ์๊ฐ์ ํ๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค.
const tweetDiv = document.createElement('div')
document.body.append(tweetDiv)
ํน์ name ์ด๋ id ๋ฅผ ์ ํํ์ง์๊ณ css์ ํ์๋ฅผ ์ฌ์ฉํ์ฌ ์์๋ฅผ ์ฐพ๋ ๊ฒ์ด๊ณ querySelectorAll ์ querySelect ๊ณผ ๋์ผํ๊ฒ ์๋ํ๋ ์ฐจ์ด์ ์ ํด๋น ์ ํ์์ ํด๋นํ๋ ๋ชจ๋ ์์๋ฅผ ๊ฐ์ ธ์ค๋ ๊ฒ์ด๋ค
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
const tweets = document.querySelectorAll('.tweet')
HTML์ ์๋ฆฌ๋จผํธ์ ๊ธ์๋ฅผ ๋ฃ์ด์ฃผ๋ ๋ฉ์๋๊ฐ textContent
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
HTML์ ์คํ์ผ์ด ์ ์ฉ๋ ์ ์๋๋ก class๋ฅผ ์ง์ ํด์ฃผ๋ ๋ฉ์๋๊ฐ
classList
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
ํด๋น ์๋ฆฌ๋จผํธ๊ฐ ์ด๋์๋์ง ์๊ณ ์๋ ๊ฒฝ์ฐ์, ์ด๋ป๊ฒ ์ญ์ ํ๋ ๋ฉ์๋๋ remove์ ํ์ฉํ ์ ์๋ค.
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // ์ด๋ ๊ฒ append ํ๋ ์๋ฆฌ๋จผํธ๋ฅผ ์ญ์ ํ ์ ์๋ค.
๋ํ ์์ ์๋ฆฌ๋จผํธ๋ฅผ ์ง์ฐ๋ ๋ฐฉ๋ฒ์์ ๊ฐ์ฅ ๊ฐ๋จํ ๋ฐฉ๋ฒ์ innerHTML ์ ํ์ฉํ๋ฉด ๋๋ค. ํ์ง๋ง ๋ฐ์์ ๊ฐ์ ๋ฐฉ๋ฒ์ ์ฌ๋ฌ ๋ณด์์์ ๋ฌธ์ ๋ฅผ ๊ฐ์ง๊ณ ์์ผ๋ฏ๋ก
document.querySelector('#container').innerHTML =
removeChild ๋ ์์ ์๋ฆฌ๋จผํธ๋ฅผ ์ง์ ํด์ ์ญ์ ํ๋ ๋ฉ์๋์ ํ์ฉํ๋ค. ๋ชจ๋ ์ญ์ ํ๊ธฐ ์ํด์, while๋ฌธ์ ํ์ฉํ ์ ์์ผ๋ฉฐ, ์์ ์๋ฆฌ๋จผํธ๊ฐ ํ๋๋ ์์ ๋ ๊น์ง ์ญ์ ํ๋ค๋ ์๋ฏธ์ ์ฝ๋์ด๋ค.
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
์์ ๊ฐ์ ์ค๋ช ์ผ๋ก๋ ๋ง์ด ๋ถ์กฑํ๊ธฐ ๋๋ฌธ์ mdn์ด๋ javascript๋ฐฑ๊ณผ์ฌ์ ๊ณผ ๊ตฌ๊ธ๋ง์ ์ฌ์ฉํด์ DOM์ ๋ํ ์ดํด๊ฐ ๋ง์ด ํ์ํ ๊ฒ ๊ฐ๋ค. ์ค๋์ ๋๋ฌด ๋ฆ์ด์ ์ด๋ง ์๊ณ ๋ด์ผ ์์นจ์ผ์ฐ ๋ณต์ต์ ํด์ผ๊ฒ ๋คโ