DOM์ ์์์ผ ํ๋ ์ด์
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํด html์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ณ ์ถ๋ค๋ฉด?
์นํ์ด์ง์ ๋ณด์ฌ์ง๋ ๋ฐ์ดํฐ๋ฅผ ๋ณ๊ฒฝํ๊ณ ์ถ๋ค๋ฉด?
์ธํฐ๋ ํฐ๋ธํ ์น์ดํ๋ฆฌ์ผ์ด์
์ ๋ง๋ค๊ณ ์ถ๋ค๋ฉด?
๋จ์ํ ์ ๋ณด๋ฅผ ๋ณด์ฌ์ฃผ๋ ์นํ์ด์ง๊ฐ ์๋๋ผ, ๋์ ์ธ ๊ธฐ๋ฅ์ด ์๋ ์น์ดํ๋ฆฌ์ผ์ด์
์ ๋ง๋ค๊ณ ์ถ๋ค๋ฉด, ๋ฌธ์๋ฅผ ์กฐ์ํ ์ ์๊ฒ ํด์ฃผ๋ DOM์ ์์์ผ ํฉ๋๋ค.
์ด ๋ฌธ์๋ฅผ ๋ณด๊ณ ๋๋ฉด
DOM์ด ์ ํ์ํ์ง ๋งํ ์ ์๋ค.
DOM์ ์ฐพ๋ ๋ฐฉ๋ฒ์ ๋ฉ์๋๋ฅผ 4๊ฐ์ง ์ด์ ์ ์ ์๋ค.
DOM์ ๋ณ๊ฒฝ, ์กฐ์ํ๋ ๋ฉ์๋๋ฅผ ์ต์ 2๊ฐ์ง ์ฐพ๊ณ , ์ฌ์ฉํด ๋ณผ ์ ์๋ค.
DOM : Document Object Model
์งํ์ฒ ์ญ์ ๋์ ์ผ๋ก ์ถ๊ฐํ๋ ๊ฒ๊ณผ ๊ฐ์ด ์นํ์ด์ง ๋ฌธ์๋ฅผ ์กฐ์ํ๊ธฐ ์ํด์ ํ์์ ์ผ๋ก ์์์ผ ํ๋ ๊ฒ์ดย DOM์
๋๋ค.ย DOM์ย Document Object Model์ ์ฝ์์ธ๋ฐ์. ๊ตฌ๊ธ์์ DOM์ ๋ํด์ ๊ฒ์ํด๋ณด๋ฉด ์๋์ ๊ฐ์ด ๋์ต๋๋ค.
๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ(Document Object Model)์ HTML, XML ๋ฌธ์์ ํ๋ก๊ทธ๋๋ฐ interface์
๋๋ค. DOM์ ๋ฌธ์์ ๊ตฌ์กฐํ๋ ํํ(structured representation)์ ์ ๊ณตํ๋ฉฐ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ DOM ๊ตฌ์กฐ์ ์ ๊ทผ ํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ฌ ๋ฌธ์ ๊ตฌ์กฐ ๋ฐ ์คํ์ผ, ๋ด์ฉ ๋ฑ์ ๋ณ๊ฒฝํ ์ ์๊ฒ ๋์์ค๋๋ค.
์์๊ฐ์ ์ ์๊ฐ ์ฒ์์๋ ์ ์๋ฟ์ง ์์ ์ ์์ต๋๋ค. ํ์ง๋ง ๋ฏ์ ์ง์๋ ํฌ์ธํธ๋ฅผ ์ก๊ณ ๋ณด๋ฉด ํจ์ฌ ์ดํดํ๊ธฐ ์ฌ์์ง๋๋ฐ์. ์ด ์ ์์์ ์ฐ๋ฆฌ๊ฐ ์ฐ์ ์ ์ผ๋ก ์ฃผ๋ชฉํ ํฌ์ธํธ๊ฐ ์์ต๋๋ค.
DOM์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ DOM ๊ตฌ์กฐ์ ์ ๊ทผํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ฌย ๋ฌธ์ ๊ตฌ์กฐ, ์คํ์ผ, ๋ด์ฉ ๋ฑ์ ๋ณ๊ฒฝํ ์ ์๊ฒ ๋๋๋ค.
์ฆ DOM์ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ฐ์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ ๋ฌธ์์ ๊ตฌ์กฐ์ ์ ๊ทผํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๊ณ , ๋ณ๊ฒฝํ ์ ์๊ฒ ํด์ค๋ค๋ ๊ฒ์
๋๋ค. ์๋ฅผ ๋ค์ด ์ฐ๋ฆฌ๊ฐ frontend์ ๋ํด ๊ฒ์์ ํ๋ค๊ณ ํด๋ด
์๋ค.
๊ฒ์ํ๊ณ ์ถ์ ํค์๋๋ฅผ ์ฒ๋ฆฌํด์ ์๋ฒ์ ์ ์ก์ ํด์ผํ ํ
๋ฐ์. html ๋ฌธ์์ ์๋ ๋ชจ๋ ๋ฌธ์์ด์์ ์ ํค์๋๋ฅผ ๊ฒ์ํด์ ๊ฐ์ ธ์ค๋ ค๋ฉด ๋ถํ์ํ ์์
๋ค์ด ๋๋ฌด ๋ง์์ง ๊ฒ์
๋๋ค. ํ ๋จ์ด๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ์ํด ๋ฌธ์ ์ ์ฒด๋ฅผ ์ค์บํด์ผ ํ๋๊น์. ์ค์ ๋ก ๊ฒ์์ฐฝ๋ง์ผ๋ก ๊ฐ๋จํ ui๋ฅผ ๊ฐ์ง ๊ตฌ๊ธ ๊ฒ์ํ๋ฉด์ ์๋์ฒ๋ผ ์๋ง์ html ํ๊ทธ๋ค๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค.
ํ์ง๋ง DOM์ด ์๊ธฐ ๋๋ฌธ์ ์ฐ๋ฆฌ๋ DOM์ด ์ ๊ณตํ๋ API๋ฅผ ์ด์ฉํด์ ๊ฒ์์ด์ ํด๋นํ๋ ๋ฌธ์์ด์ ๋ณด๋ค ์ฝ๊ฒ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.
DOM API ์ฌ์ฉํ๊ธฐ
๊ฒ์์ด๋ฅผ ์
๋ ฅ๋ฐ๋ DOM์ ์ ๊ทผํ๊ธฐ ์ํด ์๋ ๊ฒ์ input์ ํ๊ทธ ์์๋ฅผ ์ดํด๋ด
์๋ค.
<input id="search" class="search-input-style">
HTML
๋ณต์ฌ
DOM API์๋ getElement ํน์ getElements๋ก ๊ฐ์ฒด๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฉ์๋๋ค์ด ์์ต๋๋ค. ์ด๋ฐ ๋ฉ์๋๋ฅผ ์ด์ฉํด ์ธ์๋ก ์๋ฆฌ๋จผํธ์ ๋ํ ์กฐ๊ฑด์ ์ ๋ฌํ๋ฉด ์กฐ๊ฑด์ ๋ถํฉํ๋ ํน์ ์๋ฆฌ๋จผํธ๋ฅผ ๋ฐํํฉ๋๋ค.ย getElement,ย querySelector๋ ์๋ฆฌ๋จผํธ๋ฅผ ํ ๊ฐ๋ง ๋ฐํํ๊ณ ย getElements,ย querySelectorAll๋ ์๋ฆฌ๋จผํธ ์ฌ๋ฌ ๊ฐ๋ฅผ ๋ฐํํฉ๋๋ค.
DOM ๊ฐ์ฒด๋ฅผ ์ฐพ๋ ํค์๋๋ ํฌ๊ฒ 4๊ฐ์ง ์
๋๋ค.
<div class="mt-5 mb-6 font-jua">
<div class="d-inline-block mr-10 font-size-40">tag</div>
<div class="d-inline-block mr-10 font-size-40">id</div>
<div class="d-inline-block mr-10 font-size-40">class</div>
<div class="d-inline-block font-size-40">cssSelector</div>
</div>
HTML
๋ณต์ฌ
1. tag๋ก ์ฐพ๊ธฐ
document.getElementsByTagName('input')
JavaScript
๋ณต์ฌ
2. id๋ก ์ฐพ๊ธฐ
์๋๊ฐ ๊ฐ์ฅ ๋น ๋ฅธ ํน์ง์ ๊ฐ์ง
document.getElementById('search')
JavaScript
๋ณต์ฌ
3. className์ผ๋ก ์ฐพ๊ธฐ
document.getElementsByClassName('search-input-style')
JavaScript
๋ณต์ฌ
4. cssSelector๋ก ์ฐพ๊ธฐ
์ผ์นํ๋ย ์ฒซ๋ฒ์งธย ์๋ฆฌ๋จผํธ
document.querySelector('.search-input-style')
JavaScript
๋ณต์ฌ
์ผ์นํ๋ย ๋ชจ๋ ย ์๋ฆฌ๋จผํธ
document.querySelectorAll('.search-input-style')
JavaScript
๋ณต์ฌ
์ ๋ฆฌ
๊ทธ๋์ DOM์
HTML์ ์ํ API์ด๋ฉด์
HTML์ ํ์ํ ์ ์๊ณ
HTML์ ๊ตฌ์กฐ๋ฅผ ๋ฐ๊ฟ ์๋ ์์ต๋๋ค.
์ฐธ๊ณ ๋งํฌ
โข
Template literalsย ย (opens new window)ES6์ Template Literals ๋ฌธ๋ฒ์ ๋ํ ๊ธ์
๋๋ค. html template๊ณผ data๋ฅผ ๊ฒฐํฉํด์ ๋ง๋ค์ด ๋ด๋๋ฐ ์ ์ฉํ๋ ๊ผญ ์ฐธ๊ณ ํด์ฃผ์ธ์.