๐Javascript DOM #01 :)
9120 ๋จ์ด JavaScriptJavaScript
#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 ๋ฑ)์ ์ฌ์ฉํ ์ ์๋ค.
DOM์ HTML๋ฌธ์์ ๊ณ์ธต์ ๊ตฌ์กฐ์ ์ ๋ณด๋ฅผ ํํํ๋ฉฐ ์ด๋ฅผ ์์ดํ ์ ์๋ API, ์ฆ ํ๋ฌํฌํฐ์ ๋ฉ์๋๋ฅผ ์ ๊ณตํ๋ ํธ๋ฆฌ์๋ฃ๊ตฌ์กฐ๋ค.
- ์ธ์๋ก ์ ๋ฌํ id ์ดํธ๋ฆฌ๋ทฐํธ ๊ฐ์ ๊ฐ๋ ํ๋์ ์์ ๋ ธ๋๋ฅผ ํ์ํ์ฌ ๋ฐํ
- id๋ฅผ ๊ฐ๋ HTML์์๊ฐ ์กด์ฌํ์ง ์์ ๊ฒฝ์ฐ null์ ๋ฐํ
- id๊ฐ๊ณผ ๋์ผํ ์ด๋ฆ์ ์ ์ญ ๋ณ์๊ฐ ์๋ฌต์ ์ผ๋ก ์ ์ธ๋๊ณ ํด๋น ๋ ธ๋ ๊ฐ์ฒด๊ฐ ํ ๋น๋๋ ๋ถ์ํจ๊ณผ๊ฐ ์์.
- ์ธ์๋ก ์ ๋ฌํ ํ๊ทธ ์ด๋ฆ์ ๊ฐ๋ ๋ชจ๋ ์์ ๋ ธ๋๋ค์ ํ์ํ์ฌ ๋ฐํ
- DOM๊ฐ์ฒด์ธ HTMLCollection ๊ฐ์ฒด๋ฅผ ๋ฐํ
- Element.prototype.getElementsByTagName() ๋ฉ์๋๋ ํน์ ์์๋ฅผ ํตํด ํธ์ถํ๋ฉฐ, ํน์ ์์ ๋ ธ๋์ ๋ ธ๋์ค์์ ์์ ๋ ธ๋๋ฅผ ํ์ํ์ฌ ๋ฐํ
- ์ธ์๋ก ์ ๋ฌ๋ ํ๊ทธ ์ด๋ฆ์ ๊ฐ๋ ์์๊ฐ ์กด์ฌํ์ง ์๋ ๊ฒฝ์ฐ ๋น HTMLCollection ๊ฐ์ฒด๋ฅผ ๋ฐํ
- ์ธ์๋ก ์ ๋ฌํ class ์ดํธ๋ฆฌ๋ทฐํธ ๊ฐ์ ๊ฐ๋ ํ๋์ ์์ ๋ ธ๋๋ฅผ ํ์ํ์ฌ ๋ฐํ
- DOM๊ฐ์ฒด์ธ HTMLCollection ๊ฐ์ฒด๋ฅผ ๋ฐํ
- Element.prototype.getElementsByClassName() ๋ฉ์๋๋ ํน์ ์์๋ฅผ ํตํด ํธ์ถํ๋ฉฐ, ํน์ ์์ ๋ ธ๋์ ๋ ธ๋์ค์์ ์์ ๋ ธ๋๋ฅผ ํ์ํ์ฌ ๋ฐํ
- ์ธ์๋ก ์ ๋ฌ๋ ํ๊ทธ ์ด๋ฆ์ ๊ฐ๋ ์์๊ฐ ์กด์ฌํ์ง ์๋ ๊ฒฝ์ฐ ๋น HTMLCollection ๊ฐ์ฒด๋ฅผ ๋ฐํ
- ์ธ์๋ก ์ ๋ฌํ css์ ํ์๋ฅผ ๋ง์กฑ์ํค๋ ์์๋ ธ๋๊ฐ ์กด์ฌํ์ง ์๋ ๊ฒฝ์ฐ null ๋ฐํ
- ์ธ์๋ก ์ ๋ฌํ css์ ํ์๊ฐ ๋ฌธ๋ฒ์ ๋ง์ง ์๋ ๊ฒฝ์ฐ DOMException ์๋ฌ ๋ฐ์
- DOM ์ปฌ๋ ์ ๊ฐ์ฒด์ธ NodeList ๊ฐ์ฒด๋ฅผ ๋ฐํ.
- ์ธ์๋ก ์ ๋ฌํ css์ ํ์๊ฐ ๋ฌธ๋ฒ์ ๋ง์ง ์๋ ๊ฒฝ์ฐ ๋น NodeList๊ฐ์ฒด๋ฅผ ๋ฐํ
- ํน์ ์์ ๋ ธ๋๋ฅผ ์ทจ๋ํ ์ ์๋์ง ํ์ธ
- ์ด๋ฒคํธ ์์ ์ ์ ์ฉ
- 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>์ผ๋ก ์ถ๋ ฅ ๋จ!, ๋ฌธ์์ด๋ก ํ ๋น๋ ๋งํฌ์ ์ ๋ฐํ์์๋ ํ ์คํธ ํํ๋ก ์ถ๋ ฅ๋จ~!
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐Javascript DOM #01 :)), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@zooyaho/Javascript-DOM-01์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค