๐Ÿ‘€ ํ…์ŠคํŠธ๋…ธ๋“œ์—๋„ ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์„๊นŒ?

TL;DR

  • ํ…์ŠคํŠธ๋…ธ๋“œ์— ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Œ.
  • ๊ทผ๋ฐ ํ…์ŠคํŠธ๋…ธ๋“œ์—๋Š” click ๊ฐ™์€ ์—˜๋ฆฌ๋จผํŠธ ์ด๋ฒคํŠธ๋ง๊ณ  DOMCharacterDataModified ๊ฐ™์€ ๋ณ€ํ™” ๊ฐ์ง€ ์ด๋ฒคํŠธ๋งŒ ๋ฐœ์ƒํ•จ.



๋œฌ๊ธˆ์—†์ด ํ…์ŠคํŠธ๋…ธ๋“œ์—๋„ ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์„๊นŒ? ๋ผ๋Š” ๋ง‰์—ฐํ•œ ๊ถ๊ธˆ์ฆ์ด ์ƒ๊ฒผ๋‹ค.

Node๋Š” EventTarget์„ ์ƒ์†๋ฐ›์•„์„œ ์ด๋ฒคํŠธ๊ฐ€ ์ž˜ ์ž‘๋™ํ•  ์ค„ ์•Œ์•˜์ง€๋งŒ ํด๋ฆญ ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ๋Š” ์ž‘๋™ํ•˜์ง€ ์•Š์•˜๊ณ , ์—ฌ๋Ÿฌ ์ž๋ฃŒ๋ฅผ ์ฐพ์•„๋ณด๊ณ  ์ง์ ‘ ์‹คํ—˜์„ ํ•˜๋ฉด์„œ ๋ฐฐ์šด ๋‚ด์šฉ๋“ค์„ ์ •๋ฆฌํ•ด๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค.

Table of Contents

1. Node์™€ Element

๋ธŒ๋ผ์šฐ์ €์˜ ๋ Œ๋”๋ง ์—”์ง„์€ HTML๋ฌธ์„œ๋ฅผ ํŒŒ์‹ฑํ•ด์„œ ์˜๋ฏธ์žˆ๋Š” ํ† ํฐ์œผ๋กœ ๋‚˜๋ˆ„๊ณ  ์ด๋Ÿฌํ•œ ํ† ํฐ๋“ค์„ ๊ฐ์ฒดํ˜•ํƒœ๋กœ ์ถ”์ƒํ™”ํ•ด์„œ ํŠธ๋ฆฌ๋ฅผ ๊ตฌ์„ฑํ•œ๋‹ค. ์ด๋ฅผ DOM Tree๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.

์ด๋ฏธ์ง€์ถœ์ฒ˜ : ๊ฐ์ฒด ์ƒ์„ฑ ๋ชจ๋ธ

full process

์ด๋Ÿฌํ•œ DOM Tree์˜ ๊ฐœ์ฒด ํ•˜๋‚˜ํ•˜๋‚˜๋ฅผ ๋…ธ๋“œ๋ผ๊ณ  ๋ถ€๋ฅด๋ฉฐ, DOM Tree์ž์ฒด๋„ ํ•˜๋‚˜์˜ ํฐ ๋…ธ๋“œ์ด๋‹ค.

๋…ธ๋“œ์˜ ์ข…๋ฅ˜

๊ทธ๋ฆฌ๊ณ  ๋…ธ๋“œ์˜ ์ข…๋ฅ˜๋Š” ๋Œ€ํ‘œ์ ์œผ๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  1. Document ๋…ธ๋“œ : DOM tree ๋…ธ๋“œ
  2. Element ๋…ธ๋“œ : html๋ถ€ํ„ฐ head, body, input, div๊นŒ์ง€ id, class์™€ ๊ฐ™์€ ์‹๋ณ„์ž๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋Š” ๋…ธ๋“œ
  3. Text ๋…ธ๋“œ : ํ…์ŠคํŠธ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๋…ธ๋“œ
  4. Comment ๋…ธ๋“œ : ์ฃผ์„์„ ํ‘œํ˜„ํ•˜๋Š” ๋…ธ๋“œ(๋ Œ๋”๋ง ํŠธ๋ฆฌ์—๋Š” ํ•ญ์ƒ ํฌํ•จ๋˜์ง€ ์•Š์Œ)

๊ทธ์™ธ์— ProcessingInstruction ๋…ธ๋“œ๋„ ์žˆ๋‹ค๊ณ  ํ•˜๋Š”๋ฐ ์ž˜ ์‚ฌ์šฉํ•  ๊ฒƒ ๊ฐ™์ง€ ์•Š์•„์„œ ํŒจ์“ฐ!

๋…ธ๋“œ์˜ ๊ณ„์ธต๊ด€๊ณ„

๊ทธ๋ฆฌ๊ณ  Node๋“ค์€ ๋ชจ๋‘ eventTarget์„ ์ƒ์†๋ฐ›๋Š”๋‹ค.

eventtarget

  • eventTarget : ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ ์กฐ์ž‘ ๋ฉ”์†Œ๋“œ๋ฅผ ๊ฐ€์ง€๋Š” ์ถ”์ƒ ํด๋ž˜์Šค

์ด๋Ÿฌํ•œ ์ƒ์†๊ด€๊ณ„๋ฅผ ํ†ตํ•ด ํ…์ŠคํŠธ๋…ธ๋“œ๋„ eventTarget์„ ์ƒ์†๋ฐ›์œผ๋‹ˆ๊นŒ ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ๋ฅผ ๋“ฑ๋กํ•  ์ˆ˜ ์žˆ๊ฒ ๊ฑฐ๋‹ˆ ์ƒ๊ฐํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

2. ํ…์ŠคํŠธ๋…ธ๋“œ์— ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ ๋“ฑ๋กํ•ด๋ณด๊ธฐ

์‹ค์ œ ํ…์ŠคํŠธ ๋…ธ๋“œ๋ฅผ ๋งŒ๋“ค๊ณ  ๋ Œ๋”๋ง ํ•ด์ฃผ์—ˆ๋‹ค.

์ด๋ฏธ์ง€์ถœ์ฒ˜ : Node - MDN

textNodetest1

๊ทธ๋‹ค์Œ childNodes๋ฅผ ์ด์šฉํ•ด์„œ node๋ฅผ ์ฐธ์กฐํ•œ ๋’ค, click ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ๋ฅผ ๋“ฑ๋กํ•ด์ฃผ์—ˆ๋‹ค.

textNodetest2

๋ถ„๋ช… Nodeํƒ€์ž…์ด๊ธฐ ๋•Œ๋ฌธ์— addEventListenr๊ฐ€ ์ž๋™์™„์„ฑ์œผ๋กœ ์ฝ˜์†”์—์„œ ์ถ”์ฒœํ•ด์ฃผ์—ˆ์ง€๋งŒ ์ด๋ฒคํŠธ๋Š” ๋ฐœ์ƒํ•˜์ง€ ์•Š์•˜๋‹ค.

3. ๊ทธ๋Ÿผ.. ํ…์ŠคํŠธ๋…ธ๋“œ์—๋Š” ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ๊ฐ€ ๋“ฑ๋ก์ด ์•ˆ๋˜๋Š”๊ฑด๊ฐ€?

ํ…์ŠคํŠธ๋…ธ๋“œ๋Š” ์›๋ž˜ ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ๊ฐ€ ๋“ฑ๋ก์ด ์•ˆ๋˜๋Š”์ง€ ๊ถ๊ธˆํ–ˆ๊ณ  ๊ตฌ๊ธ€๋ง์„ ํ†ตํ•ด ํ…์ŠคํŠธ๋…ธ๋“œ์—์„œ๋Š” ๋Œ€๋ถ€๋ถ„์˜ ์ด๋ฒคํŠธ๋Š” ๋ฐœ์ƒํ•˜์ง€ ์•Š๊ณ  ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ๋Š” ์กด์žฌํ•œ๋‹ค ๋ผ๋Š” ์ •๋ณด๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

textNodetest3

ํด๋ฆญ ์ด๋ฒคํŠธ๋Š” ์ž‘๋™ํ•˜์ง€ ์•Š์ง€๋งŒ, DOMCharacterDataModified ์ด๋ฒคํŠธ๋Š” ์ž‘๋™ํ•˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.


๊ทผ๋ฐ ์—˜๋ฆฌ๋จผํŠธ ๋…ธ๋“œ(div)์—๋Š” ๋ฐ˜๋Œ€๋กœ DOMCharacterDataModified๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š์•˜๋‹ค.

textNodetest4

ํ•˜์ง€๋งŒ, DOMNodeInserted ์ด๋ฒคํŠธ๋ฅผ ์ผ์„ ๋•Œ๋Š” ์ž˜ ์ž‘๋™ํ–ˆ๋‹ค.

textNodetest5

์ฆ‰, DOMCharacterDataModified๋Š” ํ…์ŠคํŠธ๋…ธ๋“œ์—์„œ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ๋ผ๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  DOMNodeInserted ์ด๋ฒคํŠธ๊ฐ€ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ์„ ๋ณด๊ณ  Node.textContent๋Š” ๋…ธ๋“œ ๋‚ด๋ถ€์˜ ํ…์ŠคํŠธ๋ฅผ ์ง์ ‘ ๋ณ€ํ™”์‹œํ‚ค๋Š” ๊ฒŒ ์•„๋‹ˆ๋ผ, ๋…ธ๋“œ์˜ child Node์ธ ํ…์ŠคํŠธ๋…ธ๋“œ ์ฐธ์กฐํ•˜๊ณ  ๋ณ€ํ™”์‹œํ‚ค๋Š” ๊ฒƒ์ด๋ผ๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

4. ๊ฒฐ๋ก 

ํ…์ŠคํŠธ๋…ธ๋“œ๋Š” EventTarget์˜ ์ด๋ฒคํŠธํ•ธ๋“ค๋Ÿฌ ์ถ”๊ฐ€ ๋ฉ”์†Œ๋“œ๋ฅผ ์ƒ์†๋ฐ›๊ธฐ๋Š” ํ•˜์ง€๋งŒ, click, change ๋“ฑ์˜ ์ด๋ฒคํŠธ๋Š” ๋ฐœ์ƒํ•˜์ง€ ์•Š๊ณ , DOM์˜ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ•˜๋Š” ์ด๋ฒคํŠธ๋งŒ ๋ฐœ์ƒํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

์ฆ‰, EventTarget์˜ ๋ฉ”์†Œ๋“œ๋ฅผ ์ƒ์†๋ฐ›์ง€๋งŒ, ์—˜๋ฆฌ๋จผํŠธ์™€ ํ…์ŠคํŠธ๋…ธ๋“œ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ์˜ ์ข…๋ฅ˜๋Š” ๋‹ฌ๋ž๋‹ค.

์ผ๋ฐ˜์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” click ์ด๋ฒคํŠธ์˜ ๊ทผ์›์ง€๋Š” div๊ฐ™์€ ์—˜๋ฆฌ๋จผํŠธ์ด๋‹ค. ํ•˜์ง€๋งŒ, ํ…์ŠคํŠธ๋…ธ๋“œ ๋˜ํ•œ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ๋Š” ์กด์žฌํ•˜๊ธด ํ–ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์—˜๋ฆฌ๋จผํŠธ ๋…ธ๋“œ๊ฐ€ ํ…์ŠคํŠธ๋ผ๋Š” ์ •๋ณด๋ฅผ ๊ฐ€์ง€๋Š” ํ˜•ํƒœ๊ฐ€ ์•„๋‹ˆ๋ผ ์—˜๋ฆฌ๋จผํŠธ ๋…ธ๋“œ์˜ child๋กœ ํ…์ŠคํŠธ ๋…ธ๋“œ๋ฅผ ๊ฐ–๋Š”๋‹ค๋Š” ๊ฒƒ๋„ ์ถ”๊ฐ€๋กœ ์•Œ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

๋˜ํ•œ DOMCharacterDataModified, DOMNodeInserted ๊ฐ™์€ ์ด๋ฒคํŠธ๋Š” DOM ๋ณ€ํ™”๊ฐ์ง€ ์ด๋ฒคํŠธ๋Š” ์„ค๊ณ„๊ฒฐํ•จ, ์„ฑ๋Šฅ๋ฌธ์ œ์™€ ํฌ๋กœ์‹ฑ๋ธŒ๋ผ์šฐ์ง• ๋“ฑ๋“ฑ์˜ ์ด์Šˆ๋กœ Mutation Oberver API๋ฅผ ๊ถŒ์žฅํ•œ๋‹ค๋Š” ์ƒˆ๋กœ์šด ์‚ฌ์‹ค๋„ ์•Œ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

5. TMI

  1. ์‹ค์šฉ์„ฑ์ด ๋–จ์–ด์ง€๋Š” ์‚ฝ์งˆ์„ ํ•œ ๊ฒƒ ๊ฐ™์ง€๋งŒ, ๊ทธ๋ž˜๋„ DOM ํŠธ๋ฆฌ์˜ EventTarget, Node Element์— ๋Œ€ํ•ด ์ข€ ๋” ๊นŠ๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์•˜๋‹ค.
  2. ํ…์ŠคํŠธ๋ฅผ ์—˜๋ฆฌ๋จผํŠธ๋กœ ๊ฐ์‹ธ์ฃผ๋Š” ๊ฒƒ์ด ์ข‹์€ ํŒจํ„ด์ธ ๋“ฏ ํ•˜์ง€๋งŒ, ๋ชจ๋“  ๊ฒƒ์— ์ •๋‹ต์ด ์—†๋“ฏ, ํ…์ŠคํŠธ๋…ธ๋“œ๋„ ์•Œ์•„๋‘๋ฉด ์ข‹์€ ๊ฐœ๋…์ธ ๊ฒƒ ๊ฐ™๋‹ค.
  3. ๋ฐ‘์˜ HTML์„ ๋ณด๊ณ  ๊นŠ์ด๊ฐ€ 3, ๋„ˆ๋น„๊ฐ€ 2์ธ ํŠธ๋ฆฌ๊ฐ€ ๋– ์˜ค๋ฅด๋ฉด ์ž˜ ์ดํ•ดํ•œ๋“ฏ..!

    <div>๋‚˜๋Š”ํ…์ŠคํŠธ๋…ธ๋“œ<span>์ŠคํŒฌํƒœ๊ทธ๋‚ด์˜ํ…์ŠคํŠธ</span></div>

  4. Node์™€ Element ๋ณ„๋กœ DOM์„ ์ฐธ์กฐํ•˜๋Š” ๋ฉ”์†Œ๋“œ๋„ ๊ฐ๊ฐ ๋‹ค์–‘ํ•ด์„œ ์ ์žฌ์ ์†Œ์— ์‚ฌ์šฉํ•˜๋Š” ๊ฒŒ ์ค‘์š”ํ•œ ๊ฒƒ ๊ฐ™๋‹ค. Node ๋ฉ”์†Œ๋“œ๋Š” ๋ณดํ†ต ํ…์ŠคํŠธ๋…ธ๋“œ๋ฅผ ํฌํ•จํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์€ ๊ฒƒ ๊ฐ™๋‹ค.

    Element.children vs Node.childNodes

  5. HTML ํŒŒ์‹ฑ์‹œ, ๊ณต๋ฐฑ๋„ ์›๋ž˜๋Š” ํ…์ŠคํŠธ๋…ธ๋“œ์— ๋‹ค ํฌํ•จ๋œ๋‹ค.

    before textNodetest7 after textNodetest6


Written by@taenyKim
์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ณต๋ถ€ ๋ธ”๋กœ๊ทธ / Learn in Public

GitHubFacebook