TIL

dev-wholยท2021๋…„ 4์›” 26์ผ
0

โœ๐Ÿป DOM(Document Object Model)

DOM์ด๋ž€?

  • HTML ์š”์†Œ๋ฅผ Object(JavaScrpit Object)์ฒ˜๋Ÿผ ์กฐ์ž‘(Manipulation)ํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋ธ์ด๋‹ค.

HTML์— ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ์ ์šฉ

  1. <head> ์•ˆ์ชฝ์— ์‚ฝ์ž…

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPEย html>
    <htmlย lang="en">
    <head>
    ย ย <metaย charset="UTF-8">
    ย ย <metaย http-equiv="X-UA-Compatible"ย content="IE=edge">
    ย ย <title>Document</title>
    ย ย <scriptย src="script.js"></script>
    </head>
    <body>
    ย ย <divย id="hi">hi</div>
    </body>
    </html>
    cs
  2. <body> ํƒœ๊ทธ ๋๋‚˜๊ธฐ ์ „ ์‚ฝ์ž…

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPEย html>
    <htmlย lang="en">
    <head>
    ย ย <metaย charset="UTF-8">
    ย ย <metaย http-equiv="X-UA-Compatible"ย content="IE=edge">
    ย ย <title>Document</title>
    </head>
    <body>
    ย ย <divย id="hi">hi</div>
    ย ย <scriptย src="script.js"></script>
    </body>
    </html>
    cs

์ฐจ์ด์ 

  • ๊ฐ๊ฐ์˜ ๋ฐฉ๋ฒ•์œผ๋กœ ์ฝ˜์†”์— ์ถœ๋ ฅํ•ด๋ณด๋ฉด 1๋ฒˆ์€ "hi"๊ฐ€ ์ถœ๋ ฅ๋˜์ง€ ์•Š๋Š”๋‹ค. ํ•˜์ง€๋งŒ 2๋ฒˆ์€ "hi"๊ฐ€ ์ถœ๋ ฅ๋œ๋‹ค. ๊ทธ ์ด์œ ๋Š” 1๋ฒˆ์€ HTML์˜ ์ •๋ณด๋ฅผ ๋‹ค ์ฝ์ง€ ์•Š์€ ์ƒํƒœ์—์„œ<script>ํƒœ๊ทธ๋ฅผ ๋งŒ๋‚˜ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ์˜ ์ •๋ณด๋ฅผ ์ฝ๋Š”๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ์—์„œ HTML์˜ ์ •๋ณด๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์—†๋‹ค.
    1
    2
    letย msgย =ย document.querySelector('#hi');
    console.log(msg);
    cs

document ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•œ CRUD

  • CREATE
    • createElement ์ง€์ •ํ•œ tagName์˜ HTML ์š”์†Œ๋ฅผ ๋งŒ๋“ ๋‹ค.
  • READ
    • querySelector ์„ ํƒํ•œ ์ผ์น˜ํ•˜๋Š” ๋ฌธ์„œ ๋‚ด ์ฒซ๋ฒˆ์งธ Element ๋ฐ˜ํ™˜
    • querySelectorAll ์„ ํƒ์ž์— ํ•ด๋‹นํ•˜๋Š” ๋ชจ๋“  Element ๋ฐ˜ํ™˜
  • UPDATE
    • textContent ๋…ธ๋“œ์™€ ๊ทธ ์ž์†์˜ ํ…์ŠคํŠธ ์ฝ˜ํ…์ธ  ๋ฐ˜ํ™˜
    • classList.add ์ง€์ •ํ•œ ํด๋ž˜์Šค ์ถ”๊ฐ€
  • DELETE
    • remove ํฌํ•จํ•˜๋Š” ํŠธ๋ฆฌ๋กœ๋ถ€ํ„ฐ ๊ฐ์ฒด๋ฅผ ์ œ๊ฑฐ
    • removeChild ์ž์‹ ๋…ธ๋“œ ์ œ๊ฑฐ

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