Search
๐Ÿ“

DOM (Document Object Model)

๐Ÿง‘๐Ÿผโ€๐Ÿš€ 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๋ฅผ ๊ฒฐํ•ฉํ•ด์„œ ๋งŒ๋“ค์–ด ๋‚ด๋Š”๋ฐ ์œ ์šฉํ•˜๋‹ˆ ๊ผญ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”.