๐Ÿ“’Javascript DOM #01 :)

zooyahoยท2022๋…„ 4์›” 17์ผ
0

study with me

๋ชฉ๋ก ๋ณด๊ธฐ
10/19
post-thumbnail

#DOM

DOM์€ HTML๋ฌธ์„œ์˜ ๊ณ„์ธต์  ๊ตฌ์กฐ์™€ ์ •๋ณด๋ฅผ ํ‘œํ˜„ํ•˜๋ฉฐ ์ด๋ฅผ ์—์–ดํ•  ์ˆ˜ ์žˆ๋Š” API, ์ฆ‰ ํ”„๋Ÿฌํฌํ‹ฐ์™€ ๋ฉ”์„œ๋“œ๋ฅผ ์ œ๊ณตํ•˜๋Š” ํŠธ๋ฆฌ์ž๋ฃŒ๊ตฌ์กฐ๋‹ค.

1. ์š”์†Œ ๋…ธ๋“œ ์ทจ๋“

๐Ÿ”ต Document.prototype.getElementByID()

  • ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ id ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ๊ฐ’์„ ๊ฐ–๋Š” ํ•˜๋‚˜์˜ ์š”์†Œ ๋…ธ๋“œ๋ฅผ ํƒ์ƒ‰ํ•˜์—ฌ ๋ฐ˜ํ™˜
  • id๋ฅผ ๊ฐ–๋Š” HTML์š”์†Œ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์„ ๊ฒฝ์šฐ null์„ ๋ฐ˜ํ™˜
  • id๊ฐ’๊ณผ ๋™์ผํ•œ ์ด๋ฆ„์˜ ์ „์—ญ ๋ณ€์ˆ˜๊ฐ€ ์•”๋ฌต์ ์œผ๋กœ ์„ ์–ธ๋˜๊ณ  ํ•ด๋‹น ๋…ธ๋“œ ๊ฐ์ฒด๊ฐ€ ํ• ๋‹น๋˜๋Š” ๋ถ€์ˆ˜ํšจ๊ณผ๊ฐ€ ์žˆ์Œ.

๐Ÿ”ต Document/Element.prototype.getElementsByTagName()

  • ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ ํƒœ๊ทธ ์ด๋ฆ„์„ ๊ฐ’๋Š” ๋ชจ๋“  ์š”์†Œ ๋…ธ๋“œ๋“ค์„ ํƒ์ƒ‰ํ•˜์—ฌ ๋ฐ˜ํ™˜
  • DOM๊ฐ์ฒด์ธ HTMLCollection ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜
  • Element.prototype.getElementsByTagName() ๋ฉ”์„œ๋“œ๋Š” ํŠน์ • ์š”์†Œ๋ฅผ ํ†ตํ•ด ํ˜ธ์ถœํ•˜๋ฉฐ, ํŠน์ • ์š”์†Œ ๋…ธ๋“œ์˜ ๋…ธ๋“œ์ค‘์—์„œ ์š”์†Œ ๋…ธ๋“œ๋ฅผ ํƒ์ƒ‰ํ•˜์—ฌ ๋ฐ˜ํ™˜
  • ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋œ ํƒœ๊ทธ ์ด๋ฆ„์„ ๊ฐ–๋Š” ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ๋นˆ HTMLCollection ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜

๐Ÿ”ต Document/Element.prototype.getElementsByClassName()

  • ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ class ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ๊ฐ’์„ ๊ฐ–๋Š” ํ•˜๋‚˜์˜ ์š”์†Œ ๋…ธ๋“œ๋ฅผ ํƒ์ƒ‰ํ•˜์—ฌ ๋ฐ˜ํ™˜
  • DOM๊ฐ์ฒด์ธ HTMLCollection ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜
  • Element.prototype.getElementsByClassName() ๋ฉ”์„œ๋“œ๋Š” ํŠน์ • ์š”์†Œ๋ฅผ ํ†ตํ•ด ํ˜ธ์ถœํ•˜๋ฉฐ, ํŠน์ • ์š”์†Œ ๋…ธ๋“œ์˜ ๋…ธ๋“œ์ค‘์—์„œ ์š”์†Œ ๋…ธ๋“œ๋ฅผ ํƒ์ƒ‰ํ•˜์—ฌ ๋ฐ˜ํ™˜
  • ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋œ ํƒœ๊ทธ ์ด๋ฆ„์„ ๊ฐ–๋Š” ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ๋นˆ HTMLCollection ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜

๐Ÿ”ต Document/Element.prototype.querySelector()

  • ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ css์„ ํƒ์ž๋ฅผ ๋งŒ์กฑ์‹œํ‚ค๋Š” ์š”์†Œ๋…ธ๋“œ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ null ๋ฐ˜ํ™˜
  • ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ css์„ ํƒ์ž๊ฐ€ ๋ฌธ๋ฒ•์— ๋งž์ง€ ์•Š๋Š” ๊ฒฝ์šฐ DOMException ์—๋Ÿฌ ๋ฐœ์ƒ

๐Ÿ”ต Document/Element.prototype.querySelectorAll()

  • DOM ์ปฌ๋ ‰์…˜ ๊ฐ์ฒด์ธ NodeList ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜.
  • ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ css์„ ํƒ์ž๊ฐ€ ๋ฌธ๋ฒ•์— ๋งž์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ๋นˆ NodeList๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜

๐Ÿ”ต Element.prototype.matches()

  • ํŠน์ • ์š”์†Œ ๋…ธ๋“œ๋ฅผ ์ทจ๋“ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธ
  • ์ด๋ฒคํŠธ ์œ„์ž„ ์‹œ ์œ ์šฉ

2. HTMLCollection๊ณผ NodeList

โœ๏ธ HTMLCollection

  • HTMLCollection ๊ฐ์ฒด๋Š” ๋…ธ๋“œ ๊ฐ์ฒด์˜ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ˜์˜ํ•˜๋Š” ์‚ด์•„ ์žˆ๋Š” DOM์ปฌ๋ ‰์…˜ ๊ฐ์ฒด์ด๋‹ค.
  • ์œ ์‚ฌ๋ฐฐ์—ด์ด๋ฉด์„œ ์ดํ„ฐ๋Ÿฌ๋ธ” ๊ฐ์ฒด์ธ HTMLCollection ๊ฐ์ฒด๋ฅผ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜ํ•˜๋ฉด ๋ฐฐ์—ด์˜ ๊ณ ์ฐจ ํ•จ์ˆ˜(forEach, map, filter, reduce ๋“ฑ)์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ‘พ #1

[...$elems].forEach(elem => elem.calssName = 'blue');

โœ๏ธ NodeList

  • querySelectorAll ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ NodeList๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•จ!!
  • NodeList๊ฐ์ฒด๋Š” ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋…ธ๋“œ ๊ฐ์ฒด์˜ ์ƒํƒœ ๋ณ€๊ฒฝ์„ ๋ฐ˜์˜ํ•˜์ง€ ์•Š์Œ!!
  • NodeList๊ฐ์ฒด๋Š” NodeList.prototype.forEach๋ฅผ ์ƒ์†๋ฐ›์•„ ์‚ฌ์šฉ๊ฐ€๋Šฅ, ์ด์™ธ์—๋„ item, entries, keys, values๋“ฑ ๋ฉ”์„œ๋“œ ์ œ๊ณต
$elems.forEach(elem => elem.calssName = 'blue');
  • childNodes ํ”„๋กœํผํ‹ฐ๊ฐ€ ๋ฐ˜ํ™˜ํ•˜๋Š” NodeList ๊ฐ์ฒด๋Š” ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋…ธ๋“œ ๊ฐ์ฒด์˜ ์ƒํƒœ๋ณ€๊ฒฝ์„ ๋ฐ˜์˜ํ•˜๋Š” live ๊ฐ์ฒด๋กœ ๋™์ž‘ํ•จ!!
  • NodeList๊ฐ์ฒด ๋˜ํ•œ ๋ฐฐ์—ด๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š”๊ฒƒ์ด ์•ˆ์ „ํ•จ!!
  • Array.from๋ฉ”์„œ๋“œ๋‚˜ ์Šคํ”„๋ ˆ๋“œ ๋ฌธ๋ฒ•์œผ๋กœ ๋ฐฐ์—ด๋กœ ๋ณ€ํ™˜ ๊ฐ€๋Šฅ

3. ๋…ธ๋“œ ํƒ์ƒ‰

  • parentNode, previousSibling, firstChild, childNodes ํ”„๋กœํผํ‹ฐ๋Š” Node.prototype์ด ์ œ๊ณตํ•˜๊ณ , ํ”„๋กœํผํ‹ฐํ‚ค์— Element๊ฐ€ ํฌํ•จ๋œ previousElementSibling, nextElementSibling๊ณผ childrenํ”„๋กœํผํ‹ฐ๋Š” Element.prototype์ด ์ œ๊ณต
  • ๋…ธ๋“œ ํƒ์ƒ‰ ํ”„๋กœํผํ‹ฐ๋Š” ๋ชจ๋‘ ์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ์ด๋ฉฐ ํ• ๋‹นํ•˜๋ฉด ์—๋Ÿฌ ์—†์ด ๋ฌด์‹œ ๋จ

๐Ÿ”ต ์ž์‹ ๋…ธ๋“œ ํƒ์ƒ‰

๐ŸŸก Node.prototype.childNodes

  • NodeList๊ฐ์ฒด์— ๋‹ด๊ฒจ ๋ฐ˜ํ™˜
  • ์š”์†Œ ๋…ธ๋“œ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ…์ŠคํŠธ ๋…ธ๋“œ ํฌํ•จ๋  ์ˆ˜ ์žˆ์Œ.

๐ŸŸก Element.prototype.children

  • HTMLCollection๊ฐ์ฒด์— ๋‹ด๊ฒจ ๋ฐ˜ํ™˜
  • ํ…์ŠคํŠธ ๋…ธ๋“œ๊ฐ€ ํฌํ•จ ๋˜์ง€ ์•Š์Œ.

๐ŸŸก Node.prototype.firstChild / Element.prototype.firstElemetChild

  • ์ฒซ๋ฒˆ์งธ ์ž์‹ ๋…ธ๋“œ๋ฅผ ๋ฐ˜ํ™˜

๐ŸŸก Node.prototype.lastChild / Element.prototype.lastElemetChild

  • ๋งˆ์ง€๋ง‰ ์ž์‹ ๋…ธ๋“œ๋ฅผ ๋ฐ˜ํ™˜

๐Ÿ”ต ์ž์‹ ๋…ธ๋“œ ์กด์žฌ ํ™•์ธ

๐ŸŸก Node.prototype.hasChildNodes()

  • ์ž์‹ ๋…ธ๋“œ์˜ ์กด์žฌ ์œ ๋ฌด๋ฅผ ๋ถˆ๋ฆฐ์œผ๋กœ ๋ฐ˜ํ™˜
  • ํ…์ŠคํŠธ ๋…ธ๋“œ๋ฅผ ํฌํ•จํ•˜์—ฌ ์ž์‹๋…ธ๋“œ์˜ ์กด์žฌ๋ฅผ ํ™•์ธ!!!

๐ŸŸก children.length, Element ์ธํ„ฐํŽ˜์ด์Šค์˜ childElementCount ํ”„๋กœํผํ‹ฐ

  • ์š”์†Œ ๋…ธ๋“œ๊ฐ€ ์กด์žฌํ•˜๋Š”์ง€ ํ™•์ธํ•  ๊ฒฝ์šฐ!!
console.log(!!$fruits.chilren.length); // 0 -> false
console.log(!!$fruits.childElementCount); // 0 -> false

๐Ÿ”ต ๋ถ€๋ชจ ๋…ธ๋“œ ํƒ์ƒ‰

๐ŸŸก Node.prototype.parentNode

  • ํ…์ŠคํŠธ ๋…ธ๋“œ๋Š” DOMํŠธ๋ฆฌ์˜ ์ตœ์ข…๋‹จ ๋…ธ๋“œ์ธ ๋ฆฌํ”„ ๋…ธ๋“œ์ด๋ฏ€๋กœ ๋ถ€๋ชจ๋…ธ๋“œ๊ฐ€ ํ…์ŠคํŠธ ๋…ธ๋“œ์ธ ๊ฒฝ์šฐ๋Š” ์—†์Œ~!

๐Ÿ”ต ํ˜•์ œ ๋…ธ๋“œ ํƒ์ƒ‰

๐ŸŸก Node.prototype.previousSibling / Element.prototype.previousElementSibling

  • ๋ถ€๋ชจ๋…ธ๋“œ๊ฐ€ ๊ฐ™์€ ํ˜•์ œ ๋…ธ๋“œ ์ค‘์—์„œ ์ž์‹ ์˜ ์ด์ „ ํ˜•์ œ๋…ธ๋“œ๋ฅผ ํƒ์ƒ‰ํ•˜์—ฌ ๋ฐ˜ํ™˜.

๐ŸŸก Node.prototype.nextSibling / Element.prototype.nextElementSibling

  • ๋ถ€๋ชจ๋…ธ๋“œ๊ฐ€ ๊ฐ™์€ ํ˜•์ œ ๋…ธ๋“œ ์ค‘์—์„œ ์ž์‹ ์˜ ๋‹ค์Œ ํ˜•์ œ๋…ธ๋“œ๋ฅผ ํƒ์ƒ‰ํ•˜์—ฌ ๋ฐ˜ํ™˜.

4. ๋…ธ๋“œ ์ •๋ณด ์ทจ๋“

๐Ÿ”ต Node.prototype.nodeType

  • ๋…ธ๋“œ ํƒ€์ž…์„ ๋‚˜ํƒ€๋‚ด๋Š” ์ƒ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜
  • node.ELMENT_NODE: ์ƒ์ˆ˜ 1 ๋ฐ˜ํ™˜
  • node.TEXT_NODE: ์ƒ์ˆ˜ 3 ๋ฐ˜ํ™˜
  • node.DOCUMENT_NODE: ์ƒ์ˆ˜ 9 ๋ฐ˜ํ™˜

๐Ÿ”ต Node.prototype.nodeName

  • ๋…ธ๋“œ์˜ ์ด๋ฆ„์„ ๋ฌธ์ž์—ด๋กœ ๋ฐ˜ํ™˜
  • ์š”์†Œ ๋…ธ๋“œ: ๋ฌธ์ž์—ด๋กœ ํƒœ๊ทธ ์ด๋ฆ„("LI"๋“ฑ) ๋ฐ˜ํ™˜
  • ํ…์ŠคํŠธ ๋…ธ๋“œ: ๋ฌธ์ž์—ด "#text" ๋ฐ˜ํ™˜
  • ๋ฌธ์„œ ๋…ธ๋“œ: ๋ฌธ์ž์—ด "#document" ๋ฐ˜ํ™˜

5. ์š”์†Œ ๋…ธ๋“œ์˜ ํ…์ŠคํŠธ ์กฐ์ž‘

๐Ÿ”ต textContent

  • setter, getter ๋ชจ๋‘ ์กด์žฌํ•˜๋Š” ์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ๋กœ์„œ ์š”์†Œ ๋…ธ๋“œ์˜ ํ…์ŠคํŠธ์™€ ๋ชจ๋“  ์ž์† ๋…ธ๋“œ์˜ ํ…์ŠคํŠธ๋ฅผ ๋ชจ๋‘ ์ทจ๋“ํ•˜๊ฑฐ๋‚˜ ๋ณ€๊ฒฝ
  • ์š”์†Œ ๋…ธ๋“œ์˜ ์ฝ˜ํ…์ธ  ์˜์—ญ(์‹œ์ž‘ํƒœ๊ทธ์™€ ์ข…๋ฃŒ ํƒœ๊ทธ ์‚ฌ์ด) ๋‚ด์˜ ํ…์ŠคํŠธ๋ฅผ ๋ชจ๋‘ ๋ฐ˜ํ™˜
  • ์ฆ‰, childNodes ํ”„๋กœํผํ‹ฐ๊ฐ€ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋ชจ๋“  ๋…ธ๋“œ๋“ค์˜ ํ…์ŠคํŠธ๋…ธ๋“œ์˜ ๊ฐ’, ์ฆ‰ ํ…์ŠคํŠธ๋ฅผ ๋ชจ๋‘ ๋ฐ˜ํ™˜ํ•จ -> html ๋งˆํฌ์—…์€ ๋ชจ๋‘ ๋ฌด์‹œ!!
  • html
  <div id ="foo">Hello <span>Wold!</span></div>

๐Ÿ‘พ #1 > ๋ฐ˜ํ™˜

  • js
 console.log(document.getElementById('foo').textContent);
// Hello Wold!

๐Ÿ‘พ #2 > ํ• ๋‹น

  • ํ• ๋‹นํ•œ ๋ฌธ์ž์—ด์— HTML ๋งˆํฌ์—…์ด ํฌํ•จ๋˜์–ด ์žˆ๋”๋ผ๋„ ๋ฌธ์ž์—ด ๊ทธ๋Œ€๋กœ ์ธ์‹๋˜์–ด ํ…์ŠคํŠธ๋กœ ์ทจ๊ธ‰๋จ!!! ์ฆ‰, HTML ๋งˆํฌ์—…์ด ํŒŒ์‹ฑ๋˜์ง€ ์•Š์Œ!!
 document.getElementById('foo').textContent = 'Hi <span>Wold!</span>'

๐Ÿ‘‰๐Ÿป ๋ธŒ๋ผ์šฐ์ €์— Hi <span>Wold!</span>์œผ๋กœ ์ถœ๋ ฅ ๋จ!, ๋ฌธ์ž์—ด๋กœ ํ• ๋‹น๋œ ๋งˆํฌ์—…์€ ๋ฐ˜ํ™˜์‹œ์—๋„ ํ…์ŠคํŠธ ํ˜•ํƒœ๋กœ ์ถœ๋ ฅ๋จ~!

profile
์ฆ๊ฒ๊ฒŒ ๊ฐœ๋ฐœํ•˜์ž ์ฅฌ์•ผํ˜ธ๐Ÿ‘ป

0๊ฐœ์˜ ๋Œ“๊ธ€