๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ์ XML
์ด๋ HTML
๋ฌธ์์ ์ ๊ทผํ๊ธฐ ์ํ ์ผ์ข
์ ์ธํฐํ์ด์ค์ด๋ค. DOM
์ ๋ฌธ์์ ๊ตฌ์กฐํ๋ ํํ(structured representation)์ ์ ๊ณตํ๋ฉฐ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ DOM
๊ตฌ์กฐ์ ์ ๊ทผํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ฌ ๊ทธ๋ค์ด ๋ฌธ์ ๊ตฌ์กฐ, ์คํ์ผ, ๋ด์ฉ ๋ฑ์ ๋ณ๊ฒฝํ ์ ์๊ฒ ๋๋๋ค.
DOM
์ html
๋จ์ ํ๋ํ๋๋ฅผ ๊ฐ์ฒด๋ก ์๊ฐํ๋ ๋ชจ๋ธ์ด๋ค. 'div'๋ผ๋ ๊ฐ์ฒด๋ ํ
์คํธ ๋
ธ๋, ์์ ๋
ธ๋ ๋ฑ๋ฑ, ํ์์ ์ด๋ค ๊ฐ์ ๊ฐ์ง๊ณ ์๊ณ , ์ด๋ฐ ๊ตฌ์กฐ๋ฅผ ํธ๋ฆฌ ๊ตฌ์กฐ๋ผ๊ณ ํ๋ค. ๋ง๋ค! DOM
์ ํธ๋ฆฌ๊ตฌ์กฐ์ด๋ค.
์น ํ์ด์ง๋ ์ผ์ข
์ ๋ฌธ์(document)๋ค. ์ด ๋ฌธ์๋ ์น ๋ธ๋ผ์ฐ์ ๋ฅผ ํตํด ๊ทธ ๋ด์ฉ์ด ํด์๋์ด ์น ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ๋ํ๋๊ฑฐ๋ HTML
์์ค ์์ฒด๋ก ๋ํ๋๊ธฐ๋ ํ๋ค. ๋์ผํ ๋ฌธ์๋ฅผ ์ฌ์ฉํ์ฌ ์ด์ฒ๋ผ ๋ค๋ฅธ ํํ๋ก ๋ํ๋ ์ ์๋ค๋ ์ ์ ์ฃผ๋ชฉํ ํ์๊ฐ ์๋ค. DOM
์ ๋์ผํ ๋ฌธ์๋ฅผ ํํํ๊ณ , ์ ์ฅํ๊ณ , ์กฐ์ํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ค. DOM
์ ์น ํ์ด์ง์ ๊ฐ์ฒด ์งํฅ ํํ์ด๋ฉฐ, ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ฐ์ ์คํฌ๋ฆฝํ
์ธ์ด๋ฅผ ์ด์ฉํด DOM
์ ์์ ํ ์ ์๋ค.
์์์ DOM
์ ํธ๋ฆฌ๊ตฌ์กฐ๋ผ๊ณ ์ธ๊ธํ๋ค. DOM
๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ํ๋ก๊ทธ๋๋ฐ์ ์ผ๋ก ํธ๋ฆฌ์ ์ ๊ทผํ ์ ์๋ค. ์ด๋ฅผ ํตํด ๋ฌธ์์ ๊ตฌ์กฐ, ์คํ์ผ, ์ฝํ
์ธ ๋ฅผ ๋ณ๊ฒฝํ ์ ์๋ค. DOM
ํธ๋ฆฌ ๊ตฌ์กฐ๋ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ด์ด ์๋์ ๊ฐ์ด ํ์ธํ ์ ์๋ค.
// ํ์ฌ dom ํธ๋ฆฌ
document
// dom ํธ๋ฆฌ ์ค, body์ ๋ด์ฉ์ ํ์ธ
document.body
// dom ํธ๋ฆฌ ์ค, head์ ๋ด์ฉ์ ํ์ธ
document.head
- document.getElementsByClassName
const content = document.getElementsByClassName("content");
console.log(content);
- document.getElementById
const title = document.getElementById("title");
title.style.backgroundColor = 'yellow';
- document.getElementByTagName
function sayHello (event) {
console.log("hello");
}
const buttons = document.getElementsByTagName("button");
// ์ด ๊ตฌ๋ฌธ์ X! html collection์ ์ ์ฌ ๋ฐฐ์ด์ด๊ธฐ ๋๋ฌธ์ array์ ๋ด์ฅํจ์๋ฅผ ์ธ ์ ์์.
//buttons.map(b => {
//console.log(b);
//});
for (let i=0; i< buttons.length; i++){
// .addEventListener()๋ก ํด๋ฆญ ์ด๋ฒคํธ ์ฐ๊ฒฐ
buttons[i].addEventListener("click", sayHello);
}
์์๋ ๋ง๋ค๊ธฐ๋ง ํ๋ฉด ๋๋๊ฒ ์๋๋ผ ๋ง๋ ๊ฒ์ DOM์ ๋ฃ์ด์ฃผ์ด์ผ ํ๋ค.
- document.createElement()
// ์ ์์ ์์ฑ
const new_div = document.createElement("div");
// ํ์ธํ๊ธฐ ์ํด ์คํ์ผ ์ถ๊ฐ. ๊ทธ๋ฅ div๋ ๋์ ์๋ณด์ด๊ธฐ ๋๋ฌธ.
new_div.style.backgroundColor = "green";
new_div.style.width = "100px";
new_div.style.height = "100px";
// ์์๋ฅผ body์ ์ถ๊ฐ
document.body.appendChild(new_div);
์ฐธ์กฐ > https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://velog.io/@godori/DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80