XML์ด๋ HTML ๋ฌธ์์ ์ ๊ทผํ๊ธฐ ์ํ ์ผ์ข ์ ์ธํฐํ์ด์ค์ ๋๋ค.
์ด ๊ฐ์ฒด ๋ชจ๋ธ์ ๋ฌธ์ ๋ด์ ๋ชจ๋ ์์๋ฅผ ์ ์ํ๊ณ , ๊ฐ๊ฐ์ ์์์ ์ ๊ทผํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
๋์ ์๋ฏธ | ์น ๋ธ๋ผ์ฐ์ ๊ฐ HTML ํ์ด์ง๋ฅผ ์ธ์ํ๋ ๋ฐฉ์ |
์ข์ ์๋ฏธ | Document ๊ฐ์ฒด์ ๊ด๋ จ๋ ๊ฐ์ฒด์ ์งํฉ |
- DOM ์์๋ ์ฐ๋ฆฌ๊ฐ ์ ์ํ ์์๋ค์ด Tree ํํ๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค. ์ด๊ฒ์ ์ด์ฉํ์ฌ JS๋ก ์นํ์ด์ง๋ฅผ ์ ์ดํ ์ ์์ต๋๋ค.
- HTML์ <head>, <body> ๊ทธ๋ฆฌ๊ณ <body> ์ ์์ ๊ฐ๊ฐ์ tag ๋ค์ ์์(element)๋ผ๊ณ ๋ถ๋ฅด๊ณ , JS์์๋ ๋ฌธ์ ๊ฐ์ฒด๋ผ๊ณ ๋ถ๋ฆ ๋๋ค.
- DOM์ ์ด์ฉํ๋ฉด HTML ํ๊ทธ๋ฅผ ์ถ๊ฐ, ์์ ,์ญ์ ๋ฑ ํ ์ ์์ต๋๋ค.
DOM Tree
์ ๋ฆฌ
- ๋ธ๋ผ์ฐ์ ๊ฐ HTML ํ์ผ์ ์ฝ์ ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ดํดํ ์ ์๋, ๋ฉ๋ชจ๋ฆฌ์ ๋ณด๊ดํ ์ ์๋ object๋ก ๋ณํ ํฉ๋๋ค.
- object๋ก ๋ณํ ํ, Tree ๊ตฌ์กฐ๋ฅผ ๋ง๋ญ๋๋ค. ์ด๊ฒ์ด DOM ์ ๋๋ค.
์ฐธ๊ณ
'๐ Front-End > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
๋ชจ๋ํ (0) | 2022.11.17 |
---|---|
๋ธ๋ผ์ฐ์ ๊ฐ์ฒด ๋ชจ๋ธ(BOM, Browser Object Model) (0) | 2022.11.17 |
==(๋๋ฑ ์ฐ์ฐ์)์ ===(์ผ์น ์ฐ์ฐ์) (0) | 2022.11.17 |
์๊ฒฉ๋ชจ๋(use strict) (0) | 2022.11.17 |
Async / Await (0) | 2022.11.17 |