๐Javascript DOM #02 :)
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๊ฐ์ฒด๋ ์ ์ฌ๋ฐฐ์ด๊ฐ์ฒด์ด๋ฉด์ ์ดํฐ๋ฌ๋ธ์ด๋ฉฐ ๋ค์ํ ๋ฉ์๋๋ฅผ ์ ๊ณต
- add(...className): ์ถ๊ฐ
- remove(...className): ์ญ์ , ์์ผ๋ฉด ์๋ฌ์์ด ๋ฌด์๋จ.
- item(index): ์ธ์์ ๋ฐ๋ฅธ ํด๋์ค๊ฐ์ ๋ฐํ.(๋ฌธ์์ด)
- contains(className): ํฌํจ๋์ด ์๋์ง ํ์ธ, ๋ถ๋ฆฐ๊ฐ ๋ฐํ
- replace(oldName,newName): ์ ๋ฌํ ๋ฌธ์์ด๋ก ๋ณํ.
- 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
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐Javascript DOM #02 :)), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@zooyaho/Javascript-DOM-02์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค