๐TIL) JavaScript Dom
DOM ์ด๋?
DOM์ด๋(Document Object Model) ์นํ์ด์ง์ HTML์ ๊ณ์ธตํ์์ผ ํธ๋ฆฌ๊ตฌ์กฐ๋ก ๋ง๋ ๊ฐ์ฒด(Object)๋ชจ๋ธ ์
๋๋ค.
JavaScript๋ ์ด ๋ชจ๋ธ๋ก ์น ํ์ด์ง์ ์ ๊ทผํ๊ณ ํ์ด์ง๋ฅผ ์์ ํ ์ ์์ต๋๋ค. DOM ์ HTML๊ณผ Javasript๋ฅผ ์๋ก ์๋ ์ญํ์ ํ๊ณ ์์ต๋๋ค.
์๋๋ DOMD์ด ํธ๋ฆฌ๊ตฌ์กฐ๋ก ๋์ด ์๊ณ ์ด๋ป๊ฒ ์ฐ๊ฒฐ ๋์ด์๋์ง ์ค๋ช
๋์ด ์๋ ์ฌ์ง์
๋๋ค.
DOM ์ผ๋ก ๋ฌด์์ ํ ์ ์์๊น?
JavaScript ๋ก HTML์ ์ ๊ทผ ํ ์์๋ค๊ณ ํ์๋๋ฐ ์ด๋ป๊ฒ ์ ๊ทผ ํ ์์๋ค๋ ๋ง์ธ์ง ์์๋์?
๋ฐ๋ก document
์ ์ญ๊ฐ์ฒด๋ฅผ ํตํด ์ ๊ทผํ ์ ์์ต๋๋ค.
JavaScript์ document ๊ฐ์ฒด๋ DOM ๊ตฌ์กฐ๋ฅผ ์ ๊ทผํ๋ ๊ด๋ฌธ์ด๋ฉฐ document ๊ฐ์ฒด๋ HTML ๋ฌธ์๋ฅผ ๋ํ๋ธ๋ค๊ณ ๋งํ ์ ์์ต๋๋ค.
์ HTML์ ์ ๊ทผํด์ผ ํ ๊น?
document๊ฐ์ฒด๋ DOMํธ๋ฆฌ์ root node์ ์ ๊ทผํ๊ฒ ํด์ค๋๋ค. ๋ document๊ฐ์ฒด๋ก ์์์ ์ ๊ทผํ๊ฑฐ๋ ์์์ ์์ฑ์๋ ์ ๊ทผ ํ ์ ์์ต๋๋ค ์ฆ class ๋ id๋ฅผ ์ถ๊ฐํ๊ฑฐ๋ css์ style๋ ์์ ํ๊ฑฐ๋ ์ถ๊ฐ๊ฐ ๊ฐ๋ฅํฉ๋๋ค.
์๋์์ ์ฐจ๊ทผ์ฐจ๊ทผ ์ด๋ค ๋ฉ์๋๊ฐ ์๋์ง ์์๋ณด๊ฒ ์ต๋๋ค.
HTML ์์ ์ ๊ทผํ๊ธฐ
- document.getElementsByTagName("ํ๊ทธ์ด๋ฆ")[index๊ฐ]
- document.getElementsByClassName("ํด๋์ค์ด๋ฆ")[index๊ฐ]
- document.getElementsById("์์ด๋ ์ด๋ฆ")
3๊ฐ์ง ๋ฉ์๋ ์ ๋ถ HTML์์์ ์ ๊ทผํ๋ ๋ฉ์๋๋ค ์ ๋๋ค. ๊ทผ๋ฐ ๋ค๋ฅธ์ ๋ค์ด ๋์ ๋ณด์ ๋๋ค.
getElements ๋ getElment ๋ ๋๊ดํธ[ ]
๊ฐ ์๊ณ ์๊ณ ์ฐจ์ด๊ฐ ์์ต๋๋ค.
์ฐจ์ด์ ์ id๋ ๊ณ ์ ๊ฐ ์ฆ ๋ณต์ํ์ด ์๋๊ธฐ ๋๋ฌธ์ ํ๊ทธ์ด๋ฆ๋ง ์ฐ๋ฉด๋์ง๋ง ๋ฐ๋ฉด ํด๋์ค์ด๋ฆ๊ณผ ํ๊ทธ์ด๋ฆ์ ๋ถ๋ฌ์ค๋๊ฑด ์ฌ๋ฌ ๋๊ฐ์ ํ๊ทธ๋ช ์ด๋ ํด๋์ค๋ช ์ด ์ฌ์ ์์ต๋๋ค.
๊ทธ๋์ ์ ์ฌ๋ฐฐ์ด๋ก ๋ถ๋ฌ์ ๋ช๋ฒ์งธ ์์์ ์ ๊ทผํ ์ง ๋๊ดํธ์index
๊ฐ์ ๋ฃ์ด์ค์ผํฉ๋๋ค.
- document.querySelector("")
- document.querySelectorAll("")
์์ 3๊ฐ๋ ๋๊ฐ์ด ์์์ ์ ๊ทผํ๋ ๋ฉ์๋ ์ ๋๋ค๋ง ์์ ๋ฉ์๋ ๋ค์ด๋์ ์ฐจ์ด๊ฐ ์์ต๋๋ค ์์ ๋ฉ์๋๋ค์ ํ๊ทธ์ด๋ฆ, ํด๋์ค์ด๋ฆ ,์์ด๋ ์ด๋ฆ๋ง ์ ๋ ฅ์ด ๊ฐ๋ฅํ๋ค๋ฉด ์ฟผ๋ฆฌ์ ๋ ํฐ๋ ์์์ ์์์์๋ฅผ ๋ถ๋ฌ ์ฌ์ ์์ต๋๋ค
์๋ฅผ ๋ค๊ฒ ์ต๋๋ค
let el = document.querySelector("div.user-panel.main input[name=login]");
์์ ์ ๊ฒฐ๊ณผ๋ ํด๋์ค๊ฐ "user-panel main"์ธ <div>(<div class="user-panel main">)
์์, ์ด๋ฆ์ด "login"์ธ <input> ์ค ์ฒซ ๋ฒ์งธ ์์์ ์ ๊ทผํ๋ ๋ฐฉ๋ฒ์
๋๋ค.
HTML ์์ ์์ ๋ด์ฉ ์ ๊ทผํ๊ธฐ
HTML ์์์ ํ ์คํธ๋ฅผ ๋ค๋ฃจ๋ ๋ฉ์๋ 2๊ฐ์ง๋ฅผ ์์๋ณด๊ฒ ์ต๋๋ค.
- innerText
- innerHTML
๋๊ฐ์ง ์ ๋ถ ๋จ์ํ ํ
์คํธ๋ง ๋ค๋ฃฐ๊ฒฝ์ฐ์๋ ์ฐจ์ด๊ฐ ์ ํ ์์ต๋๋ค.
ํ์ง๋ง ์์ฑ์ ๋ค๋ฃจ๋ ๊ฐ์ด ์๋ก ๋ค๋ฆ
๋๋ค
์์ ์ฝ๋๋ฅผ ํ๋ฒ ๋ด๋ณด๊ฒ ์ต๋๋ค
element.innerText์ html์ ํฌํจํ ๋ฌธ์์ด์ ์
๋ ฅํ๋ฉด
html์ฝ๋๊ฐ ๋ฌธ์์ด ๊ทธ๋๋ก element์์ ํฌํจ๋ฉ๋๋ค.
์์ ๊ฐ์ด element.innerHTML
์์ฑ์ html
์ฝ๋๋ฅผ ์
๋ ฅํ๋ฉด,
html
element
๊ฐ element
์์ ํฌํจ๋๊ฒ ๋ฉ๋๋ค.
์ ์์ ์์ 'innerHTML()'
์ ํด๋ฆญํ๋ฉด,
์
๋ ฅ๋ htmlํ๊ทธ๊ฐ ํด์๋์ด ๋นจ๊ฐ์A ๊ฐ ๋ํ๋๋ ๊ฒ์ ํ์ธ ํ ์ ์์ต๋๋ค.
HTML ์์ ์์ฑํ๊ธฐ
createElement
๋ผ๋ ๋ฉ์๋๋ก ์์๋ฅผ ์์ฑ ๊ฐ๋ฅํฉ๋๋ค. ๋ ์์ฑํ ์์๋ฅผ ๋ถ๋ชจ์์์ ์์์์๋ก ๋ฃ์์ ์๋ appendChuld
๋ฉ์๋๋ ๊ฐ์ด ์์๋ณด๊ฒ ์ต๋๋ค
function createTag() {
// div ํ๊ทธ ๊ฐ์ ธ์ค๊ธฐ
let div = document.getElementsByTagName('div')[0]
// span ํ๊ทธ ์์ฑํ๊ธฐ
let span = document.createElement('span');
// span ํ๊ทธ์ class ์์ฑ ๋ถ์ฌํ๊ณ , class ์ด๋ฆ์ box๋ก ํ๊ธฐ
span.className = 'box';
// spab ํ๊ทธ content์ ์๋
ํ์ธ์ ๋ผ๋ ํ
์คํธ ๋ฃ๊ธฐ
span.innerHTML = '์๋
ํ์ธ์';
// div ํ๊ทธ์ ์์ ๋ง๋ span ํ๊ทธ๋ฅผ ๋ฃ๊ธฐ
div.appendChild(span);
}
์ฐธ๊ณ
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐TIL) JavaScript Dom), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค
https://velog.io/@xodid157/TIL-Dom
์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์
๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐TIL) JavaScript Dom), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@xodid157/TIL-Dom์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค