NODE

DOM์€ ๋…ธ๋“œ๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ๊ณ„์ธต์  ๋‹จ์œ„์— ์ •๋ณด๋ฅผ ์ €์žฅํ•˜๊ณ  ์žˆ๋‹ค. DOM์€ ์ด๋Ÿฌํ•œ ๋…ธ๋“œ๋“ค์„ ์ •์˜ํ•˜๊ณ , ๊ทธ ์‚ฌ์ด์˜ ๊ด€๊ณ„๋ฅผ ์„ค๋ช…ํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

HTML์˜ ์ •๋ณด๋Š” ๋…ธ๋“œ ํŠธ๋ฆฌ์— ์ €์žฅ๋˜๋ฉฐ, ๋…ธ๋“œ ํŠธ๋ฆฌ๋Š” ๋…ธ๋“œ๋“ค์˜ ์ง‘ํ•ฉ์œผ๋กœ ๋…ธ๋“œ ๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ ๋ณด์—ฌ์ค€๋‹ค.

๋…ธ๋“œ ํŠธ๋ฆฌ๋Š” ์ตœ์ƒ์œ„ ๋ ˆ๋ฒจ์ธ ๋ฃจํŠธ ๋…ธ๋“œ(root node)๋กœ ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด, ๊ฐ€์žฅ ๋‚ฎ์€ ๋ ˆ๋ฒจ์ธ text ๋…ธ๋“œ๊นŒ์ง€ ๋‚ด๋ ค๊ฐ„๋‹ค. JavaScript์—์„œ๋Š” DOM์„ ์ด์šฉํ•˜์—ฌ ๋ชจ๋“  ๋…ธ๋“œ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

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

๋…ธ๋“œ

์„ค๋ช…

๋ฌธ์„œ ๋…ธ๋“œ(document node)

HTML ๋ฌธ์„œ ์ „์ฒด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋…ธ๋“œ

์š”์†Œ ๋…ธ๋“œ(element node)

๋ชจ๋“  HTML ์š”์†Œ๋Š” ์š”์†Œ ๋…ธ๋“œ์ด๋ฉฐ, ์†์„ฑ ๋…ธ๋“œ๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋Š” ์œ ์ผํ•œ ๋…ธ๋“œ์ด๋‹ค.

์†์„ฑ ๋…ธ๋“œ(attribute node)

๋ชจ๋“  HTML ์š”์†Œ์˜ ์†์„ฑ์€ ์†์„ฑ ๋…ธ๋“œ์ด๋ฉฐ, ์š”์†Œ ๋…ธ๋“œ์— ๊ด€ํ•œ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.ํ•˜์ง€๋งŒ ํ•ด๋‹น ์š”์†Œ ๋…ธ๋“œ์˜ ์ž์‹ ๋…ธ๋“œ(child node)์—๋Š” ํฌํ•จ๋˜์ง€ ์•Š๋Š”๋‹ค.

ํ…์ŠคํŠธ ๋…ธ๋“œ(text node)

HTML ๋ฌธ์„œ์˜ ๋ชจ๋“  ํ…์ŠคํŠธ๋Š” ํ…์ŠคํŠธ ๋…ธ๋“œ์ด๋‹ค.

์ฃผ์„ ๋…ธ๋“œ(comment node)

HTML ๋ฌธ์„œ์˜ ๋ชจ๋“  ์ฃผ์„์€ ์ฃผ์„ ๋…ธ๋“œ์ด๋‹ค.

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

[tree ์ž๋ฃŒ๊ตฌ์กฐ] ๋ฅผ ์ฐธ์กฐํ•˜๋ฉด ๊ด€๊ณ„๋ฅผ ๋” ์ž˜ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.

๋…ธ๋“œ๋กœ์˜ ์ ‘๊ทผ

  1. getElementsByTagName() ๋ฉ”์†Œ๋“œ๋ฅผ ์ด์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

  2. ๋…ธ๋“œ๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ ์ด์šฉํ•˜์—ฌ ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ๋ฒ•

    • parentNode : ๋ถ€๋ชจ ๋…ธ๋“œ

    • childNodes : ์ž์‹ ๋…ธ๋“œ ๋ฆฌ์ŠคํŠธ

    • firstChild : ์ฒซ ๋ฒˆ์งธ ์ž์‹ ๋…ธ๋“œ

    • lastChild : ๋งˆ์ง€๋ง‰ ์ž์‹ ๋…ธ๋“œ

    • nextSibling : ๋‹ค์Œ ํ˜•์ œ ๋…ธ๋“œ

    • previousSibling : ์ด์ „ ํ˜•์ œ ๋…ธ๋“œ

๋…ธ๋“œ์— ๋Œ€ํ•œ ์ •๋ณด

  • nodeName : ๋…ธ๋“œ ๊ณ ์œ ์˜ ์ด๋ฆ„์„ ์ €์žฅํ•œ๋‹ค. ์ฝ๊ธฐ ์ „์šฉ property(์ˆ˜์ •๋ถˆ๊ฐ€)

๋…ธ๋“œ

ํ”„๋กœํผํ‹ฐ ๊ฐ’

๋ฌธ์„œ ๋…ธ๋“œ(document node)

#document

์š”์†Œ ๋…ธ๋“œ(element node)

ํƒœ๊ทธ ์ด๋ฆ„ (์˜๋ฌธ์ž๋กœ ๋Œ€๋ฌธ์ž)

์†์„ฑ ๋…ธ๋“œ(attribute node)

์†์„ฑ ์ด๋ฆ„

ํ…์ŠคํŠธ ๋…ธ๋“œ(text node)

#text

์š”์†Œ ๋…ธ๋“œ์˜ nodeName property๋Š” ์–ธ์ œ๋‚˜ ํ•ด๋‹น HTML ์š”์†Œ์˜ ํƒœ๊ทธ ์ด๋ฆ„์„ ๋Œ€๋ฌธ์ž๋กœ ์ €์žฅํ•œ๋‹ค.

document.getElementById("document").innerHTML = document.childNodes[1].nodeName; // ๋‘ ๋ฒˆ์งธ ๋…ธ๋“œ์˜ ์ด๋ฆ„์„ ์„ ํƒ
//=> HTML

document.getElementById("html").innerHTML = document.childNodes[1].childNodes[0].nodeName; 
//=> HEAD
  • nodeValue : ๋…ธ๋“œ์˜ ๊ฐ’์„ ์ €์žฅํ•œ๋‹ค.

๋…ธ๋“œ

ํ”„๋กœํผํ‹ฐ ๊ฐ’

์š”์†Œ ๋…ธ๋“œ(element node)

undefined

์†์„ฑ ๋…ธ๋“œ(attribute node)

ํ•ด๋‹น ์†์„ฑ์˜ ์†์„ฑ๊ฐ’

ํ…์ŠคํŠธ ๋…ธ๋“œ(text node)

ํ•ด๋‹น ํ…์ŠคํŠธ ๋ฌธ์ž์—ด

var headingText = document.getElementById("heading").firstChild.nodeValue;

//innerHTML ๋Œ€์‹ ์— firstChild.nodeValue๋ฅผ ํ•ด๋„ ๊ฐ™์€ ๊ฒฐ๊ณผ ๊ฐ’์„ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.
document.getElementById("text").innerHTML = headingText;
document.getElementById("text").firstChild.nodeValue = headingText;
  • nodeType : ๋…ธ๋“œ ๊ณ ์œ ์˜ ํƒ€์ž…์„ ์ €์žฅํ•œ๋‹ค. ์ฝ๊ธฐ์ „์šฉ(์ˆ˜์ •๋ถˆ๊ฐ€)

๋…ธ๋“œ

ํ”„๋กœํผํ‹ฐ ๊ฐ’

์š”์†Œ ๋…ธ๋“œ(element node)

1

์†์„ฑ ๋…ธ๋“œ(attribute node)

2

ํ…์ŠคํŠธ ๋…ธ๋“œ(text node)

3

์ฃผ์„ ๋…ธ๋“œ(comment node)

8

๋ฌธ์„œ ๋…ธ๋“œ(document node)

9

document.getElementById("document").innerHTML = document.nodeType; 
//=> 9

์ด property๋“ค์€ ํŠน๋ณ„ํžˆ ๋‹ค๋ฅธ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ด์šฉํ•˜์ง€ ์•Š๊ณ ๋„, ํ•ด๋‹น ๋…ธ๋“œ์˜ ์ •๋ณด์— ์ง์ ‘ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•œ๋‹ค.

Last updated

Was this helpful?