JavaScript DOM
DOM
: Client side JavaScript์ ํต์ฌ
web browser์ web ๋ฌธ์์ ๋ด์ฉ ๊ฐ์ฒดํ
๊ฐ๊ฐ์ ๊ฐ์ฒด๋ property๋ก ์ ๋ณด๋ฅผ ์ฝ๊ฑฐ๋ ์ค์ ๊ฐ๋ฅ
web browser์ฐฝ์ ์์น๋ฅผ ์๊ณ ์ถ๋ค๋ฉด?
window ๊ฐ์ฒด์ ์ฐฝ์ ์์น๋ฅผ ์๋ ค์ฃผ๋ property๋ฅผ ์ฝ์ด์ค๋ฉด ๋จ
DOM ๋ ๋ฒจ๊ณผ ํผ๋
์ต๊ทผ DOM์ ์ ๋ฆฌ๋๊ณ , ํ์คํ๋จ
๋ ๋ฒจ 0๋ถํฐ ์ต์ ๋ ๋ฒจ๊น์ง ์์
DOM ์ ๊ตฌ์ฑ
: ๊ฐ์ฒดํ -> ๊ตฌ์กฐํ -> ๊ณ์ธต์ผ๋ก ๊ตฌ์ฑ๋จ
ํ์ฌ web browser window
Window ๊ฐ์ฒด
DOM ๋ฌธ์๋ฅผ ํํํ๋ ์ฐฝ
๊ฐ์ ์ต์์ ๊ฐ์ฒด
window ๊ฐ์ฒด๋ ์ ์ญ ๊ฐ์ฒด
๋ค์ํ ํจ์, ์ด๋ฆ๊ณต๊ฐ, ๊ฐ์ฒด ๋ฑ์ด ํฌํจ
Document ๊ฐ์ฒด
ํ์ด์ง ์ฝํ ์ธ ์ ์ง์ ์ ์ญํ
<body>
๋ฑ ๋ค๋ฅธ ์์๋ค์ ํฌํจ
Web browser๋ web ๋ฌธ์๋ฅผ ๋ณด์ฌ์ฃผ๋ ์ฐฝ์ด DOM์ ๊ธฐ์ค
Window ๊ฐ์ฒด ์ด์ธ์ ๊ฐ์ฒด๋ Window ๊ฐ์ฒด์ property๋ก ์ ๊ทผํ๋ค!
Document ๊ฐ์ฒด์ ์ ๊ทผํ๊ณ ์ ํ๋ค๋ฉด
window ๊ฐ์ฑ์ document property ์ด์ฉ
window ๊ฐ์ฒด์ document property๋ Document ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํด
Document ๊ฐ์ฒด๋ web ๋ฌธ์, web ๋ฌธ์์์ HTML ์์ ์ผ๋ถ์ ์ ๊ทผ ๊ฐ๋ฅํจ!
Window์ ์์ฑ
์์ฑ
window ๊ฐ์ฒด์
open method
์ฌ์ฉ
์ฐฝ ๋ซ๊ธฐ
window ๊ฐ์ฒด์
close method
์ฌ์ฉ
alert
alert
๊ฒฝ๊ณ ์์ ์์ฑ
debugging์ฉ์ผ๋ก ์ฃผ๋ก ์ฌ์ฉ
Web ๋ฌธ์ ์ ๊ทผ
getElementByID(id)
ํ๋์ node๋ก return
์ด๊ฒ ์ธ์๋ ๋ค ์ ์ฌ ๋ฐฐ์ด ํํ๋ก return
querySelector()
CSS Selector๋ฅผ ์ด์ฉํ์ฌ node๋ฅผ ์ ํํ์ง๋ง, ์ผ์น๋๋ ์ฒซ ๋ฒ์งธ node ๋ง์ return ํจ
querySelectorAll()
CSS Selector๋ฅผ ์ด์ฉํ์ฌ node๋ฅผ ์ ํํจ
์ผ์นํ๋ ๋ชจ๋ node๋ฅผ array๋ก return
DOM ์กฐ์
Node์ ์ข
๋ฅ์ ๋ฐ๋ผ ํ ์ ์๋ ๊ฒ๋ค
์์ ์์ฑ์ด๋ CSS ์์ฑ ๋ณ๊ฒฝ
์ ๋ ฅ ํผ์ ๊ฐ์ ์ฝ๊ฑฐ๋ ๋ณ๊ฒฝ
๋ฌธ์ ๋ด์ ์๋ก์ด HTML ์์์ content ์ฝ์
document.write()
document.write()
ํจ์ ๋ด๋ถ์ ์ฌ์ฉํ์ฌ ์ด๋ฒคํธ๋ก ํธ์ถ ํ์ ๋
๊ธฐ์กด ๋ฌธ์ ์ ์ฒด๋ฅผ ์ง์๋ฒ๋ฆฌ๊ณ , content๋ฅผ ์ถ๋ ฅํจ
appendChild()
appendChild()
: ํน์ node์ ์์์ผ๋ก node๋ฅผ ์ฝ์ ํ๊ธฐ ์ํด ์ฌ์ฉ
์์ ์์๋ค ์ค ๊ธฐ์กด ์์๋ค ๋์ ์ฝ์ ๋จ
insertBefore()
insertBefore()
: ํน์ ์์ ์์ ์ฝ์ ํ๊ธฐ ์ํด ์ฌ์ฉ
์ฌ์ฉ ๋ฐฉ๋ฒ
๋ถ๋ชจ node.insertBefore(์ฝ์ ํ node, reference node)
replaceChild()
replaceChild()
: ์์ node ์ค ํน์ node๋ฅผ ์๋ก์ด node๋ก ์นํํ๋ ์ญํ
์ฌ์ฉ ๋ฐฉ๋ฒ
๋ถ๋ชจ node.replaceChild(์๋ก์ด node, ๋ฐ๋ node)
getAttribute()
, setAttribute()
getAttribute()
, setAttribute()
: node์ ์์ฑ ๊ฐ์ ๊ฐ์ ธ์ค๊ณ , node์ ์์ฑ์ ์์ฑ ๊ฐ์ผ๋ก ์ค์
์ฌ์ฉ ๋ฐฉ๋ฒ
node.getAttribute("์์ฑ๋ช ")
node.setAttribute("์์ฑ๋ช ", "์์ฑ๊ฐ")
innerHTML
, insertAdjacentHTML
innerHTML
, insertAdjacentHTML
DOM ์กฐ์ ์ ์ฌ์ฉ ๊ฐ๋ฅํ method๋ค
createElement()
,createTextNode()
,appendChild()
๋ฅผ ํ๊บผ๋ฒ์ ์ฒ๋ฆฌํ๋ ํจ๊ณผ์ฌ์ฉ๋ฐฉ๋ฒ
element.innerHTML(text)
element.insertAdjacentHTML(positon, text)
position์ผ๋ก ์ฝ์ ์์น ์ง์ ๋ ๊ฐ๋ฅํจ
Last updated
Was this helpful?