Skip to content

Latest commit

ย 

History

History
188 lines (125 loc) ยท 8.39 KB

dom-tree.md

File metadata and controls

188 lines (125 loc) ยท 8.39 KB

๐Ÿ’ป DOM(Document Object Model)

๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป ๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ(Document Object Model: DOM)

  • DOM์€ XML์ด๋‚˜ HTML ๋ฌธ์„œ์— ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•œ ์ผ์ข…์˜ ์ธํ„ฐํŽ˜์ด์Šค์ด๋‹ค. DOM์€ ์›นํŽ˜์ด์ง€ ๋‚ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์ •์˜ํ•˜๊ณ  ๊ฐ์ฒด๋กœ ๋‚˜ํƒ€๋‚ด์ค€๋‹ค. ๋˜ํ•œ, ๊ฐ๊ฐ์˜ ์š”์†Œ์— ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•œ๋‹ค.
  • HTML ์„ ์ง€ํƒฑํ•˜๋Š” ๊ฒƒ์€ ํƒœ๊ทธ(tag)์ด๋‹ค.
  • DOM์— ๋”ฐ๋ฅด๋ฉด, ๋ชจ๋“  HTML ํƒœ๊ทธ๋Š” ๊ฐ์ฒด์ด๋‹ค. ํƒœ๊ทธ ํ•˜๋‚˜๊ฐ€ ๊ฐ์‹ธ๊ณ  ์žˆ๋Š” ์ž์‹ ํƒœ๊ทธ๋Š” ์ค‘์ฒฉ ํƒœ๊ทธ(nested tag)๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค. ํƒœ๊ทธ ๋‚ด์˜ ๋ฌธ์ž(text)์—ญ์‹œ ๊ฐ์ฒด์ด๋‹ค.
  • ์œ„์— ์–ธ๊ธ‰๋œ ๋ชจ๋“  ๊ฐ์ฒด๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ณ , ํŽ˜์ด์ง€๋ฅผ ์กฐ์ž‘ํ•  ๋•Œ ์ด ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ์˜ˆ๋กœ, document.body๋Š” <body>ํƒœ๊ทธ๋ฅผ ๊ฐ์ฒด๋กœ ๋‚˜ํƒ€๋‚ธ ๊ฒƒ์ด๋‹ค.
  • document ๊ฐ์ฒด๋Š” ํŽ˜์ด์ง€์˜ ๊ธฐ๋ณธ ์ง„์ž…์  ์—ญํ• ์„ ํ•œ๋‹ค.

document.body.style.background = "red";
setTimeout(() => {
  document.body.style.background = "";
}, 3000);

  • ์œ„ ์˜ˆ์ œ๋Š” document.body์˜ ๋ฐฐ๊ฒฝ์ƒ‰์„ ๋ฐ”๊พธ๊ธฐ ์œ„ํ•ด style.background๋ฅผ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ, ์ด์™ธ์—๋„ ๋‹ค์–‘ํ•œ ํ”„๋กœํผํ‹ฐ๊ฐ€ ์กด์žฌํ•œ๋‹ค. ์˜ˆ๋กœ ๋“ค์–ด, innerHTML(ํ•ด๋‹น ๋…ธ๋“œ์˜ HTML ์ฝ˜ํ…์ธ ), offsetWidth(ํ•ด๋‹น ๋…ธ๋“œ์˜ ๋„ˆ๋น„[ํ”ฝ์…€]) ๋“ฑ์ด ์žˆ๋‹ค.

DOM ์˜ˆ์ œ

<!DOCTYPE html>
<html>
  <head>
    <title>์‚ฌ์Šด์— ๊ด€ํ•˜์—ฌ</title>
  </head>
  <body>
    ์‚ฌ์Šด์— ๊ด€ํ•œ ์ง„์‹ค.
  </body>
</html>
  • ์œ„์™€ ๊ฐ™์€ html ๋ฌธ์„œ๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๋ฉด DOM ๊ตฌ์กฐ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-07-16 แ„‹แ…ฉแ„’แ…ฎ 11 14 43


  • DOM์€ HTML์„ ์œ„์™€ ๊ฐ™์ด ํƒœ๊ทธ ํŠธ๋ฆฌ ๊ตฌ์กฐ๋กœ ํ‘œํ˜„ํ•œ๋‹ค. ์œ„์—์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด ํŠธ๋ฆฌ์— ์žˆ๋Š” ๋…ธ๋“œ๋Š” ๋ชจ๋‘ ๊ฐ์ฒด์ด๋‹ค.
  • ํƒœ๊ทธ๋Š” ์š”์†Œ ๋…ธ๋“œ (element node)์ด๊ณ , ํŠธ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ๊ตฌ์„ฑํ•œ๋‹ค. <html>์€ ๋ฃจํŠธ ๋…ธ๋“œ๊ฐ€ ๋˜๊ณ , <head>์™€ <body>๋Š” ๋ฃจํŠธ ๋…ธ๋“œ์˜ ์ž์‹ ๋…ธ๋“œ๊ฐ€ ๋œ๋‹ค.
  • ์š”์†Œ ๋‚ด์˜ ๋ฌธ์ž๋Š” ํ…์ŠคํŠธ(text)๋…ธ๋“œ๊ฐ€ ๋œ๋‹ค. ์œ„ ๊ทธ๋ฆผ์—์„œ #text๋กœ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋“ฏ์ด, ํ…์ŠคํŠธ ๋…ธ๋“œ๋Š” ๋ฌธ์ž์—ด๋งŒ ๋‹ด๋Š”๋‹ค. ๋˜ํ•œ, ์ž์‹ ๋…ธ๋“œ๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์—†๊ณ , ํŠธ๋ฆฌ์˜ ๋์—์„œ ์žŽ ๋…ธ๋“œ(leaf node)๊ฐ€ ๋œ๋‹ค.

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-07-16 แ„‹แ…ฉแ„’แ…ฎ 11 16 41

  • ํ…์ŠคํŠธ ๋…ธ๋“œ์— ์žˆ๋Š” ํŠน์ˆ˜ ๋ฌธ์ž๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง„๋‹ค.
    • ์ƒˆ ์ค„(newline) : โ†ต (์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„  \n๋กœ ํ‘œ์‹œ)
    • ๊ณต๋ฐฑ(space) : โฃ
  • ์ƒˆ ์ค„๊ณผ ๊ณต๋ฐฑ์€ ๊ธ€์ž๋‚˜ ์ˆซ์ž์ฒ˜๋Ÿผ ์œ ํšจํ•œ ๋ฌธ์ž๋กœ ์ทจ๊ธ‰๋œ๋‹ค. ๋”ฐ๋ผ์„œ ์ด ๋‘ ํŠน์ˆ˜๋ฌธ์ž๋Š” ํ…์ŠคํŠธ ๋…ธ๋“œ๊ฐ€ ๋˜๊ณ , DOM์˜ ์ผ๋ถ€๊ฐ€ ๋œ๋‹ค.

<head>
  <title>์‚ฌ์Šด์— ๊ด€ํ•˜์—ฌ</title>
</head>

  • ์œ„ HTML ๋ฌธ์„œ์—์„œ <head>์™€ <title> ์‚ฌ์ด์— ์ƒˆ ์ค„๊ณผ ์•ฝ๊ฐ„์˜ ๊ณต๋ฐฑ์ด ์žˆ๋Š” ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ๋Š”๋ฐ, ์ด๋Ÿฐ ํŠน์ˆ˜๋ฌธ์ž ์—ญ์‹œ #text ๋…ธ๋“œ๊ฐ€ ๋œ๋‹ค.

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-07-16 แ„‹แ…ฉแ„’แ…ฎ 11 19 45


ํ…์ŠคํŠธ ์˜ˆ์™ธ 2๊ฐ€์ง€

  • ์—ญ์‚ฌ์œผ๋กœ, <head> ํƒœ๊ทธ ์ด์ „์˜ ๊ณต๋ฐฑ๊ณผ ์ƒˆ ์ค„์€ ๋ฌด์‹œ๋œ๋‹ค.
  • HTML ๋ช…์„ธ์„œ์—์„œ ๋ชจ๋“  ์ฝ˜ํ…์ธ ๋Š” body ์•ˆ์ชฝ์— ์žˆ์–ด์•ผ ํ•œ๋‹ค๊ณ  ํ–ˆ์œผ๋ฏ€๋กœ, </body>๋’ค์— ๋ฌด์–ธ๊ฐ€๋ฅผ ๋„ฃ๋”๋ผ๋„ ๊ทธ ์ฝ˜ํ…์ธ ๋Š” ์ž๋™์œผ๋กœ body ์•ˆ์ชฝ์œผ๋กœ ์˜ฎ๊ฒจ์ง„๋‹ค. ๋”ฐ๋ผ์„œ </body> ๋’ค์—๋Š” ๊ณต๋ฐฑ์ด ์žˆ์„ ์ˆ˜ ์—†๋‹ค.
  • ๊ณต๋ฐฑ์ด ์—†๋Š” ํ…์ŠคํŠธ ๋…ธ๋“œ๋งŒ์œผ๋กœ HTML๋ฌธ์„œ๋ฅผ ๊ตฌ์„ฑํ•˜๋ ค๋ฉด ์•„๋ž˜ ์˜ˆ์ œ ์ฒ˜๋Ÿผ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค.

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-07-16 แ„‹แ…ฉแ„’แ…ฎ 11 23 12

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-07-16 แ„‹แ…ฉแ„’แ…ฎ 11 23 29


์ž๋™ ๊ต์ •

  • ๊ธฐํ˜•์ ์ธ HTML์„ ๋งŒ๋‚˜๋ฉด ๋ธŒ๋ผ์šฐ์ €๋Š” DOM ์ƒ์„ฑ ๊ณผ์ •์—์„œ HTML์„ ์ž๋™์œผ๋กœ ๊ต์ •ํ•œ๋‹ค.
  • ์˜ˆ๋ฅผ ๋“ค์–ด ๊ฐ€์žฅ ์ตœ์ƒ์œ„ ํƒœ๊ทธ๋Š” ํ•ญ์ƒ <html> ์ด์–ด์•ผ ํ•˜๋Š”๋ฐ ๋ฌธ์„œ์— <html> ํƒœ๊ทธ๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ, ๋ฌธ์„œ ์ตœ์ƒ์œ„์— ์ด๋ฅผ ์ž๋™์œผ๋กœ ๋„ฃ์–ด์ค€๋‹ค. ๋”ฐ๋ผ์„œ DOM์—๋Š” <html>์— ๋Œ€์‘ํ•˜๋Š” ๋…ธ๋“œ๊ฐ€ ํ•ญ์ƒ์žˆ๋‹ค. <body> ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ ์šฉ๋œ๋‹ค.

<!DOCTYPE html> ์•ˆ๋…•ํ•˜์„ธ์š”

  • ์œ„ ์˜ˆ์ œ์ฒ˜๋Ÿผ HTML ํŒŒ์ผ์— ์•ˆ๋…•ํ•˜์„ธ์š”๋ผ๋Š” ๋ฌธ์žฅ ํ•˜๋‚˜๋งŒ ์ €์žฅ๋œ ์ƒํ™ฉ์ด๋ผ๋„, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ž๋™์œผ๋กœ <html>๊ณผ <body>๋กœ ๊ฐ์‹ธ์ค€๋‹ค. ๋˜ํ•œ, <head>๋„ ๋”ํ•ด์ค€๋‹ค.

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-07-16 แ„‹แ…ฉแ„’แ…ฎ 11 26 57


  • DOM ์ƒ์„ฑ๊ณผ์ •์—์„œ ๋ธŒ๋ผ์šฐ์ €๋Š” ๋ฌธ์„œ์— ์žˆ๋Š” ์—๋Ÿฌ ๋“ฑ, ๋‹ซ๋Š” ํƒœ๊ทธ๊ฐ€ ์—†๋Š” ์—๋Ÿฌ ๋“ฑ์„ ์ž๋™์œผ๋กœ ์ฒ˜๋ฆฌํ•œ๋‹ค.
  • ์•„๋ž˜ ์˜ˆ์ œ์ฒ˜๋Ÿผ ์ •์ƒ์ ์ธ HTML ํ˜•์‹์ด ์•„๋‹ˆ๊ณ , ํƒœ๊ทธ ์ง์ด ์•ˆ๋งž์•„๋„ ๋ธŒ๋ผ์šฐ์ €๋Š” ์ •์ƒ์ ์œผ๋กœ ๊ต์ •์‹œ์ผœ์ค€๋‹ค.

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-07-16 แ„‹แ…ฉแ„’แ…ฎ 11 28 35

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-07-16 แ„‹แ…ฉแ„’แ…ฎ 11 29 35


  • ์ถ”๊ฐ€์ ์œผ๋กœ, ํ…Œ์ด๋ธ”์—๋Š” ์–ธ์ œ๋‚˜ <tbody>๊ฐ€ ์žˆ๋‹ค.
  • DOM ๋ช…์„ธ์„œ์—์„  ํ…Œ์ด๋ธ”์—๋Š” ๋ฐ˜๋“œ์‹œ <tbody>๊ฐ€ ์žˆ์–ด์•ผ ํ•œ๋‹ค๊ณ  ๋ชป ๋ฐ•์•„ ๋†จ์ง€๋งŒ, HTML์—์„  <tbody>๋ฅผ ์ƒ๋žตํ•˜๊ณค ํ•œ๋‹ค. ์ด๋•Œ ๋ธŒ๋ผ์šฐ์ €๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์ž๋™์œผ๋กœ DOM์— <tbody>๋ฅผ ๋งŒ๋“ค์–ด์ค€๋‹ค.

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-07-16 แ„‹แ…ฉแ„’แ…ฎ 11 31 36

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-07-16 แ„‹แ…ฉแ„’แ…ฎ 11 31 49


๊ธฐํƒ€ ๋…ธ๋“œ ํƒ€์ž…

  • ์š”์†Œ ๋…ธ๋“œ์™€ ํ…์ŠคํŠธ ๋…ธ๋“œ ์™ธ์—๋„ ๋‹ค์–‘ํ•œ ๋…ธ๋“œ ํƒ€์ž…์ด ์žˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์ฃผ์„๋„ ๋…ธ๋“œ๊ฐ€ ๋œ๋‹ค.

<!DOCTYPE html>
<html>
  <head>
    <title>์‚ฌ์Šด์— ๊ด€ํ•˜์—ฌ</title>
  </head>
  <body>
    ์‚ฌ์Šด์— ๊ด€ํ•œ ์ง„์‹ค.
    <ol>
      <li>์‚ฌ์Šด์€ ๋˜‘๋˜‘ํ•ฉ๋‹ˆ๋‹ค.</li>
      <!-- comment -->
      <li>๊ทธ๋ฆฌ๊ณ  ์ž”๊พ€๋ฅผ ์ž˜ ๋ถ€๋ฆฌ์ฃ !</li>
    </ol>
  </body>
</html>

  • ์œ„ ์˜ˆ์ œ์ฒ˜๋Ÿผ ์ž‘์„ฑ๋œ HTML ๋ฌธ์„œ๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž. ๊ทธ๋Ÿฌ๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด DOM ํŠธ๋ฆฌ๊ฐ€ ๊ตฌ์„ฑ๋  ๊ฒƒ์ด๋‹ค.

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-07-16 แ„‹แ…ฉแ„’แ…ฎ 11 35 34

  • ํŠธ๋ฆฌ์— ์ฃผ์„ ๋…ธ๋“œ(comment node)๋ผ๋Š” ์ƒˆ๋กœ์šด ๋…ธ๋“œ ํƒ€์ž…์ด ๋“ฑ์žฅํ–ˆ๋‹ค. ํ˜„์žฌ#comment๋กœ ํ‘œํ˜„๋˜๋Š” ์ฃผ์„ ๋…ธ๋“œ๋Š” ๋‘ ํ…์ŠคํŠธ ๋…ธ๋“œ ์‚ฌ์ด์— ์กด์žฌํ•œ๋‹ค.
  • ์—ฌ๊ธฐ์„œ, ์ฃผ์„์€ ํ™”๋ฉด ์ถœ๋ ฅ๋ฌผ์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š”๋ฐ, ์™œ DOM์— ์ถ”๊ฐ€๋˜๋Š”์ง€ ์˜์•„ํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฃผ์„ ๋…ธ๋“œ๋Š” HTML์— ์žˆ๋‹ค๋ฉด ๋ฐ˜๋“œ์‹œ DOM ํŠธ๋ฆฌ์— ์ถ”๊ฐ€๋˜์–ด์•ผ ํ•œ๋‹ค๋Š” ๊ทœ์น™๋•Œ๋ฌธ์— DOM์— ์ถ”๊ฐ€ ๋œ ๊ฒƒ์ด๋‹ค.
  • ์•„๋ž˜ ๋ฌธ๊ตฌ๋ฅผ ๊ธฐ์–ตํ•˜์ž.

HTML ์•ˆ์˜ ๋ชจ๋“  ๊ฒƒ์€ (์‹ฌ์ง€์–ด ์ฃผ์„์ด๋”๋ผ๋„) DOM์„ ๊ตฌ์„ฑํ•œ๋‹ค.

  • HTML ๋ฌธ์„œ ์ตœ์ƒ๋‹จ์— ์žˆ๋Š” <!DOCTYPE> ์ง€์‹œ์ž ๋˜ํ•œ DOM ๋…ธ๋“œ๊ฐ€ ๋œ๋‹ค. ์ด ๋…ธ๋“œ๋Š” DOM ํŠธ๋ฆฌ์˜ <html> ๋ฐ”๋กœ ์œ„์— ์œ„์น˜ํ•œ๋‹ค. (์ง€๊ธˆ๊นŒ์ง€ ์˜ˆ์ œ๋“ค์—๋Š” ํ‘œ์‹œ๋˜์ง€๋Š” ์•Š์•˜์ง€๋งŒ ์‹ค์ œ๋กœ๋Š” ์กด์žฌํ•˜๋Š” ๋…ธ๋“œ์ด๋‹ค)
  • ๋ฌธ์„œ ์ „์ฒด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” document ๊ฐ์ฒด ๋˜ํ•œ DOM ๋…ธ๋“œ์ด๋‹ค.
  • ์ฐธ๊ณ ๋กœ ๋…ธ๋“œ ํƒ€์ž…์€ ์ด 12๊ฐ€์ง€์ธ๋ฐ, ์‹ค๋ฌด์—์„  ์ฃผ๋กœ 4๊ฐ€์ง€ ๋…ธ๋“œ๋ฅผ ๋‹ค๋ฃฌ๋‹ค.
  • ์‹ค๋ฌด์—์„œ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” 4๊ฐ€์ง€ ๋…ธ๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.
    • DOM์˜ ์ง„์ž…์ ์ด ๋˜๋Š” ๋ฌธ์„œ(document) ๋…ธ๋“œ
    • HTML ํƒœ๊ทธ์—์„œ ๋งŒ๋“ค์–ด์ง€๋ฉฐ, DOM ํŠธ๋ฆฌ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋ธ”๋ก์ธ ์š”์†Œ ๋…ธ๋“œ(element node)
    • ํ…์ŠคํŠธ๋ฅผ ํฌํ•จํ•˜๋Š” ํ…์ŠคํŠธ ๋…ธ๋“œ(text node)
    • ํ™”๋ฉด์— ๋ณด์ด์ง€๋Š” ์•Š์ง€๋งŒ, ์ •๋ณด๋ฅผ ๊ธฐ๋กํ•˜๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด ์ด ์ •๋ณด๋ฅผ DOM์œผ๋กœ๋ถ€ํ„ฐ ์ฝ์„ ์ˆ˜ ์žˆ๋Š” ์ฃผ์„(comment) ๋…ธ๋“œ

์ฐธ๊ณ