DOM(Document Object Model) ์˜๋ฏธ ๐Ÿ“

์–‘์ฃผ์˜ยท2021๋…„ 9์›” 21์ผ
0

javascript

๋ชฉ๋ก ๋ณด๊ธฐ
25/42

โœ… ๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ (Document Object Model)


๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ์€ XML์ด๋‚˜ HTML ๋ฌธ์„œ์— ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•œ ์ผ์ข…์˜ ์ธํ„ฐํŽ˜์ด์Šค์ด๋‹ค. DOM์€ ๋ฌธ์„œ์˜ ๊ตฌ์กฐํ™”๋œ ํ‘œํ˜„(structured representation)์„ ์ œ๊ณตํ•˜๋ฉฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๊ฐ€ DOM ๊ตฌ์กฐ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•˜์—ฌ ๊ทธ๋“ค์ด ๋ฌธ์„œ ๊ตฌ์กฐ, ์Šคํƒ€์ผ, ๋‚ด์šฉ ๋“ฑ์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋•๋Š”๋‹ค.


DOM์€ html ๋‹จ์œ„ ํ•˜๋‚˜ํ•˜๋‚˜๋ฅผ ๊ฐ์ฒด๋กœ ์ƒ๊ฐํ•˜๋Š” ๋ชจ๋ธ์ด๋‹ค. 'div'๋ผ๋Š” ๊ฐ์ฒด๋Š” ํ…์ŠคํŠธ ๋…ธ๋“œ, ์ž์‹ ๋…ธ๋“œ ๋“ฑ๋“ฑ, ํ•˜์œ„์˜ ์–ด๋–ค ๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ณ , ์ด๋Ÿฐ ๊ตฌ์กฐ๋ฅผ ํŠธ๋ฆฌ ๊ตฌ์กฐ๋ผ๊ณ  ํ•œ๋‹ค. ๋งž๋‹ค! DOM์€ ํŠธ๋ฆฌ๊ตฌ์กฐ์ด๋‹ค.

์›น ํŽ˜์ด์ง€๋Š” ์ผ์ข…์˜ ๋ฌธ์„œ(document)๋‹ค. ์ด ๋ฌธ์„œ๋Š” ์›น ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํ†ตํ•ด ๊ทธ ๋‚ด์šฉ์ด ํ•ด์„๋˜์–ด ์›น ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚˜๊ฑฐ๋‚˜ HTML ์†Œ์Šค ์ž์ฒด๋กœ ๋‚˜ํƒ€๋‚˜๊ธฐ๋„ ํ•œ๋‹ค. ๋™์ผํ•œ ๋ฌธ์„œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด์ฒ˜๋Ÿผ ๋‹ค๋ฅธ ํ˜•ํƒœ๋กœ ๋‚˜ํƒ€๋‚  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์— ์ฃผ๋ชฉํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค. DOM ์€ ๋™์ผํ•œ ๋ฌธ์„œ๋ฅผ ํ‘œํ˜„ํ•˜๊ณ , ์ €์žฅํ•˜๊ณ , ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•œ๋‹ค. DOM ์€ ์›น ํŽ˜์ด์ง€์˜ ๊ฐ์ฒด ์ง€ํ–ฅ ํ‘œํ˜„์ด๋ฉฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ๊ฐ™์€ ์Šคํฌ๋ฆฝํŒ… ์–ธ์–ด๋ฅผ ์ด์šฉํ•ด DOM ์„ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.



โœ… DOM ํŠธ๋ฆฌ ํ™•์ธํ•˜๊ธฐ


์œ„์—์„œ DOM์€ ํŠธ๋ฆฌ๊ตฌ์กฐ๋ผ๊ณ  ์–ธ๊ธ‰ํ–ˆ๋‹ค. DOM ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ ์œผ๋กœ ํŠธ๋ฆฌ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ฌธ์„œ์˜ ๊ตฌ์กฐ, ์Šคํƒ€์ผ, ์ฝ˜ํ…์ธ ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค. DOM ํŠธ๋ฆฌ ๊ตฌ์กฐ๋Š” ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ์—ด์–ด ์•„๋ž˜์™€ ๊ฐ™์ด ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

// ํ˜„์žฌ dom ํŠธ๋ฆฌ
document

// dom ํŠธ๋ฆฌ ์ค‘, body์˜ ๋‚ด์šฉ์„ ํ™•์ธ
document.body

// dom ํŠธ๋ฆฌ ์ค‘, head์˜ ๋‚ด์šฉ์„ ํ™•์ธ
document.head



โœ… ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ DOM ์„ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•


โ—ผ๏ธ document๋กœ DOM์— ์ ‘๊ทผํ•˜๊ธฐ

- 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);
        }

โ—ผ๏ธ document๋กœ DOM ์š”์†Œ ์ถ”๊ฐ€ํ•˜๊ธฐ

์š”์†Œ๋Š” ๋งŒ๋“ค๊ธฐ๋งŒ ํ•˜๋ฉด ๋˜๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ๋งŒ๋“  ๊ฒƒ์„ 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

profile
๋šœ๋ฒ…๋šœ๋ฒ…

0๊ฐœ์˜ ๋Œ“๊ธ€