DOM์ด๋ž€?

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')

๋ฐ”๋กœ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ํ• ๋‹นํ•˜๋ฉด ๋œ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์šฐ๋ฆฌ div element์— ์ด๋ฆ„์„ ์ง€์–ด์„œ ์„ ์–ธํ•˜์ง€๋งŒ, ๋ณ€ํ™”๊ฐ€ ์—†๋‹ค. ์œ„์— ๋ณ€์ˆ˜์ธ tweetDivs๋Š” ๊ณต์ค‘์— ๋– ์žˆ๋Š” ๊ฒƒ๊ณผ ๋‹ค๋ฅผ ๊ฒƒ์ด ์—†๋‹ค. ์ด๋Ÿฌํ•œ ๊ณต์ค‘์— ๋–  ์žˆ๋Š” element์„ append์„ ํ•ด์•ผ๋งŒ ์›น ํŽ˜์ด์ง€ ์ƒ์—๋„ ๋ณด์ด๋Š” ๊ฒƒ์„ ํ™•์ธ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด์ œ append์„ ์•Œ์•„๊ฐ€๋ณด์ž.

append๋ž€?

MDN์—์„œ๋Š” append๋ฅผ "๋ฉ”์„œ๋“œ๋Š” FormData ๊ฐ์ฒด์˜ ๊ธฐ์กด ํ‚ค์— ์ƒˆ ๊ฐ’์„ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜, ํ‚ค๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ ํ‚ค๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค." ์„ค๋ช…์„ ํ•˜๊ณ  ์žˆ๋‹ค. ์กฐ๊ธˆ ์‰ฝ๊ฒŒ ์„ค๋ช…์„ ํ•˜์ž๋ฉด "์„ ํƒํ•œ ์š”์†Œ์˜ ๋‚ด์šฉ์˜ ๋์— content์„ ์ถ”๊ฐ€ํ•œ๋‹ค๊ณ  ์ƒ๊ฐ์„ ํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

const tweetDiv = document.createElement('div')
document.body.append(tweetDiv)

querySelector, querySelectorAll๋ž€?

ํŠน์ • name ์ด๋‚˜ id ๋ฅผ ์ œํ•œํ•˜์ง€์•Š๊ณ  css์„ ํƒ์ž๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์š”์†Œ๋ฅผ ์ฐพ๋Š” ๊ฒƒ์ด๊ณ  querySelectorAll ์€ querySelect ๊ณผ ๋™์ผํ•˜๊ฒŒ ์ž‘๋™ํ•˜๋‚˜ ์ฐจ์ด์ ์€ ํ•ด๋‹น ์„ ํƒ์ž์— ํ•ด๋‹นํ•˜๋Š” ๋ชจ๋“  ์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ด๋‹ค

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

const tweets = document.querySelectorAll('.tweet')

textContent, classList.add๋ž€?

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, removeChild๋ž€?

ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ์–ด๋””์žˆ๋Š”์ง€ ์•Œ๊ณ  ์žˆ๋Š” ๊ฒฝ์šฐ์—, ์–ด๋–ป๊ฒŒ ์‚ญ์ œํ•˜๋Š” ๋ฉ”์†Œ๋“œ๋Š” 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์˜ ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ๋งŽ์ด ํ•„์š”ํ•œ ๊ฒƒ ๊ฐ™๋‹ค. ์˜ค๋Š˜์€ ๋„ˆ๋ฌด ๋Šฆ์–ด์„œ ์ด๋งŒ ์ž๊ณ  ๋‚ด์ผ ์•„์นจ์ผ์ฐ ๋ณต์Šต์„ ํ•ด์•ผ๊ฒ ๋‹คโœ‹

profile
๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ  ์‹ถ์€ ์ƒˆ๋‚ด๊ธฐ

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