๐Ÿ“’TIL) JavaScript Dom

5839 ๋‹จ์–ด TILJavaScriptDOMDOM

DOM ์ด๋ž€?

DOM์ด๋ž€(Document Object Model) ์›นํŽ˜์ด์ง€์˜ HTML์„ ๊ณ„์ธตํ™”์‹œ์ผœ ํŠธ๋ฆฌ๊ตฌ์กฐ๋กœ ๋งŒ๋“  ๊ฐ์ฒด(Object)๋ชจ๋ธ ์ž…๋‹ˆ๋‹ค.
JavaScript๋Š” ์ด ๋ชจ๋ธ๋กœ ์›น ํŽ˜์ด์ง€์— ์ ‘๊ทผํ•˜๊ณ  ํŽ˜์ด์ง€๋ฅผ ์ˆ˜์ • ํ• ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. DOM ์€ HTML๊ณผ Javasript๋ฅผ ์„œ๋กœ ์ž‡๋Š” ์—ญํ™œ์„ ํ•˜๊ณ ์žˆ์Šต๋‹ˆ๋‹ค.

์•„๋ž˜๋Š” DOMD์ด ํŠธ๋ฆฌ๊ตฌ์กฐ๋กœ ๋˜์–ด ์žˆ๊ณ  ์–ด๋–ป๊ฒŒ ์—ฐ๊ฒฐ ๋˜์–ด์žˆ๋Š”์ง€ ์„ค๋ช… ๋˜์–ด ์žˆ๋Š” ์‚ฌ์ง„์ž…๋‹ˆ๋‹ค.

DOM ์œผ๋กœ ๋ฌด์—‡์„ ํ• ์ˆ˜ ์žˆ์„๊นŒ?

JavaScript ๋กœ HTML์— ์ ‘๊ทผ ํ•  ์ˆ˜์žˆ๋‹ค๊ณ  ํ–ˆ์—ˆ๋Š”๋ฐ ์–ด๋–ป๊ฒŒ ์ ‘๊ทผ ํ• ์ˆ˜์žˆ๋‹ค๋Š” ๋ง์ธ์ง€ ์•„์‹œ๋‚˜์š”?
๋ฐ”๋กœ document ์ „์—ญ๊ฐ์ฒด๋ฅผ ํ†ตํ•ด ์ ‘๊ทผํ• ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
JavaScript์˜ document ๊ฐ์ฒด๋Š” DOM ๊ตฌ์กฐ๋ฅผ ์ ‘๊ทผํ•˜๋Š” ๊ด€๋ฌธ์ด๋ฉฐ document ๊ฐ์ฒด๋Š” HTML ๋ฌธ์„œ๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค๊ณ  ๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์™œ HTML์„ ์ ‘๊ทผํ•ด์•ผ ํ• ๊นŒ?

document๊ฐ์ฒด๋Š” DOMํŠธ๋ฆฌ์˜ root node์— ์ ‘๊ทผํ•˜๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค. ๋˜ document๊ฐ์ฒด๋กœ ์š”์†Œ์— ์ ‘๊ทผํ•˜๊ฑฐ๋‚˜ ์š”์†Œ์˜ ์†์„ฑ์—๋„ ์ ‘๊ทผ ํ• ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค ์ฆ‰ class ๋‚˜ id๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ css์— style๋„ ์ˆ˜์ •ํ•˜๊ฑฐ๋‚˜ ์ถ”๊ฐ€๊ฐ€ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
์•„๋ž˜์—์„œ ์ฐจ๊ทผ์ฐจ๊ทผ ์–ด๋–ค ๋ฉ”์„œ๋“œ๊ฐ€ ์žˆ๋Š”์ง€ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

HTML ์š”์†Œ ์ ‘๊ทผํ•˜๊ธฐ

  • document.getElementsByTagName("ํƒœ๊ทธ์ด๋ฆ„")[index๊ฐ’]
  • document.getElementsByClassName("ํด๋ž˜์Šค์ด๋ฆ„")[index๊ฐ’]
  • document.getElementsById("์•„์ด๋”” ์ด๋ฆ„")

3๊ฐ€์ง€ ๋ฉ”์„œ๋“œ ์ „๋ถ€ HTML์š”์†Œ์— ์ ‘๊ทผํ•˜๋Š” ๋ฉ”์„œ๋“œ๋“ค ์ž…๋‹ˆ๋‹ค. ๊ทผ๋ฐ ๋‹ค๋ฅธ์ ๋“ค์ด ๋ˆˆ์— ๋ณด์ž…๋‹ˆ๋‹ค.
getElements ๋ž‘ getElment ๋˜ ๋Œ€๊ด„ํ˜ธ [ ]๊ฐ€ ์žˆ๊ณ  ์—†๊ณ  ์ฐจ์ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
์ฐจ์ด์ ์€ id๋Š” ๊ณ ์œ ๊ฐ’ ์ฆ‰ ๋ณต์ˆ˜ํ˜•์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ํƒœ๊ทธ์ด๋ฆ„๋งŒ ์“ฐ๋ฉด๋˜์ง€๋งŒ ๋ฐ˜๋ฉด ํด๋ž˜์Šค์ด๋ฆ„๊ณผ ํƒœ๊ทธ์ด๋ฆ„์„ ๋ถˆ๋Ÿฌ์˜ค๋Š”๊ฑด ์—ฌ๋Ÿฌ ๋˜‘๊ฐ™์€ ํƒœ๊ทธ๋ช…์ด๋‚˜ ํด๋ž˜์Šค๋ช…์ด ์˜ฌ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋ž˜์„œ ์œ ์‚ฌ๋ฐฐ์—ด๋กœ ๋ถˆ๋Ÿฌ์™€ ๋ช‡๋ฒˆ์งธ ์š”์†Œ์— ์ ‘๊ทผํ• ์ง€ ๋Œ€๊ด„ํ˜ธ์— index๊ฐ’์„ ๋„ฃ์–ด์ค˜์•ผํ•ฉ๋‹ˆ๋‹ค.

  • document.querySelector("")
  • document.querySelectorAll("")

์œ„์— 3๊ฐœ๋ž‘ ๋˜‘๊ฐ™์ด ์š”์†Œ์— ์ ‘๊ทผํ•˜๋Š” ๋ฉ”์„œ๋“œ ์ž…๋‹ˆ๋‹ค๋งŒ ์œ„์— ๋ฉ”์„œ๋“œ ๋“ค์ด๋ž‘์€ ์ฐจ์ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค ์œ„์— ๋ฉ”์„œ๋“œ๋“ค์€ ํƒœ๊ทธ์ด๋ฆ„, ํด๋ž˜์Šค์ด๋ฆ„ ,์•„์ด๋”” ์ด๋ฆ„๋งŒ ์ž…๋ ฅ์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด ์ฟผ๋ฆฌ์…€๋ ‰ํ„ฐ๋Š” ์š”์†Œ์˜ ์ž์‹์š”์†Œ๋ฅผ ๋ถˆ๋Ÿฌ ์˜ฌ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค
์˜ˆ๋ฅผ ๋“ค๊ฒ ์Šต๋‹ˆ๋‹ค

let el = document.querySelector("div.user-panel.main input[name=login]");

์˜ˆ์ œ์˜ ๊ฒฐ๊ณผ๋Š” ํด๋ž˜์Šค๊ฐ€ "user-panel main"์ธ <div>(<div class="user-panel main">)
์•ˆ์˜, ์ด๋ฆ„์ด "login"์ธ <input> ์ค‘ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ์— ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

HTML ์š”์†Œ ์•ˆ์— ๋‚ด์šฉ ์ ‘๊ทผํ•˜๊ธฐ

HTML ์š”์†Œ์— ํ…์ŠคํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฉ”์„œ๋“œ 2๊ฐ€์ง€๋ฅผ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

  • innerText
  • innerHTML

๋‘๊ฐ€์ง€ ์ „๋ถ€ ๋‹จ์ˆœํ•œ ํ…์ŠคํŠธ๋งŒ ๋‹ค๋ฃฐ๊ฒฝ์šฐ์—๋Š” ์ฐจ์ด๊ฐ€ ์ „ํ˜€ ์—†์Šต๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ ์†์„ฑ์„ ๋‹ค๋ฃจ๋Š” ๊ฐ’์ด ์„œ๋กœ ๋‹ค๋ฆ…๋‹ˆ๋‹ค
์˜ˆ์‹œ ์ฝ”๋“œ๋ฅผ ํ•œ๋ฒˆ ๋ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค

element.innerText์— html์„ ํฌํ•จํ•œ ๋ฌธ์ž์—ด์„ ์ž…๋ ฅํ•˜๋ฉด
html์ฝ”๋“œ๊ฐ€ ๋ฌธ์ž์—ด ๊ทธ๋Œ€๋กœ element์•ˆ์— ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

์œ„์™€ ๊ฐ™์ด element.innerHTML ์†์„ฑ์— html์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜๋ฉด,
html element๊ฐ€ element์•ˆ์— ํฌํ•จ๋˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
์œ„ ์˜ˆ์ œ์—์„œ 'innerHTML()'์„ ํด๋ฆญํ•˜๋ฉด,
์ž…๋ ฅ๋œ htmlํƒœ๊ทธ๊ฐ€ ํ•ด์„๋˜์–ด ๋นจ๊ฐ„์ƒ‰A ๊ฐ€ ๋‚˜ํƒ€๋‚˜๋Š” ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

HTML ์š”์†Œ ์ƒ์„ฑํ•˜๊ธฐ

createElement๋ผ๋Š” ๋ฉ”์„œ๋“œ๋กœ ์š”์†Œ๋ฅผ ์ƒ์„ฑ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ๋˜ ์ƒ์„ฑํ•œ ์š”์†Œ๋ฅผ ๋ถ€๋ชจ์š”์†Œ์— ์ž์‹์š”์†Œ๋กœ ๋„ฃ์„์ˆ˜ ์žˆ๋Š” appendChuld ๋ฉ”์„œ๋“œ๋„ ๊ฐ™์ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค

function createTag() {
  // div ํƒœ๊ทธ ๊ฐ€์ ธ์˜ค๊ธฐ
  let div = document.getElementsByTagName('div')[0]
  
  // span ํƒœ๊ทธ ์ƒ์„ฑํ•˜๊ธฐ
  let span = document.createElement('span');
  
  // span ํƒœ๊ทธ์— class ์†์„ฑ ๋ถ€์—ฌํ•˜๊ณ , class ์ด๋ฆ„์„ box๋กœ ํ•˜๊ธฐ
  span.className = 'box';
  
  // spab ํƒœ๊ทธ content์— ์•ˆ๋…•ํ•˜์„ธ์š” ๋ผ๋Š” ํ…์ŠคํŠธ ๋„ฃ๊ธฐ
  span.innerHTML = '์•ˆ๋…•ํ•˜์„ธ์š”';
  
  // div ํƒœ๊ทธ์— ์œ„์— ๋งŒ๋“  span ํƒœ๊ทธ๋ฅผ ๋„ฃ๊ธฐ
  div.appendChild(span);
}

์ฐธ๊ณ 

MDN Web Docs Document

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ