DOM

DOM, Docuemnts Object Model์€ ๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ์„ ๋œปํ•œ๋‹ค. ์ด๋Š” XML์ด๋‚˜ HTML ๋ฌธ์„œ์— ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•œ ์ผ์ข…์˜ ์ธํ„ฐํŽ˜์ด์Šค์ด๋‹ค.

์ด ๊ฐ์ฒด ๋ชจ๋ธ์€ ๋ฌธ์„œ ๋‚ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์ •์˜ํ•˜๊ณ , ๊ฐ๊ฐ์˜ ์š”์†Œ์— ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•œ๋‹ค.

์ด๋Ÿฌํ•œ DOM์€ W3C์˜ ํ‘œ์ค€ ๊ฐ์ฒด ๋ชจ๋ธ์ด๋ฉฐ, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ณ„์ธต ๊ตฌ์กฐ๋กœ ํ‘œํ˜„๋œ๋‹ค.

DOM

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ด๋Ÿฌํ•œ ๊ฐ์ฒด ๋ชจ๋ธ์„ ์ด์šฉํ•˜์—ฌ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ƒˆ๋กœ์šด HTML ์š”์†Œ๋‚˜ ์†์„ฑ์„ ์ถ”๊ฐ€

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์กด์žฌํ•˜๋Š” HTML ์š”์†Œ๋‚˜ ์†์„ฑ์„ ์ œ๊ฑฐ

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” HTML ๋ฌธ์„œ์˜ ๋ชจ๋“  HTML ์š”์†Œ๋ฅผ ๋ณ€๊ฒฝ

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” HTML ๋ฌธ์„œ์˜ ๋ชจ๋“  HTML ์†์„ฑ์„ ๋ณ€๊ฒฝ

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” HTML ๋ฌธ์„œ์˜ ๋ชจ๋“  CSS ์Šคํƒ€์ผ์„ ๋ณ€๊ฒฝ

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” HTML ๋ฌธ์„œ์— ์ƒˆ๋กœ์šด HTML ์ด๋ฒคํŠธ๋ฅผ ์ถ”๊ฐ€

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” HTML ๋ฌธ์„œ์˜ ๋ชจ๋“  HTML ์ด๋ฒคํŠธ์— ๋ฐ˜์‘

DOM ์š”์†Œ์˜ ์„ ํƒ

HTML ์š”์†Œ๋ฅผ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•ด์„œ๋Š” ์šฐ์„  ํ•ด๋‹น ์š”์†Œ๋ฅผ ์„ ํƒํ•ด์•ผ๋งŒ ํ•œ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํŠน์ • HTML ์š”์†Œ๋ฅผ ์„ ํƒํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  1. HTML ํƒœ๊ทธ ์ด๋ฆ„(tag name)์„ ์ด์šฉํ•œ ์„ ํƒ

  2. ์•„์ด๋””(id)๋ฅผ ์ด์šฉํ•œ ์„ ํƒ

  3. ํด๋ž˜์Šค(class)๋ฅผ ์ด์šฉํ•œ ์„ ํƒ

  4. name ์†์„ฑ(attribute)์„ ์ด์šฉํ•œ ์„ ํƒ

  5. CSS ์„ ํƒ์ž(selector)๋ฅผ ์ด์šฉํ•œ ์„ ํƒ

  6. HTML ๊ฐ์ฒด ์ง‘ํ•ฉ(object collection)์„ ์ด์šฉํ•œ ์„ ํƒ

๋…ธ๋“œ(node)

HTML DOM์€ ๋…ธ๋“œ(node)๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ๊ณ„์ธต์  ๋‹จ์œ„์— ์ •๋ณด๋ฅผ ์ €์žฅํ•˜๊ณ  ์žˆ๋‹ค. HTML ๋ฌธ์„œ์˜ ๋ชจ๋“  ๊ฒƒ์€ ๋…ธ๋“œ์ด๋‹ค.

HTML DOM์€ ์ด๋Ÿฌํ•œ ๋…ธ๋“œ๋“ค์„ ์ •์˜ํ•˜๊ณ , ๊ทธ๋“ค ์‚ฌ์ด์˜ ๊ด€๊ณ„๋ฅผ ์„ค๋ช…ํ•ด ์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

img_js_htmldom

HTML ๋ฌธ์„œ์˜ ์ •๋ณด๋Š” ๋…ธ๋“œ ํŠธ๋ฆฌ(node tree)๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ๊ณ„์ธต์  ๊ตฌ์กฐ์— ์ €์žฅ๋œ๋‹ค. ์ด๋Ÿฌํ•œ ๋…ธ๋“œ ํŠธ๋ฆฌ๋Š” ๋…ธ๋“œ๋“ค์˜ ์ง‘ํ•ฉ์ด๋ฉฐ, ๋…ธ๋“œ ๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ ๋ณด์—ฌ์ค€๋‹ค.

๋…ธ๋“œ ํŠธ๋ฆฌ๋Š” ์ตœ์ƒ์œ„ ๋ ˆ๋ฒจ์ธ ๋ฃจํŠธ ๋…ธ๋“œ(root node)๋กœ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ, ๊ฐ€์žฅ ๋‚ฎ์€ ๋ ˆ๋ฒจ์ธ ํ…์ŠคํŠธ ๋…ธ๋“œ๊นŒ์ง€ ๋ป—์–ด ๋‚ด๋ ค๊ฐ„๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” HTML DOM์„ ์ด์šฉํ•˜์—ฌ ๋…ธ๋“œ ํŠธ๋ฆฌ์— ํฌํ•จ๋œ ๋ชจ๋“  ๋…ธ๋“œ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

Last updated

Was this helpful?