๐Ÿš€
Growth log
  • About me
  • I LEARNED
    • General
      • ๊ฐœ๋ฐœ์ž ๊ฟ€ํŒ
      • ๊ทธ๋กœ์Šคํ•ดํ‚น ๊ธฐ์ดˆ
      • ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋„๋ฉ”์ธ ์ง€์‹์€ ์–ผ๋งˆ๋‚˜ ์ค‘์š”ํ• ๊นŒ?
      • DTO ๋…ผ์Ÿ์— ๋Œ€ํ•˜์—ฌ
      • MSA๋ž€?
    • Seminar
      • ํ…Œ์ŠคํŠธ ์ปค๋ฒ„๋ฆฌ์ง€ 100% - SLASH 21
      • TDD๊ฐ€ ์‹คํŒจํ•˜๋Š” ์ด์œ  - by ์ด๊ทœ์›๋‹˜
      • ๋Œ€๊ทœ๋ชจ ํŠธ๋ž˜ํ”ฝ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์„ฑ๋Šฅ ํŠœ๋‹ ๋…ธํ•˜์šฐ ๋‹ค ์•Œ๋ ค ๋“œ๋ฆผ|๋ผ์ธ๊ฐœ๋ฐœ์‹ค๋ก
      • ๊ฒฐ์ œ ์‹œ์Šคํ…œ์˜ SDK์™€ API ๋””์ž์ธ - SLASH 21
    • Web
      • SOP์™€ CORS
    • Spring & OOP
      • DTO vs VO
    • Ruby On Rails
      • Rails lib ๋””๋ ‰ํ† ๋ฆฌ์— ๋Œ€ํ•˜์—ฌ
      • Rails์˜ concerns๋ž€?
      • Rails์—์„œ์˜ GC ์ž‘๋™์›๋ฆฌ
      • Eager loading vs Lazy loading
      • Rails ํ™˜๊ฒฝ ๊ตฌ์„ฑ
      • ActionCable
      • ๐Ÿ“”Perfect ruby on rails
        • MVC ํŒจํ„ด์ธ Rails
        • Ruby on Rails ๊ธฐ๋ณธ - ์ปจํŠธ๋กค๋Ÿฌ
        • Ruby on Rails ๊ธฐ๋ณธ - ๋ทฐ
        • Ruby on Rails ๊ธฐ๋ณธ - ๋ชจ๋ธ
        • ์Šค์บํด๋”ฉ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•œ Rails ๊ฐœ๋ฐœ ๊ธฐ์ดˆ
        • ๋ทฐ ๊ฐœ๋ฐœ
        • ๋ชจ๋ธ ๊ฐœ๋ฐœ
        • ๋ชจ๋ธ ๊ฐœ๋ฐœ - ๋‚™๊ด€์  ๋™์‹œ ์‹คํ–‰ ์ œ์–ด
        • ๋ชจ๋ธ ๊ฐœ๋ฐœ - ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ๊ตฌํ˜„
        • ๋ชจ๋ธ ๊ฐœ๋ฐœ - Association
        • ๋ชจ๋ธ ๊ฐœ๋ฐœ - ์ฝœ๋ฐฑ
        • ๋ชจ๋ธ ๊ฐœ๋ฐœ - ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜
        • ๋ชจ๋ธ ๊ฐœ๋ฐœ - ๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™”
        • ์ปจํŠธ๋กค๋Ÿฌ ๊ฐœ๋ฐœ - ์š”์ฒญ ์ •๋ณด ์ถ”์ถœ
        • ์ปจํŠธ๋กค๋Ÿฌ ๊ฐœ๋ฐœ - ์‘๋‹ต
        • ์ปจํŠธ๋กค๋Ÿฌ ๊ฐœ๋ฐœ - ์ƒํƒœ ๊ด€๋ฆฌ
        • ๋ผ์šฐํŒ… - RESTful
        • ๋ผ์šฐํŒ… - RESTful ์ธํ„ฐํŽ˜์ด์Šค์˜ ์‚ฌ์šฉ์ž ์ •์˜ํ™”
        • ๋ผ์šฐํŒ… - RESTful ํ•˜์ง€ ์•Š์€ ๋ผ์šฐํŠธ ์ •์˜
        • ํ…Œ์ŠคํŠธ
        • ํ…Œ์ŠคํŠธ - ์ค€๋น„
        • ํ…Œ์ŠคํŠธ - Unit ํ…Œ์ŠคํŠธ
        • ํ…Œ์ŠคํŠธ - Functional ํ…Œ์ŠคํŠธ
        • ํ…Œ์ŠคํŠธ - Integration ํ…Œ์ŠคํŠธ
        • ํด๋ผ์ด์–ธํŠธ ๊ฐœ๋ฐœ - Sprockets vs Webpacker
        • ํด๋ผ์ด์–ธํŠธ ๊ฐœ๋ฐœ - Sprockets
    • Node.js & Express
      • ๊ธฐ๋ณธ ๊ฐœ๋…
      • npx
    • Programing Language
      • Java
        • JavaDoc์— ๋Œ€ํ•ด
        • invocation์— ๋Œ€ํ•ด์„œ
        • ์–ด๋…ธํ…Œ์ด์…˜
        • ์ถ”์ƒํด๋ž˜์Šค & ์ธํ„ฐํŽ˜์ด์Šค
        • Package
        • ์˜ค๋ฒ„๋กœ๋”ฉ vs ์˜ค๋ฒ„๋ผ์ด๋”ฉ
      • Javascript
        • TCP School ํ›‘์–ด๋ณด๊ธฐ
          • ํƒ€์ž…
          • ํ˜• ๋ณ€ํ™˜
          • ๋ณ€์ˆ˜
          • ์—ฐ์‚ฐ์ž
          • ๋ฐ˜๋ณต๋ฌธ
          • ๋ฐฐ์—ด(array)
          • ํ•จ์ˆ˜
          • ํ•จ์ˆ˜ - ์Šค์ฝ”ํ”„์™€ ํ˜ธ์ด์ŠคํŒ…
          • ํ•จ์ˆ˜ - ๋งค๊ฐœ๋ณ€์ˆ˜์™€ ์ธ์ˆ˜
          • ํ•จ์ˆ˜ - ๋ฏธ๋ฆฌ ์ •์˜๋œ ์ „์—ญ ํ•จ์ˆ˜
          • ๊ฐ์ฒด
          • ํ”„๋กœํ† ํƒ€์ž…
          • DOM
          • BOM - Window ๊ฐ์ฒด
          • ์ด๋ฒคํŠธ(event)
      • Ruby
        • ๐Ÿ“”ํผํŽ™ํŠธ ๋ฃจ๋น„
    • DB
      • Redis
        • Redis ๊ฐœ์š”
      • Index(์ธ๋ฑ์Šค)?
      • DB Transaction & Lock
      • ๋™์‹œ์„ฑ ์ œ์–ด์— ๊ด€ํ•˜์—ฌ
      • Lock(์ž ๊ธˆ)์ด๋ž€?
      • ActiveRecord lock vs with_lock
      • Table lock vs Row lock
      • WHERE 1=1 ๊ตฌ๋ฌธ์— ๋Œ€ํ•˜์—ฌ
      • COUNT(*) vs COUNT(indexed column)
      • ๐Ÿ“•๊ด€๊ณ„ํ˜• ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์‹ค์ „์ž…๋ฌธ
      • ๐Ÿ“”SQL ์ฒซ๊ฑธ์Œ
      • ๐Ÿ“”๋ชจ๋‘์˜ SQL
    • Design Patterns
      • Observer pattern
      • Flyweight pattern
      • Singleton pattern
    • OOP
      • ๐Ÿ“”์˜ค๋ธŒ์ ํŠธ
        • 6์žฅ ๋ฉ”์‹œ์ง€์™€ ์ธํ„ฐํŽ˜์ด์Šค
      • ํด๋ž˜์Šค๊ฐ„ ๊ด€๊ณ„ ๊ฐ„๋‹จ ์ •๋ฆฌ
    • Regex
    • Collaboration
      • Git
      • Sourcetree
  • DAILY REVIEW
    • 2021
      • August
        • 2021-08-25(Wed)
        • 2021-08-23(Mon)
        • 2021-08-11(Wed)
        • 2021-08-04(Wed)
        • 2021-08-03(Tue)
        • 2021-08-02(Mon)
      • July
        • 2021-07-29(Thu)
        • 2021-07-26(Mon)
        • 2021-07-23(Fri)
        • 2021-07-22(Thu)
        • 2021-07-21(Wed)
        • 2021-07-20(Tue)
        • 2021-07-19(Mon)
        • 2021-07-15(Thu)
        • 2021-07-14(Wed)
        • 2021-07-13(Tue)
        • 2021-07-12(Mon)
      • June
        • 2021-06-05(Sat)
        • 2021-06-04(Fri)
        • 2021-06-03(Thu)
        • 2021-06-02(Wed)
        • 2021-06-01(Tue)
      • May
        • 2021-05-31(Mon)
        • 2021-05-29(Sat)
        • 2021-05-28(Fri)
        • 2021-05-27(Thu)
        • 2021-05-26(Wed)
        • 2021-05-25(Tue)
        • 2021-05-24(Mon)
        • 2021-05-22(Sat)
        • 2021-05-21(Fri)
        • 2021-05-20(Thu)
        • 2021-05-19(Wed)
        • 2021-05-18(Tue)
        • 2021-05-17(Mon)
        • 2021-05-15(Sat)
        • 2021-05-13(Thu)
        • 2021-05-12(Wed)
        • 2021-05-11(Tue)
        • 2021-05-10(Mon)
        • 2021-05-03(Mon)
      • April
        • 2021-04-30(Fri)
        • 2021-04-29(Thu)
        • 2021-04-28(Wed)
        • 2021-04-27(Tue)
        • 2021-04-26(Mon)
        • 2021-04-24(Sat)
        • 2021-04-23(Fri)
        • 2021-04-21(Wed)
        • 2021-04-20(Tue)
        • 2021-04-19(Mon)
        • 2021-04-18(Sun)
        • 2021-04-16(Fri)
        • 2021-04-15(Thu)
        • 2021-04-14(Wed)
        • 2021-04-12(Mon)
        • 2021-04-11(Sun)
        • 2021-04-09(Fri)
        • 2021-04-08(Thu)
        • 2021-04-06(Tue)
        • 2021-04-05(Mon)
        • 2021-04-04(Sun)
        • 2021-04-03(Sat)
        • 2021-04-02(Fri)
        • 2021-04-01(Thu)
      • March
        • 2021-03-29(Mon)
        • 2021-03-28(Sun)
        • 2021-03-26(Fri)
        • 2021-03-25(Thu)
        • 2021-03-24(Wed)
        • 2021-03-23(Tue)
        • 2021-03-22(Mon)
        • 2021-03-21(Sun)
        • 2021-03-20(Sat)
        • 2021-03-17(Wed)
        • 2021-03-16(Tue)
        • 2021-03-15(Mon)
        • 2021-03-12(Fri)
        • 2021-03-11(Thu)
        • 2021-03-10(Wed)
        • 2021-03-09(Tue)
        • 2021-03-08(Mon)
        • 2021-03-07(Sun)
        • 2021-03-05(Fri)
        • 2021-03-03(Wed)
        • 2021-03-02(Tue)
        • 2021-03-01(Mon)
      • Feb
        • 2021-02-26(Fri)
        • 2021-02-25(Thu)
        • 2021-02-24(Wed)
        • 2021-02-23(Tue)
        • 2021-02-22(Mon)
        • 2021-02-19(Fri)
        • 2021-02-18(Thu)
        • 2021-02-17(Wed)
        • 2021-02-16(Tue)
        • 2021-02-15(Mon)
        • 2021-02-14(Sun)
        • 2021-02-13(Sat)
        • 2021-02-12(Fri)
        • 2021-02-10(Wed)
        • 2021-02-09(Tue)
        • 2021-02-08(Mon)
        • 2021-02-07(Sun)
        • 2021-02-05(Fri)
        • 2021-02-03(Wed)
        • 2021-02-02(Tue)
        • 2021-02-01(Mon)
      • Jan
        • 2021-01-29(Fri)
        • 2021-01-28(Thu)
        • 2021-01-27(Wed)
        • 2021-01-26(Tue)
        • 2021-01-25(Mon)
        • 2021-01-23(Sat)
        • 2021-01-22(Fri)
        • 2021-01-20(Wed)
        • 2021-01-19(Tue)
        • 2021-01-18(Mon)
        • 2021-01-12(Tue)
        • 2020-01-11(Mon)
        • 2021-01-08(Fri)
        • 2021-01-07(Thu)
        • 2021-01-06(Wed)
        • 2021-01-05(Tue)
        • 2021-01-04(Mon)
        • 2021-01-01(Fri)
    • 2020
      • Dec
        • 2020-12-30(Thu)
        • 2020-12-25(Fri)
        • 2020-12-24(Thu)
        • 2020-12-23(Wed)
        • 2020-12-22(Tue)
        • 2020-12-21(Mon)
        • 2020-12-18 (Fri)
      • Nov
        • 2020-11-30(Mon)
        • 2020-11-28(Sat)
        • 2020-11-26(Thu)
        • 2020-11-25(Wed)
        • 2020-11-24(Tue)
        • 2020-11-23(Mon)
        • 2020-11-22(Sun)
        • 2020-11-20(Fri)
        • 2020-11-19(Thu)
        • 2020-11-18(Wed)
        • 2020-11-17(Tue)
        • 2020-11-14(Sat)
        • 2020-11-13(Fri)
        • 2020-11-12(Thu)
        • 2020-11-11(Wed)
        • 2020-11-09(Mon)
        • 2020-11-07(Sat)
        • 2020-11-05(Thu)
        • 2020-11-04(Wed)
        • 2020-11-03(Tue)
        • 2020-11-02(Mon)
    • Good article ์•„์นด์ด๋น™
Powered by GitBook
On this page
  • DOM ์š”์†Œ์˜ ์„ ํƒ
  • ๋…ธ๋“œ(node)

Was this helpful?

  1. I LEARNED
  2. Programing Language
  3. Javascript
  4. TCP School ํ›‘์–ด๋ณด๊ธฐ

DOM

Previousํ”„๋กœํ† ํƒ€์ž…NextBOM - Window ๊ฐ์ฒด

Last updated 4 years ago

Was this helpful?

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์€ ์ด๋Ÿฌํ•œ ๋…ธ๋“œ๋“ค์„ ์ •์˜ํ•˜๊ณ , ๊ทธ๋“ค ์‚ฌ์ด์˜ ๊ด€๊ณ„๋ฅผ ์„ค๋ช…ํ•ด ์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

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

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

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

img_js_htmldom