16-1. ๋(DOM)์ ๊ธฐ๋ณธ ๊ฐ๋
16-1-1. DOM์ ์ญํ ๊ณผ ๊ธฐ๋ณธ ๊ตฌ์กฐ 16-2. ๋ ์กฐ์๊ณผ ๋ณํ16-2-1. ์์ ์ ํ๊ณผ ๋ณ๊ฒฝ16-2-2. ๋์ ์ผ๋ก ์์ ์์ฑ ๋ฐ ์ ๊ฑฐ16-2-3. DOM ๋
ธ๋ ํ์16-2-4. ์คํ์ผ ๋ณ๊ฒฝ๊ณผ ํด๋์ค ์กฐ์
16-1. ๋(DOM)์ ๊ธฐ๋ณธ ๊ฐ๋
16-1-1. DOM์ ์ญํ ๊ณผ ๊ธฐ๋ณธ ๊ตฌ์กฐ
DOM(Document Object Model)์ ๋ฌธ์๊ฐ์ฒด๋ชจ๋ธ๋ก ๊ฐ๋จํ ๋งํ๋ฉด, ์น ๋ฌธ์(HTML, XML)๋ฅผ ์ ์ดํ๊ธฐ ์ํ ์ธํฐํ์ด์ค(API)์ด๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ์ธ์ด๋ก ์์ ๋ด์ ํ
์คํธ๋ฅผ ๋ถ๋ฌ์ค๊ฑฐ๋, ์คํ์ผ(CSS)์ ๋์ ์ผ๋ก ๋ณ๊ฒฝํ๋ ๋ฑ ์น ๋ฌธ์๋ฅผ ๊ฐ์ฒดํํ๋ ๊ฒ์ ๋งํ๋ค. ๋์ ๊ตฌ์ฑ์์๋ ์๋ ๊ทธ๋ฆผ๊ณผ ๊ฐ์ด ํธ๋ฆฌ ํํ ๊ตฌ์กฐ๋ก ํํ๋๋ค.
์ด ๊ตฌ์กฐ๋ฅผ ๋ ํธ๋ฆฌ, ๊ฐ๊ฐ์ ์์๋ฅผ ๋
ธ๋๋ผ๊ณ ํ๋ค. html์ด ๋
ธ๋ ํธ๋ฆฌ์ ์ต์์์ ์๊ณ , root ๋
ธ๋๋ผ๊ณ ํ๋ค. ์๋ ์ฝ๋๋ฅผ ํตํด ๋ณด๋ฉด, ๊ธฐ๋ณธ ๊ตฌ์กฐ๋ฅผ ํ์ธํ ์ ์๋ค.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head> <body> <h1>hello world</h1> <p>์๋ ํ์ธ์.</p> </body> </html>
- ๋ฌธ์ ๋ ธ๋(Document Node): ๋ฌธ์ ์ ์ฒด๋ฅผ ๋ํ๋ด๋ฉฐ, ๋ ํธ๋ฆฌ์ ์ต์์์ ์์นํ๊ณ , ์ต์์ ๋ ธ๋๋ฅผ root ๋ ธ๋๋ผ๊ณ ํ๋ค. html ํ๊ทธ๋ฅผ ๋ํ๋ธ๋ค. head์ body ์์ ๋ ธ๋๊ฐ ์๋ค.
- ์์ ๋ ธ๋(Element Node): HTML ์์๋ฅผ ๋ํ๋ด๋ฉฐ, ๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ํ์ฑํ๋ค. head, title, h1, p ๋ฑ์ด ์์ ๋ ธ๋์ด๋ค. ๋ค๋ฅธ ์์๋ฅผ ์์์ผ๋ก ๊ฐ์ง ์ ์๋ค.
- ํ ์คํธ ๋ ธ๋(Text Node): HTML ์์ ์์ ์๋ ํ ์คํธ๋ฅผ ๋ํ๋ธ๋ค. <h1>hello world</h1>, <p>์๋ ํ์ธ์.</p> ์์ ๋ ธ๋์ ์ค์ ํ ์คํธ๊ฐ ํ ์คํธ ๋ ธ๋์ด๋ค.
- ์์ฑ(Attribute): HTML ์์์ ์์ฑ์ ๋ํ๋ด๋ฉฐ, ์์์ ์ถ๊ฐ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ค. ์๋ฅผ ๋ค์ด img ์์์ src๋ alt ์์ฑ์ ๋งํ๋ค.
์ฆ, ๋ชจ๋ html ์์๋ ๋
ธ๋๋ผ๊ณ ์๊ฐํ๋ฉด ๋๋ค. ๋ชจ๋ ๋
ธ๋๋ ๋ถ๋ชจ ๋
ธ๋์ ์์ ๋
ธ๋ ๊ฐ์ ๊ณ์ธต๊ตฌ์กฐ๋ฅผ ํ์ฑํ๊ณ , ๊ฐ ์์์ ํด๋น ์์์ ์์ฑ์ ๊ฐ์ฒด๋ก ํํํ๋ค.
์ด ๊ฐ์ฒด๋ ํ๋กํผํฐ๋ ๋ฉ์๋๋ฅผ ํตํด์ ์๋ฐ์คํฌ๋ฆฝํธ ์ธ์ด๋ฅผ ์ฌ์ฉํ์ฌ ํ์ด์ง ๋์์ ์ฒ๋ฆฌํ ์ ์๋ค. ์นํ์ด์ง์์ ๋ฐ์ํ๋ ์ด๋ฒคํธ(ํด๋ฆญ, ์
๋ ฅ, ๋ง์ฐ์ค ์ด๋) ๋ฑ์ ๊ฐ์งํ๊ณ , ์ ์ดํ ์ ์๋ค.
๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ด๊ณ , API๊ธฐ ๋๋ฌธ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํด์ ์ ์ดํ ์ ์๋ ๋์์ผ ๋ฟ์ด๊ณ , ๋ค๋ฅธ ์ธ์ด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ฐ์ถฐ์ง๋ฉด ์กฐ์ํ ์ ์๋ค. DOM์ ์ด๋ ๊ฒ ์น ํ์ด์ง์ ๊ตฌ์กฐ๋ฅผ ํ๋ก๊ทธ๋๋ฐ์ ์ผ๋ก ์ ๊ทผํ ์ ์๊ฒ ํด์, ์น ์ ๊ทผ์ฑ์ ๊ฐ์ ํ๊ณ ์น ํ์ค์ ์ค์ํ๋ ๋ฐ ๋์์ ์ค๋ค. ์คํฌ๋ฆฐ ๋ฆฌ๋์ ๊ฐ์ ๋ณด์กฐ ๊ธฐ์ ์ ์ฌ์ฉํ๋ ์ฌ์ฉ์๊ฐ ์น ํ์ด์ง๋ฅผ ๋ ์ฝ๊ฒ ์ดํดํ๊ณ ์ํธ์์ฉํ ์ ์๋๋ก ํ๊ธฐ๋๋ฌธ์ ๋์ ์ดํดํ๊ณ ์ ๋ค๋ค์ผ ํ๋ค.
์๋ ๋ด์ฉ๋ถํฐ ๋์ ์ด๋ป๊ฒ ์ ๊ทผํ๊ณ , ์ฒ๋ฆฌํ๋์ง ํต์ฌ ๋ด์ฉ์ ๋ค๋ค๋ณธ๋ค.
ย
16-2. ๋ ์กฐ์๊ณผ ๋ณํ
16-2-1. ์์ ์ ํ๊ณผ ๋ณ๊ฒฝ
DOM์์ ๊ฐ๊ฐ์ ์์๋ฅผ ์ ํํ๊ณ , ์กฐ์ํ๋ ๋ฐฉ๋ฒ์ document ๊ฐ์ฒด์ ๋ค์ํ ๋ฉ์๋, ํ๋กํผํฐ๋ฅผ ํตํด์ ์ ๊ทผํ ์ ์๋ค. ๊ฐ ์์๋ฅผ ์ ํํ๋ฉด ํด๋น ์์ ๋ด์ฉ์ ์์ฑ๊ฐ ๋ณ๊ฒฝ, ํ
์คํธ ๋ด์ฉ ๋ณ๊ฒฝ, ์คํ์ผ ์ง์ ๋ฐ ๋ณ๊ฒฝ ๋ค์ํ ์กฐ์์ด ๊ฐ๋ฅํ๋ค.
๋จผ์ ๋ํ์ ์ผ๋ก ์ ์ผ ๋ง์ด ์ฐ์ด๋ ๋ฉ์๋๋ document.querySelector() ๊ฐ ์๋ค.
<h1>hello</h1> <h2 class='title'>world</h2> <script> const h1 = document.querySelector('h1'); const h2 = document.querySelector('.title'); h1.innerHTML = '<p>bye</p>'; </script>
document.querySelector๋ ํ๊ฐ์ง ์์๋ฅผ ๋ถ๋ฌ์ค๊ณ , ๋ณ์์ ์ ์ฅํ๋ค. ๊ฐ์ ์์๊ฐ ๋ง์ ๊ฒฝ์ฐ ์ฒซ ๋ฒ์งธ ์์๋ฅผ ๋ถ๋ฌ์จ๋ค. ์์๋ฅผ ๋ถ๋ฌ์ฌ ๋ class๋ .(์จ์ )์, id๋ #(์ต)์ ์์ ์์ ๋ถ์ฌ์ค๋ค. innerHTML ํ๋กํผํฐ๋ html ์์ ์์ฒด๋ฅผ ์ ํํ๊ณ , ์ถ๊ฐํ ๋ ์ฃผ๋ก ์ฌ์ฉํ๋ค. h1 ํ๊ทธ ๋ด์ p ํ๊ทธ๊ฐ ์ถ๊ฐ๋๊ณ , ํ
์คํธ ๋ด์ฉ์ด bye๋ก ๋ณ๊ฒฝ๋๋ ๊ฒ์ด๋ค. ์ด๋ ๊ฒ ๋ฉ์๋์ ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ์ฌ ๋์ ์ ๊ทผํ๊ณ ์์ฑ ๋ณ๊ฒฝ์ ๊ฐ๋จํ๊ฒ ์กฐ์ํ ์ ์๋ค.
ย
querySelector()๊ฐ ํ๋์ ์ ํ์(์์)๋ง ๋ถ๋ฌ์ฌ ์ ์์ด, ์ผ์นํ๋ ์์๊ฐ ์ฌ๋ฌ ๊ฐ์ผ ๊ฒฝ์ฐ ์ฌ์ฉํ๋ ๋ฉ์๋๋ document.querySelectorAll() ์ด ์๋ค.
<p>์๋ ํ์ธ์.</p> <p>์๋ ํ์ธ์.</p> <p>์๋ ํ์ธ์.</p> <script> document.querySelectorAll('p').forEach(item => { item.textContent = '์๋ ํ๊ฐ์ธ์'; }) </script>
querySelectorAll() ์ ์ผ์นํ๋ ๋ชจ๋ ์์๋ฅผ ๋ถ๋ฌ์ฌ ์ ์๋ค.
querySelectorAll()์ NodeList๋ก ๋ฐํ๋๋ฉฐ, ๋ฐฐ์ด์ด ์๋ ์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด์ด๋ค. ๋ฐ๋ผ์ textContent๋ฅผ ์ง์ ์ฌ์ฉํ ์ ์๊ณ , forEach() ๋ฅผ ์ฌ์ฉํ์ฌ querySelectorAll๋ก ์ ํํ ๋ชจ๋ <p> ์์์ ๋ํด ๋ฐ๋ณตํ๊ณ , ๊ฐ ์์์ textContent๋ฅผ ๋ณ๊ฒฝํด์ผ ํ๋ค. textContent ํ๋กํผํฐ๋ ์์์ ๋ด์ฉ์ ๋ณ๊ฒฝํ ๋ ์ฌ์ฉํ๋ค. h1 ํ๊ทธ ๋ด์ ํ
์คํธ๋ฅผ โbyeโ๋ก ๋ณ๊ฒฝํ ๊ฒ์ด๋ค.
ย
์ด์ธ์๋ id ๊ฐ์ ๋ถ๋ฌ์ค๋ document.getElementById ๋ฉ์๋์ class ๊ฐ์ ๋ถ๋ฌ์ค๋ document.getElementsByClassName ๋ฉ์๋๊ฐ ์๋ค.
<div id='wrap'></div> <h1 class='logo'></h1> <script> const div = document.getElementById('wrap'); const logo = document.getElementsByClassName('logo'); console.log(div) console.log(logo) // <div id='wrap'></div> // HTMLCollectionย [h1.logo] </script>
๋ฉ์๋ ๋์๋ฐฉ์์ ๋ฐ๋ฅธ ์ฐจ์ด๋ก ๊ฒฐ๊ณผ๊ฐ ๋ค๋ฅธ ๊ฒ์ ๋ณผ ์ ์๋ค. getElementById ๋ฉ์๋๋ ๋ฌธ์ ๋ด ๊ณ ์ ํ id๋ฅผ ๊ฐ์ง ์์๋ฅผ ํ๋๋ง ๋ถ๋ฌ์์ <div>์์ ์์ฒด๊ฐ ์ถ๋ ฅ ๋๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
๋ฐ๋ฉด getElementsByClassName ๋ฉ์๋๋ ํด๋์ค์ด๋ฆ๊ณผ ์ผ์นํ๋ ๋ชจ๋ ์์๋ฅผ ์ ํํ์ฌ ๋ชจ๋ ์์๋ฅผ ๋ฐฐ์ดํํ์ HTMLCollection ์ผ๋ก ์ถ๋ ฅํ๋ค.
ย
- ์์์ ์์ฑ๊ฐ์ ๋ณ๊ฒฝ,์ถ๊ฐํ๋ ๋ฉ์๋ setAttribute()
<input type='text'/> <script> const input = document.querySelector('input'); input.setAttribute('type', 'checkbox'); </script>
setAttribute(name, value) ์ง์ ๋ ์์์ ์์ฑ๊ฐ์ ๋ณ๊ฒฝํ๋ค.ย ๊ธฐ์กด ์์์ ์์ฑ์ด ์๋ค๋ฉด, ์ง์ ๋ ์ด๋ฆ๊ณผ ๊ฐ์ผ๋ก ์ ์์ฑ์ด ์ถ๊ฐ๋๋ค. type์ด text์์ checkbox๋ก ๋ณ๊ฒฝ๋๋ค.
ย
- ์์์ ์์ฑ๊ฐ์ ๊ฐ์ ธ์ค๋ ๋ฉ์๋ getAttribute()
<div id='wrap'></div> <script> const id = document.getElementById('wrap'); id.getAttribute('id'); // 'wrap' </script>
getAttribute('id') ๋ก ์ฐ๋ฉด ์ธ๋ป getElementById() ๋ฉ์๋์ ๋น์ทํด ๋ณด์ด์ง๋ง, ์์์ ์์ฑ๊ฐ์ ๊ฐ์ ธ์ฌ ๋ ์ฌ์ฉํ๋ค. ๋ฐ๋ผ์ ์์ฑ๊ฐ โwrapโ๋ง ์ถ๋ ฅํ๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
getElementById() ๋ ํ๋๋ฟ์ธ id ์์๋ฅผ ์ง์ ์ ํํ๋ ๊ฒ์ด๋ค.
ย
- ์์์ ํ๊ทธ๋ช ์ ๋ถ๋ฌ์ค๋ ๋ฉ์๋ getElementsByTagName(tagname)
- ์์์ ํน์ ์์ฑ์ ๋ณ๊ฒฝํ๋ ๋ฉ์๋ element.attribute = value
<img src='logo.jpg' alt='' /> <script> const image = document.getElementByTagName('img'); image.src = 'new_logo.png'; </script>
getElementsByTagName() ๋ฉ์๋๋ ํ๊ทธ ๋ช
์ผ๋ก ์์๋ฅผ ๋ถ๋ฌ์จ๋ค. ํ๊ทธ ๋ช
๊ณผ ์ผ์นํ๋ ๋ชจ๋ ์์๋ฅผ ์ ํํ๊ธฐ ๋๋ฌธ์ ์ ์ฌ์ฉ๋์ง ์๋๋ค. ํ์ํ ์์์ ๋ํ ์ ํ์๋ฅผ ๋ถ๋ฌ์ค๋ ค๋ฉด id๋ class๋ฅผ ๋ถ๋ฌ์ค๋ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋๊ฒ ๋ ์ ํํ๊ณ ์์ ํ๋ค.
image.src = 'new_logo.png' ์์์ ํน์ ์์ฑ์ ๋ณ๊ฒฝํ ์ ์์ด ํด๋น ์ฝ๋๋ ์ด๋ฏธ์ง์์์ โsrcโ ์์ฑ์ ๋ณ๊ฒฝํ๋ค. ์ฃผ๋ก ํด๋ฆญ ์ด๋ฒคํธ, ์ ๋๋ฉ์ด์
ํจ๊ณผ๋ฅผ ๋ง๋ค ๋ ์ฌ์ฉํ ์ ์๋ค.
ย
16-2-2. ๋์ ์ผ๋ก ์์ ์์ฑ ๋ฐ ์ ๊ฑฐ
- ๋์ ์ผ๋ก ์์ ์์ฑ
์๋ก์ด HTML ์์๋ฅผ ๋์ ์ผ๋ก ์์ฑํ๋ ๋ฉ์๋ document.Element(tagName) @
์์ ํ๋กํผํฐ๋ก ๋์ ์ผ๋ก ์์ฑํ ์ ์์ง๋ง, ๋ธ๋ผ์ฐ์ ํธํ์ฑ ์ธก๋ฉด์์ ๋๋ถ๋ถ ์ผ๋ฐ์ ์ธ ๊ฒฝ์ฐ๋ document.Element() ๋ฅผ ์ฌ์ฉํ๋ค.
const text = document.createElement('p');
์์ฑํ html ์์ ํ๊ทธ ๋ช
์ ๋ฃ์ด์ฃผ๋ฉด ๋๋ค. ์ฃผ๋ก ์ฌ์ฉ์๊ฐ ๋ฒํผ์ ํด๋ฆญํด์ ์๋ก์ด ์์ดํ
์ ์ถ๊ฐํ๊ฑฐ๋, ์
๋ ฅ์ ๋ฐ๋ผ ์๋ก์ด ๋ฆฌ์คํธ๋ฅผ ๋ง๋ค ๋ ๋ง์ด ์ฌ์ฉ๋๋ค.
ย
- ํ ์คํธ ๋ ธ๋ ์์ฑ
์๋ก์ด ํ
์คํธ ๋
ธ๋๋ฅผ ๋์ ์ผ๋ก ์์ฑํ๋ ๋ฉ์๋ document.createTextNode('์ถ๊ฐํ๋ ํ
์คํธ')
const text = document.createTextNode('hello world!');
document.createTextNode() ๋ฅผ ์ฌ์ฉํ๋ฉด ํ
์คํธ ๋ด์ฉ์ ์กฐ์ํ ์ ์์ด ์
๋ ฅ ํ๋๊ฐ์ ๋ฐ๊พธ๊ณ , ์๋ฌ๋ฉ์์ง๋ฅผ ๋ง๋ค ๋ ์ ์ฉํ๊ฒ ์ฌ์ฉํ ์ ์๋ค.
ย
- ํน์ ์์ ์์์ผ๋ก ์ถ๊ฐ
๋ถ๋ชจ๋
ธ๋๋ฅผ ํตํด ์์ ๋
ธ๋๋ฅผ ์ถ๊ฐํ๋ ๋ฉ์๋ appendChild(newNode)
<ul></ul> <script> const ul = document.querySelector('ul'); const li = document.createElement('li'); ul.appendChild(li) </script>
๋ฉ์๋๋ฅผ ํธ์ถํ ๋ ์ถ๊ฐํ๋ ๋
ธ๋๋ฅผ ์ธ์๋ก ์ ๋ฌํ๋ฉด, ์ด ๋
ธ๋๊ฐ ํน์ ์์์ ์์ ๋
ธ๋๋ก ์ถ๊ฐ๋๋ค. ์ ์์ ๋ HTML์ ul ์์๋ฅผ ๋ถ๋ฌ์ค๊ณ , ๋์ ์ผ๋ก li ์์๋ฅผ ์์ฑํํ appendChild() ๋ก ul์ ์์์ผ๋ก li๋ฅผ ์ถ๊ฐํ ๊ฒ์ ๋ณผ ์ ์๋ค. ์ด์ฒ๋ผ ๋ถ๋ชจ ๋
ธ๋์ ์์ ๋
ธ๋๋ก ์ถ๊ฐ๋๊ณ , ํ๋์ ๋
ธ๋๋ง ์ถ๊ฐํ ์ ์๋ค. ์ฌ๋ฌ ์์๋ฅผ ๋์์ ์ถ๊ฐํ๊ณ ์ถ์ผ๋ฉด append() ๋ฉ์๋๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.
ย
- ํน์ ๋ ธ๋๋ฅผ ์ถ๊ฐํ๋ ๋ฉ์๋ append()
ํ๋ ์ด์์ ๋
ธ๋ ๋๋ ํ
์คํธ๋ฅผ ํน์ ์์ ๋
ธ๋์ ์ถ๊ฐํ๋ค. ์ฌ๋ฌ ์์๋ฅผ ๋์์ ์ถ๊ฐํ ์ ์๊ณ , ์์์ ์์๋ฅผ ์ง์ ํ ์ ์๋ค.
const parent = document.getElementById('wrap'); const child1 = document.createElement('div'); const child2 = document.createElement('h1'); const text = document.createTextNode('hello world!'); parent.append(child1, child2, text);
ย
- ๋์ ์ผ๋ก ์์ ์ ๊ฑฐ
๋ถ๋ชจ ๋
ธ๋๋ฅผ ํตํด ์์ ๋
ธ๋๋ฅผ ์ ๊ฑฐํ๋ ๋ฉ์๋ removeChild(child)
๋ถ๋ชจ ๋
ธ๋์์ ๋ฉ์๋๋ฅผ ํธ์ถํ๊ณ , ์ธ์๋ก ์์๋
ธ๋๋ฅผ ์ง์ ํ๋ฉด ์์ ๋
ธ๋๊ฐ ์ ๊ฑฐ๋๋ค.
<ul> <li></li> </ul> <script> const ul = document.querySelector('ul'); const li = document.querySelector('li'); ul.removeChild(li); </script>
HTML์ ul๊ณผ li ์์๋ฅผ ๋ถ๋ฌ์ค๊ณ , removeChild() ๋ก ul ์์์ ์์ ์์์ธ li๋ฅผ ์ ๊ฑฐํ๋ค. ์์ ์์๋ฅผ ์ง์ ์ง์ ํ์ง ์๊ณ , ํน์ ๋ถ๋ชจ ๋
ธ๋์์ ํ๋์ ์์ ๋
ธ๋๋ฅผ ์ ๊ฑฐํ ๋ ์ฌ์ฉ๋๋ค.
ย
- ํน์ ๋ ธ๋๋ฅผ ์ ๊ฑฐํ๋ ๋ฉ์๋ remove()
ํด๋น ๋
ธ๋ ์์ฒด์์ ๋ฉ์๋๋ฅผ ํธ์ถํ์ฌ ํด๋น ๋
ธ๋๋ฅผ ์ ๊ฑฐํ๋ค. ๋
ธ๋๊ฐ ์ฌ๋ฌ ๊ฐ์ผ ๊ฒฝ์ฐ ๊ฐ๊ฐ remove() ๋ฉ์๋๋ฅผ ํธ์ถํ๋ฉด ๋๋ค.
const ul = document.querySelector('ul'); ul.remove();
ย
16-2-3. DOM ๋ ธ๋ ํ์
- ๋ ธ๋ ์ฌ์ด์ ๊ด๊ณ
๋ ํธ๋ฆฌ์ ๋
ธ๋๋ root ๋
ธ๋ <html>์ ์ธํ๊ณ , ๊ณ์ธต๊ตฌ์กฐ๋ก ๊ฐ ํ๋์ ๋ถ๋ชจ์ ์ฌ๋ฌ ๊ฐ์ ์์์ ๊ฐ์ง๋ค. ๊ฐ์ ๋ถ๋ชจ ๋
ธ๋์ ๊ด๊ณ๋ฅผ sibling์ด๋ผ๊ณ ํ๋ค. DOM ํธ๋ฆฌ์ ๊ณ์ธต๊ด๊ณ๋ฅผ ํ์ํ๋ ํ๋กํผํฐ๊ฐ ์๊ณ , ์ด ํ๋กํผํฐ๋ก DOM ํธ๋ฆฌ ๊ฐ ๋
ธ๋๋ฅผ ํ์ํ ์ ์๋ค.
ย
- ๋ ธ๋๋ฅผ ํ์ํ๋ ํ๋กํผํฐ
- ๋จ์ผ ๋
ธ๋
ํ๋กํผํฐ | ์ค๋ช
|
parentNode | ์์์ ๋ถ๋ชจ ๋
ธ๋๋ฅผ ์ ๊ทผํ๋ค. |
childNodes | ์์์ ๋ชจ๋ ์์ ๋
ธ๋๋ฅผ ์ ๊ทผํ๋ค. NodeList๋ก ๊ฐ์ฒด๋ก ๋ฐํ๋๋ค. |
firstChild | ์์ ๋
ธ๋์์ ์ฒซ๋ฒ์งธ ์์ ๋
ธ๋๋ฅผ ์ ๊ทผํ๋ค. |
lastChild | ์์ ๋
ธ๋์์ ๋ง์ง๋ง ์์ ๋
ธ๋๋ฅผ ์ ๊ทผํ๋ค. |
nextSibling | ๋ถ๋ชจ ๋
ธ๋์ ๋ชจ๋ ์์ ๋
ธ๋์ค ์์ ๋ค์์ ์๋ ๋
ธ๋๋ฅผ ์ ๊ทผํ๋ค. |
previousSibling | ๋ถ๋ชจ ๋
ธ๋์ ๋ชจ๋ ์์ ๋
ธ๋์ค ์์ ์ด์ ์ ์๋ ๋
ธ๋๋ฅผ ์ ๊ทผํ๋ค. |
children | ์์์ ์์ ๋
ธ๋ ๋ชฉ๋ก์ ์ ๊ทผํ๋ค. childNodes ์ ๋ค๋ฅด๊ฒ ํ
์คํธ ๋
ธ๋๋ฅผ ๊ฑด๋๋ด๋ค. |
์์ฃผ ์ฌ์ฉ๋๋ parentNode ํ๋กํผํฐ๋ ํน์ ๋
ธ๋์ ๋ถ๋ชจ๋ฅผ ์ฐพ๊ธฐ ์ ์ฉํ์ฌ ๋ถ๋ชจ ์์์ ๋ด์ฉ์ ๋ณ๊ฒฝํ๋ ๋ฑ ๋ค์ํ ์์
์ ์ํํ ์ ์๋ค.
<div id='parent'> <div id='child'></div> </div> <script> const child = document.getElementById('child'); const parent = child.parendNode; </script>
DOM ํ์์ ํตํด ์น์ ๊ตฌ์กฐ๋ฅผ ์ดํดํ๊ณ , ์ํ๋ ์์์ ์ ๊ทผํ๋ ๊ฒ ๊ฐํธํ๊ณ ํจ๊ณผ์ ์ผ๋ก ์ ์ดํ ์ ์๋ค.
๊ทธ๋ฌ๋ DOM ๋
ธ๋ ํ์์ ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น๊ธฐ ๋๋ฌธ์, ๊ฐ๋ฅํ๋ฉด ์ต์ ํ๋ ์ฟผ๋ฆฌ๋ฉ์๋ querySelector ๋๋ getElementById ๋ฅผ ์ฌ์ฉํ๊ณ , ๋ฐ๋ณต์ ์ธ ํ์์ ์ฃผ์ํด์ผ ํ๋ค.
ย
16-2-4. ์คํ์ผ ๋ณ๊ฒฝ๊ณผ ํด๋์ค ์กฐ์
- DOM ์์์ CSS ์คํ์ผ ํ๋กํผํฐ๋ฅผ ๋ณ๊ฒฝํ๋ ๋ฐฉ๋ฒ element.style.property = value
โpropertyโ๋ ์คํ์ผ ์์ฑ์ ์ด๋ฆ์ด๊ณ , โvalueโ๋ ์์ฑ์ ์ ์ฉํ ๊ฐ์ด๋ค.
const div = document.querySelector('div'); div.style.backgroundColor = 'red';
div ์์๋ฅผ ๋ถ๋ฌ์ค๊ณ , ๋ฐฑ๊ทธ๋ผ์ด๋ ์คํ์ผ ํ๋กํผํฐ๋ฅผ ๋ณ๊ฒฝํ ๊ฒ์ด๋ค. style์ DOM ์์์ ์คํ์ผ ๊ฐ์ฒด์ด๋ฉฐ, โbackgroundColorโ๋ ์คํ์ผ ์์ฑ์ ์ด๋ฆ์ผ๋ก ์นด๋ฉ ์ผ์ด์ค๋ก ์์ฑํด์ผ ํ๊ณ , โredโ๋ ์์ฑ์ ์ ์ฉํ ๊ฐ์ด๋ค.
๋์ ์ผ๋ก ์คํ์ผ์ ๋ณ๊ฒฝํด์ผ ํ ๋ ์๋ฅผ ๋ค์ด, ๋ฒํผ ํด๋ฆญํ ๋ ์คํ์ผ์ ๋ณ๊ฒฝํ๊ฑฐ๋ ์ ๋๋ฉ์ด์
ํจ๊ณผ๋ฅผ ์ฃผ๋ ๋ฑ ์ด๋ฒคํธ๋ฆฌ์ค๋ ํด๋ฆญ ์ด๋ฒคํธ์ ๊ฐ์ด ์ฐ์ด๊ณ , ์์ฃผ ์ฌ์ฉ๋๋ค.
ย
- ์์์ ์๋ก์ด ํด๋์ค๋ฅผ ์ถ๊ฐํ๋ ๋ฉ์๋ element.classList.add(className)
<style> .active { color: red; } </style> <body> <button id='btn'>์๋ ํ์ธ์</button> <script> const btn = document.getElementById('btn'); btn.addEventListener('click', ()=> { btn.classList.add('active'); }); </script> </body>
element.classList ๋ ์๋ ๋จผํธ์ ํด๋์ค ๋ชฉ๋ก์ ์ ๊ทผํ๋ ๊ฐํธํ ๋ฐฉ๋ฒ์ผ๋ก, ์ฝ๊ธฐ ์ ์ฉ ํ๋กํผํฐ์ด๋ค.
๋ฒํผ ์์๋ฅผ ๋ถ๋ฌ์ค๊ณ , ๋ฒํผ์ ํด๋ฆญํ๋ฉด โactiveโํด๋์ค๊ฐ ์ถ๊ฐ๋์ ์คํ์ผ ์ปฌ๋ฌ ์์์ด ๋ณ๊ฒฝ๋๋ค.
add() ๋ฉ์๋๋ ํด๋์ค๋ฅผ ์ถ๊ฐํ๋ ๋ฉ์๋๋ก ํด๋์ค ์ด๋ฆ์ ์ธ์๋ก ๋ฐ๋๋ค. ์ถ๊ฐํ ํด๋์ค๊ฐ ์ฌ๋ฌ ๊ฐ๋ผ๋ฉด btn.classList.add('active','show','toggle') ์ด๋ฐ ์์ผ๋ก ํ๊บผ๋ฒ์ ์ฌ๋ฌ ๊ฐ๋ฅผ ํธ์ถํ๋ฉด ๋๋ค.
์ด๋ฒคํธ๋ฆฌ์ค๋ addEventListener ๋ฑ๋ก์ ์ด๋ฒคํธ ๋ชฉ์ฐจ์์ ๋ค๋ฃฐ ์์ ์ผ๋ก ํด๋ฆญํ ๋ ์คํ์ผ ๋ณ๊ฒฝ ๋ฑ DOM ์์์ ํด๋์ค๋ฅผ ์กฐ์ํ๋๋ฐ ์ฃผ๋ก ๊ฐ์ด ์ฌ์ฉ๋๋ค.
ย
- ์์์์ ํด๋์ค๋ฅผ ์ ๊ฑฐํ๋ ๋ฉ์๋ element.classList.remove(className)
const btn = document.querySelector('.btn'); btn.addEventListener('click', ()=> { btn.classList.remove('btn'); });
โbtnโ ํด๋์ค ์ด๋ฆ์ ๊ฐ์ง ์์๋ฅผ ๋ถ๋ฌ์ค๊ณ , ์์๋ฅผ ํด๋ฆญํ ๋ โbtnโ ํด๋์ค ์ด๋ฆ์ด ์ญ์ ๋๋ค. add() ๋ฉ์๋์ ๋ง์ฐฌ๊ฐ์ง๋ก ์ญ์ ํ ํด๋์ค๊ฐ ์ฌ๋ฌ ๊ฐ๋ผ๋ฉด btn.classList.remove('btn','show','toggle') ํ๊บผ๋ฒ์ ์ฌ๋ฌ ๊ฐ ํธ์ถ์ด ๊ฐ๋ฅํ๋ค.
ย
- ์์์ ํด๋์ค๊ฐ ์์ผ๋ฉด ์ถ๊ฐ, ์์ผ๋ฉด ์ ๊ฑฐ ํ๋ ๋ฉ์๋ element.classList.toggle(className)
<div id='hello' class='toggle'>Hello</div> <div id='bye'>Bye</div> <script> const hello = document.getElementById('hello'); const bye = document.getElementById('bye'); hello.addEventListener('click', ()=>{ hello.classList.toggle('toggle'); }); bye.addEventListener('click', ()=>{ bye.classList.toggle('toggle'); }); </script>
๊ฐ๊ฐ์ div ์์๋ฅผ ๋ถ๋ฌ์์, ์์๋ฅผ ํด๋ฆญ ํ ๋ โtoggleโํด๋์ค ์ด๋ฆ์ด ์๋ค๋ฉด ์ญ์ ๋๊ณ , ์๋ค๋ฉด โtoggleโํด๋์ค๊ฐ ์ถ๊ฐ๋๋ค. โhelloโ๋ ์ด๋ฏธ ์๊ธฐ ๋๋ฌธ์ ์ ๊ฑฐ๋๊ณ , โbyeโ๋ ์์ผ๋ฏ๋ก ํด๋์ค๊ฐ ์ถ๊ฐ๋๋ค.