JavaScript DOM

DOM

: Client side JavaScript์˜ ํ•ต์‹ฌ

  • web browser์™€ web ๋ฌธ์„œ์˜ ๋‚ด์šฉ ๊ฐ์ฒดํ™”

    • ๊ฐ๊ฐ€์˜ ๊ฐ์ฒด๋Š” property๋กœ ์ •๋ณด๋ฅผ ์ฝ๊ฑฐ๋‚˜ ์„ค์ • ๊ฐ€๋Šฅ

  • web browser์ฐฝ์˜ ์œ„์น˜๋ฅผ ์•๊ณ  ์‹ถ๋‹ค๋ฉด?

    • window ๊ฐ์ฒด์˜ ์ฐฝ์˜ ์œ„์น˜๋ฅผ ์•Œ๋ ค์ฃผ๋Š” property๋ฅผ ์ฝ์–ด์˜ค๋ฉด ๋จ

DOM ๋ ˆ๋ฒจ๊ณผ ํ˜ผ๋ž€

  • ์ตœ๊ทผ DOM์€ ์ •๋ฆฌ๋˜๊ณ , ํ‘œ์ค€ํ™”๋จ

    • ๋ ˆ๋ฒจ 0๋ถ€ํ„ฐ ์ตœ์‹  ๋ ˆ๋ฒจ๊นŒ์ง€ ์žˆ์Œ

DOM ์˜ ๊ตฌ์„ฑ

: ๊ฐ์ฒดํ™” -> ๊ตฌ์กฐํ™” -> ๊ณ„์ธต์œผ๋กœ ๊ตฌ์„ฑ๋จ

  • ํ˜„์žฌ web browser window

    • Window ๊ฐ์ฒด

      • DOM ๋ฌธ์„œ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ์ฐฝ

      • ๊ฐ€์ƒ ์ตœ์ƒ์œ„ ๊ฐ์ฒด

      • window ๊ฐ์ฒด๋Š” ์ „์—ญ ๊ฐ์ฒด

      • ๋‹ค์–‘ํ•œ ํ•จ์ˆ˜, ์ด๋ฆ„๊ณต๊ฐ„, ๊ฐ์ฒด ๋“ฑ์ด ํฌํ•จ

    • Document ๊ฐ์ฒด

      • ํŽ˜์ด์ง€ ์ฝ˜ํ…์ธ ์˜ ์ง„์ž…์  ์—ญํ• 

      • <body> ๋“ฑ ๋‹ค๋ฅธ ์š”์†Œ๋“ค์„ ํฌํ•จ

  • Web browser๋Š” web ๋ฌธ์„œ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ์ฐฝ์ด DOM์˜ ๊ธฐ์ค€

    • Window ๊ฐ์ฒด ์ด์™ธ์˜ ๊ฐ์ฒด๋Š” Window ๊ฐ์ฒด์˜ property๋กœ ์ ‘๊ทผํ•œ๋‹ค!

  • Document ๊ฐ์ฒด์— ์ ‘๊ทผํ•˜๊ณ ์ž ํ•œ๋‹ค๋ฉด

    • window ๊ฐ์ฑ„์˜ document property ์ด์šฉ

    • window ๊ฐ์ฒด์˜ document property๋Š” Document ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ด

      • Document ๊ฐ์ฒด๋Š” web ๋ฌธ์„œ, web ๋ฌธ์„œ์ƒ์˜ HTML ์š”์†Œ ์ผ๋ถ€์— ์ ‘๊ทผ ๊ฐ€๋Šฅํ•จ!

Window์˜ ์ƒ์„ฑ

  • ์ƒ์„ฑ

    • window ๊ฐ์ฒด์˜ open method ์‚ฌ์šฉ

  • ์ฐฝ ๋‹ซ๊ธฐ

    • window ๊ฐ์ฒด์˜ close method ์‚ฌ์šฉ

alert

  • ๊ฒฝ๊ณ  ์ƒ์ž ์ƒ์„ฑ

  • debugging์šฉ์œผ๋กœ ์ฃผ๋กœ ์‚ฌ์šฉ

Web ๋ฌธ์„œ ์ ‘๊ทผ

getElementByID(id)

  • ํ•˜๋‚˜์˜ node๋กœ return

  • ์ด๊ฒƒ ์™ธ์—๋Š” ๋‹ค ์œ ์‚ฌ ๋ฐฐ์—ด ํ˜•ํƒœ๋กœ return

querySelector()

  • CSS Selector๋ฅผ ์ด์šฉํ•˜์—ฌ node๋ฅผ ์„ ํƒํ•˜์ง€๋งŒ, ์ผ์น˜๋˜๋Š” ์ฒซ ๋ฒˆ์งธ node ๋งŒ์„ return ํ•จ

querySelectorAll()

  • CSS Selector๋ฅผ ์ด์šฉํ•˜์—ฌ node๋ฅผ ์„ ํƒํ•จ

  • ์ผ์น˜ํ•˜๋Š” ๋ชจ๋“  node๋ฅผ array๋กœ return

DOM ์กฐ์ž‘

Node์˜ ์ข…๋ฅ˜์— ๋”ฐ๋ผ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ๋“ค

  • ์š”์†Œ ์†์„ฑ์ด๋‚˜ CSS ์†์„ฑ ๋ณ€๊ฒฝ

  • ์ž…๋ ฅ ํผ์˜ ๊ฐ’์„ ์ฝ๊ฑฐ๋‚˜ ๋ณ€๊ฒฝ

  • ๋ฌธ์„œ ๋‚ด์— ์ƒˆ๋กœ์šด HTML ์š”์†Œ์™€ content ์‚ฝ์ž…

document.write()

  • ํ•จ์ˆ˜ ๋‚ด๋ถ€์— ์‚ฌ์šฉํ•˜์—ฌ ์ด๋ฒคํŠธ๋กœ ํ˜ธ์ถœ ํ–ˆ์„ ๋•Œ

    • ๊ธฐ์กด ๋ฌธ์„œ ์ „์ฒด๋ฅผ ์ง€์›Œ๋ฒ„๋ฆฌ๊ณ , content๋ฅผ ์ถœ๋ ฅํ•จ

appendChild()

: ํŠน์ • node์˜ ์ž์‹์œผ๋กœ node๋ฅผ ์‚ฝ์ž…ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ

  • ์ž์‹ ์š”์†Œ๋“ค ์ค‘ ๊ธฐ์กด ์š”์†Œ๋“ค ๋์— ์‚ฝ์ž…๋จ

insertBefore()

: ํŠน์ • ์š”์†Œ ์•ž์— ์‚ฝ์ž…ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ

  • ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

    • ๋ถ€๋ชจ node.insertBefore(์‚ฝ์ž…ํ•  node, reference node)

replaceChild()

: ์ž์‹ node ์ค‘ ํŠน์ • node๋ฅผ ์ƒˆ๋กœ์šด node๋กœ ์น˜ํ™˜ํ•˜๋Š” ์—ญํ• 

  • ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

    • ๋ถ€๋ชจ node.replaceChild(์ƒˆ๋กœ์šด node, ๋ฐ”๋€” node)

getAttribute(), setAttribute()

: node์˜ ์†์„ฑ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๊ณ , node์˜ ์†์„ฑ์„ ์†์„ฑ ๊ฐ’์œผ๋กœ ์„ค์ •

  • ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

    • node.getAttribute("์†์„ฑ๋ช…")

    • node.setAttribute("์†์„ฑ๋ช…", "์†์„ฑ๊ฐ’")

innerHTML, insertAdjacentHTML

  • DOM ์กฐ์ž‘ ์‹œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ method๋“ค

  • createElement(), createTextNode(), appendChild()๋ฅผ ํ•œ๊บผ๋ฒˆ์— ์ฒ˜๋ฆฌํ•˜๋Š” ํšจ๊ณผ

  • ์‚ฌ์šฉ๋ฐฉ๋ฒ•

    • element.innerHTML(text)

    • element.insertAdjacentHTML(positon, text)

      • position์œผ๋กœ ์‚ฝ์ž… ์œ„์น˜ ์ง€์ •๋„ ๊ฐ€๋Šฅํ•จ

Last updated

Was this helpful?