[WEB] DOM & BOM

yayaya_hojinยท2024๋…„ 2์›” 2์ผ

WEB

๋ชฉ๋ก ๋ณด๊ธฐ
14/16
post-thumbnail

๐Ÿ“ DOM(Document Object Model, ๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ)

DOM์€ HTML ๋ฌธ์„œ๋ฅผ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“  ํŠธ๋ฆฌ ๊ตฌ์กฐ๋กœ ๊ฐ์ฒดํ™”ํ•œ ๊ฒƒ์ด๋‹ค.

dom_img

DOM์€ ๋ชจ๋“  HTML ์š”์†Œ๋ฅผ ๋…ธ๋“œ๋กœ ํ‘œํ˜„ํ•˜์—ฌ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๊ฐ€ DOM ๊ตฌ์กฐ์— ์ ‘๊ทผํ•ด HTML๋กœ ๊ตฌ์„ฑ๋œ ์›น ํŽ˜์ด์ง€๋ฅผ ๋™์ ์œผ๋กœ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค.

DOM์€ ์›น ํŽ˜์ด์ง€ ๊ฐ์ฒด ์ง€ํ–ฅ ํ‘œํ˜„์œผ๋กœ, JavaScript์™€ ๊ฐ™์€ ์Šคํฌ๋ฆฝํŒ… ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•ด DOM์„ ์ˆ˜์ • ํ•  ์ˆ˜ ์žˆ๋‹ค.

๐ŸŒ BOM(Browser Object Model, ๋ธŒ๋ผ์šฐ์ € ๊ฐ์ฒด ๋ชจ๋ธ)

BOM์€ ์›น ๋ธŒ๋ผ์šฐ์ € ์ „์ฒด๋ฅผ ๊ฐ์ฒด๋กœ ๊ด€๋ฆฌํ•˜๋ฉฐ ๋ธŒ๋ผ์šฐ์ €์— ๊ด€ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๊ณ  ๋ธŒ๋ผ์šฐ์ €์˜ ๋ชจ์–‘์„ ์ œ์–ดํ•˜๋Š” ๊ฐ์ฒด์ด๋‹ค.

1) window ๊ฐ์ฒด

  • ๋ธŒ๋ผ์šฐ์ € ์ฐฝ์˜ ์†์„ฑ ๋ฐ ๋ฉ”์†Œ๋“œ์— ์ ‘๊ทผ(alert, confirm, prompt, etc.)

2) document ๊ฐ์ฒด

  • ํ˜„์žฌ ๋ฌธ์„œ์— ๋Œ€ํ•œ ์ •๋ณด ๊ด€๋ฆฌ

3) navigator ๊ฐ์ฒด

  • ๋ธŒ๋ผ์šฐ์ €์˜ ์ข…๋ฅ˜ ๋ฐ ๋ฒ„์ „ ์ •๋ณด ๊ด€๋ฆฌ

4) location ๊ฐ์ฒด

  • ํ˜„์žฌ ํŽ˜์ด์ง€์˜ URL์— ๋Œ€ํ•œ ์ •๋ณด ๊ด€๋ฆฌ(ex. ์ƒˆ๋กœ๊ณ ์นจ, ํ˜„์žฌ ๋ฌธ์„œ์— ์ƒˆ ๋ฌธ์„œ ์ฃผ์†Œ ๊ฐ€์ ธ์˜ค๊ธฐ)

5) history ๊ฐ์ฒด

  • ๋ธŒ๋ผ์šฐ์ €์˜ ์ด๋ ฅ์„ ๊ด€๋ฆฌ(ex. ๋’ค๋กœ๊ฐ€๊ธฐ, ์•ž์œผ๋กœ๊ฐ€๊ธฐ)

6) screen ๊ฐ์ฒด

  • ์‚ฌ์šฉ์ž์˜ ํ™”๋ฉด์— ๋Œ€ํ•œ ์ •๋ณด ์ œ๊ณต(ํ™”๋ฉด ๋„ˆ๋น„, ๋†’์ด, ์ƒ‰์ƒ, etc.)

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