๐Ÿ“’Javascript DOM #02 :)

13760 ๋‹จ์–ด JavaScriptJavaScript

1. DOM ์กฐ์ž‘

๐Ÿ”ต Element.prototype.innerHTML

  • setter, getter๋ชจ๋‘ ์กด์žฌํ•˜๋Š” ์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ๋กœ์„œ ์š”์†Œ ๋…ธ๋“œ์˜ HTML๋งˆํฌ์—…์„ ์ทจ๋“ํ•˜๊ฑฐ๋‚˜ ๋ณ€๊ฒฝํ•จ.
  • ์š”์†Œ ๋…ธ๋“œ์˜ ์ฝ˜ํ…์ธ  ์˜์—ญ ๋‚ด์— ํฌํ•จ๋œ ๋ชจ๋“  HTML๋งˆํฌ์—…์„ ๋ฌธ์ž์—ด๋กœ ๋ฐ˜ํ™˜ํ•จ!!!
  • ํ• ๋‹น ์‹œ ์š”์†Œ ๋…ธ๋“œ์˜ ๋ชจ๋“  ์ž์‹ ๋…ธ๋“œ๊ฐ€ ์ œ๊ฑฐ๋˜๊ณ  HTML๋งˆํฌ์—…์ด ํŒŒ์‹ฑ๋˜์–ด ์š”์†Œ ๋…ธ๋“œ์˜ ์ž์‹ ๋…ธ๋“œ๋กœ DOM์— ๋ฐ˜์˜!!!

๐Ÿ‘พ #1

  • hyml
<ul id="fruits">
  <li class="apple">Apple</li>
</ul>
  • js
const $fruits = document.getElmentById('fruits');
$fruits.innerHTML += '<li class="banana">Banana</li>';

๐Ÿ‘‰๐Ÿป ์ž์‹ ์š”์†Œ๋ฅผ ๋ชจ๋‘ ์ œ๊ฑฐ ํ›„ apple, banana๋ฅผ ์ถ”๊ฐ€ํ•จ!
๐Ÿ‘‰๐Ÿป ์ž์‹ ๋…ธ๋“œ๊นŒ์ง€ ๋ชจ๋‘ ์ œ๊ฑฐํ•˜๊ณ  ์ƒˆ๋กญ๊ฒŒ ์ž์‹ ๋…ธ๋“œ๋ฅผ ์ƒ์„ฑํ•˜์—ฌ DOM์— ๋ฐ˜์˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํšจ์œจ์ ์ด์ง€ ์•Š์Œ!!!
๐Ÿ‘‰๐Ÿป ์‚ฝ์ž…ํ•  ์œ„์น˜๋ฅผ ์ง€์ •ํ•˜์ง€ ๋ชปํ•จ~!

๐Ÿ”ต Element.prototype.insertAdjacentHTML(position, DOMString)

  • ๊ธฐ์กด ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜์ง€ ์•Š๊ณ  ์œ„์น˜๋ฅผ ์ง€์ •ํ•ด ์ƒˆ๋กœ์šด ์š”์†Œ๋ฅผ ์‚ฝ์ž…ํ•จ.

๐Ÿ”ต ๋…ธ๋“œ ์ƒ์„ฑ๊ณผ ์ถ”๊ฐ€

โœ๏ธ Document.prototype.createElement(tagName)

  • ์š”์†Œ ๋…ธ๋“œ๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ๋ฐ˜ํ™˜. ๋ฌธ์ž์—ด์„ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ
  • ๊ธฐ์กด DOM์— ์ถ”๊ฐ€๋˜์ง€ ์•Š๊ณ  ํ™€๋กœ ์กด์žฌํ•˜๋Š” ์ƒํƒœ์ž„, ๋ณ„๋„์˜ ์ถ”๊ฐ€์ฒ˜๋ฆฌ๊ฐ€ ํ•„์š”

โœ๏ธ Document.prototype.createTextNode(text)

  • ํ…์ŠคํŠธ ๋…ธ๋“œ๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ๋ฐ˜ํ™˜. ๋ฌธ์ž์—ด์„ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ
  • ๊ธฐ์กด DOM์— ์ถ”๊ฐ€๋˜์ง€ ์•Š๊ณ  ํ™€๋กœ ์กด์žฌํ•˜๋Š” ์ƒํƒœ์ž„, ๋ณ„๋„์˜ ์ถ”๊ฐ€์ฒ˜๋ฆฌ๊ฐ€ ํ•„์š”

โœ๏ธ Node.prototype.appendChild(childNode)

  • ๋ฉ”์„œ๋“œ๋Š” ํ˜ธ์ถœํ•œ ๋…ธ๋“œ์˜ ๋งˆ์ง€๋ง‰ ์ž์‹ ๋…ธ๋“œ๋กœ ์ถ”๊ฐ€ํ•จ.
  • ํ…์ŠคํŠธ๋…ธ๋“œ๋„ ์ถ”๊ฐ€ ๊ฐ€๋Šฅ.

๐Ÿ”ต Document.prototype.createDocumentFragment()

  • ๋น„์–ด ์žˆ๋Š” DocumentFragment ๋…ธ๋“œ๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
  • ๋ถˆํ•„์š”ํ•œ ์ปจํ…Œ์ด๋„ˆ ์š”์†Œ(div)๋ฅผ ์ƒ์„ฑํ•˜์ง€ ์•Š๊ณ  ํšจ์œจ์ ์œผ๋กœ ๋ณต์ˆ˜์˜ ๋…ธ๋“œ๋“ค์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Œ!

๐Ÿ”ต Node.prototype.insertBefore(newNode, childNode)

  • ๋ฉ”์„œ๋“œ๋Š” ์ฒซ๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋…ธ๋“œ๋ฅผ ๋‘ ๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋…ธ๋“œ ์•ž์— ์‚ฝ์ž…ํ•จ!

๐Ÿ”ต Node.prototype.cloneNode([deep: true| false])

  • ๋…ธ๋“œ์˜ ์‚ฌ๋ณธ์„ ์ƒ์„ฑํ•˜์—ฌ ๋ฐ˜ํ™˜
  • true: ๊นŠ์€๋ณต์‚ฌ, false: ์–•์€๋ณต์‚ฌ
  • ์ƒ๋žต์‹œ ์–•์€ ๋ณต์‚ฌ์ด๋ฉฐ, ์–•์€ ๋ณต์‚ฌ๋Š” ํ…์ŠคํŠธ๋…ธ๋“œ๋ฅผ ๋ณต์‚ฌํ•˜์ง€ ์•Š์Œ

๐Ÿ”ต Node.prototype.replaceChild(newChild, oldChild)

  • ์ž์‹ ์„ ํ˜ธ์ถœํ•œ ๋…ธ๋“œ์˜ ์ž์‹ ๋…ธ๋“œ๋ฅผ ๋‹ค๋ฅธ ๋…ธ๋“œ๋กœ ๊ต์ฒด
  • oldChild ๋งค๊ฐœ๋ณ€์ˆ˜์— ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ ๋…ธ๋“œ๋Š” replaceChild๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋…ธ๋“œ์˜ ์ž์‹ ๋…ธ๋“œ์—ฌ์•ผ ํ•จ.
  • oldChild๋Š” DOM์—์„œ ์‚ญ์ œ ๋จ.

๐Ÿ”ต Node.prototype.removeChild(child)

  • ์ž์‹๋…ธ๋“œ๊ฐ€ DOM์—์„œ ์‚ญ์ œ๋จ.

2. ์–ดํŠธ๋ฆฌ๋ทฐํŠธ

  • HTML๋ฌธ์„œ๊ฐ€ ํŒŒ์‹ฑ๋  ๋•Œ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ๋…ธ๋“œ๋กœ ๋ณ€ํ™˜๋œ์–ด ์š”์†Œ ๋…ธ๋“œ์™€ ์—ฐ๊ฒฐ๋จ.
  • HTML ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ๋‹น ํ•˜๋‚˜์˜ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ๋…ธ๋“œ๊ฐ€ ์ƒ์„ฑ๋จ.
  • ์–ดํŠธ๋ฆฌ๋ทฐํŠธ์˜ ์ฐธ์กฐ๋Š” ์œ ์‚ฌ๋ฐฐ์—ด ๊ฐ์ฒด์ด์ž ์ดํ„ฐ๋Ÿฌ๋ธ”์ธ NameNodeMap ๊ฐ์ฒด์— ๋‹ด๊ฒจ์„œ ์š”์†Œ๋…ธ๋“œ์˜ attributes ํ”„๋กœํผํ‹ฐ์— ์ €์žฅ๋จ.
  • ์š”์†Œ์˜ ๋ชจ๋“  ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ๋…ธ๋“œ๋Š” ์š”์†Œ ๋…ธ๋“œ์˜ Element.prototype.attributes ํ”„๋กœํผํ‹ฐ๋กœ ์ทจ๋“ํ•  ์ˆ˜ ์žˆ์Œ.
  • attributes ํ”„๋กœํผํ‹ฐ๋Š” getter๋งŒ ์กด์žฌํ•˜๋Š” ์ฝ๊ธฐ์ „์šฉ ์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ์ž„.

๐Ÿ‘พ

  • html
<input id="user" type="text" value="zooyaho">
  • js
const {attributes} = document.getElementById('user');

console.log(attributes.id.value); // user

๐Ÿ”ต Element.prototype.getAttribute/setAttribute

  • attributes ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐธ์กฐํ•˜์ง€ ์•Š๊ณ  ์ทจ๋“,๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•จ.
  • getAttribute(attributeName), setAttribute(attributeName, attributeValue)

๐Ÿ”ต attribute ์กด์žฌ ํ™•์ธ, ์‚ญ์ œ

โœ๏ธ Element.prototype.hasAttribute(attributeName)

  • attribute ์กด์žฌ ํ™•์ธ, ๋ถˆ๋ฆฐ๊ฐ’ ๋ฐ˜ํ™˜

โœ๏ธ Element.prototype.removeAttribute(attributeName)

  • attribute ์‚ญ์ œ

3. data ์–ดํŠธ๋ฆฌ๋ทฐํŠธ์™€ dataset ํ”„๋กœํผํ‹ฐ

  • html ์š”์†Œ์— ์ •์˜ํ•œ ์‚ฌ์šฉ์ž ์ •์˜ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ์™€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ„์— ๋ฐ์ดํ„ฐ๋ฅผ ๊ตํ™˜ํ•  ์ˆ˜ ์žˆ์Œ.
  • data์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋Š” data- ์ ‘๋‘์‚ฌ ๋‹ค์Œ์— ์ž„์˜์˜ ์ด๋ฆ„์„ ๋ถ™์—ฌ ์‚ฌ์šฉ.
  • data ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ๊ฐ’์€ HTMLElement.dataset ํ”„๋กœํผํ‹ฐ๋ฅผ ์ทจ๋“ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, DOMStringMap๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜.
  • DOMStringMap๊ฐ์ฒด๋Š” data- ์ ‘๋‘์‚ฌ ๋‹ค์Œ์— ๋ถ™์ธ ์ด๋ฆ„์„ ์นด๋ฉœ์ผ€์ด์Šค๋กœ ๋ณ€ํ™˜ํ•œ ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Œ.

๐Ÿ‘พ #

  • html
<ul class="users">
  <li id="1" data-user-id="1234" data-role="admin">Lee</li>
  <li id="2" data-user-id="0000" data-role="user">Park</li>
</ul>
  • js
const users = [...document.querySelector('.users').children];
const user = users.find(user => user.dataset.userId === '1234');
console.log(user.dataset.role); // 'admin'

4. ์Šคํƒ€์ผ

๐Ÿ”ต HTMLElement.prototype.style

  • setter/getter ๋ชจ๋‘ ์กด์žฌํ•˜๋Š” ์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ, ์ธ๋ผ์ธ ์Šคํƒ€์ผ์„ ์ทจ๋“ํ•˜๊ฑฐ๋‚˜ ์ถ”๊ฐ€ ๋˜๋Š” ๋ณ€๊ฒฝํ•จ.

๐Ÿ”ต ํด๋ž˜์Šค ์กฐ์ž‘

โœ๏ธ Element.prototype.className

  • setter/getter ๋ชจ๋‘ ์กด์žฌํ•˜๋Š” ์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ, ๋ฌธ์ž์—ด๋กœ ๋ฐ˜ํ™˜
  • ๊ณต๋ฐฑ์œผ๋กœ ๊ตฌ๋ถ„๋œ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํด๋ž˜์Šค๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒฝ์šฐ ๋‹ค๋ฃจ๊ธฐ ๋ถˆํŽธํ•จ.

โœ๏ธ Element.prototype.classList

  • class ์–ดํŠธ๋ฆฌ๋ทฐํŠธ์˜ ์ •๋ณด๋ฅผ ๋‹ด์€ DOMTokenList๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜
  • DOMTokenList๊ฐ์ฒด๋Š” ์œ ์‚ฌ๋ฐฐ์—ด๊ฐ์ฒด์ด๋ฉด์„œ ์ดํ„ฐ๋Ÿฌ๋ธ”์ด๋ฉฐ ๋‹ค์–‘ํ•œ ๋ฉ”์„œ๋“œ๋ฅผ ์ œ๊ณต
  1. add(...className): ์ถ”๊ฐ€
  2. remove(...className): ์‚ญ์ œ, ์—†์œผ๋ฉด ์—๋Ÿฌ์—†์ด ๋ฌด์‹œ๋จ.
  3. item(index): ์ธ์ˆ˜์— ๋”ฐ๋ฅธ ํด๋ž˜์Šค๊ฐ’์„ ๋ฐ˜ํ™˜.(๋ฌธ์ž์—ด)
  4. contains(className): ํฌํ•จ๋˜์–ด ์žˆ๋Š”์ง€ ํ™•์ธ, ๋ถˆ๋ฆฐ๊ฐ’ ๋ฐ˜ํ™˜
  5. replace(oldName,newName): ์ „๋‹ฌํ•œ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜.
  6. toggle(className[,force]): ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ ๋ฌธ์ž์—ด๊ณผ ์ผ์น˜ํ•˜๋Š” ํด๋ž˜์Šค๊ฐ€ ์กด์žฌํ•˜๋ฉด ์ œ๊ฑฐํ•˜๊ณ , ์—†์œผ๋ฉด ์ถ”๊ฐ€ํ•จ.

๐Ÿ”ต ์š”์†Œ์— ์ ์šฉ๋˜์–ด ์žˆ๋Š” CSS ์Šคํƒ€์ผ ์ฐธ์กฐ

  • ํด๋ž˜์Šค๋ฅผ ์ ์šฉํ•œ ์Šคํƒ€์ผ์ด๋‚˜ ์ƒ์†์„ ํ†ตํ•ด ์•”๋ฌต์ ์œผ๋กœ ์ ์šฉ๋œ ์Šคํƒ€์ผ์€ style ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์—†์Œ.

โœ๏ธ window.getComputedStyle(elment[,pseudo])

  • HTML์š”์†Œ์— ์ ์šฉ๋˜์–ด ์žˆ๋Š” ๋ชจ๋“  CSS ์Šคํƒ€์ผ์„ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์Œ.
  • CSSStyleDecleration ๊ฐ์ฒด์— ๋‹ด์•„ ๋ฐ˜ํ™˜!

๐Ÿ‘พ #1

  • html
<div class="box">Box</div>
  • js
const $box = document.quetySelector('.box');
console.log(window.getComputedStyle($box));
// CSSStyleDecleration

console.log(window.getComputedStyle($box).width); // 100px

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ