DOM
Last updated
Was this helpful?
Last updated
Was this helpful?
DOM, Docuemnts Object Model์ ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ์ ๋ปํ๋ค. ์ด๋ XML์ด๋ HTML ๋ฌธ์์ ์ ๊ทผํ๊ธฐ ์ํ ์ผ์ข ์ ์ธํฐํ์ด์ค์ด๋ค.
์ด ๊ฐ์ฒด ๋ชจ๋ธ์ ๋ฌธ์ ๋ด์ ๋ชจ๋ ์์๋ฅผ ์ ์ํ๊ณ , ๊ฐ๊ฐ์ ์์์ ์ ๊ทผํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ค.
์ด๋ฌํ DOM์ W3C์ ํ์ค ๊ฐ์ฒด ๋ชจ๋ธ์ด๋ฉฐ, ๋ค์๊ณผ ๊ฐ์ด ๊ณ์ธต ๊ตฌ์กฐ๋ก ํํ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ์ด๋ฌํ ๊ฐ์ฒด ๋ชจ๋ธ์ ์ด์ฉํ์ฌ ๋ค์๊ณผ ๊ฐ์ ์์ ์ ํ ์ ์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ์๋ก์ด HTML ์์๋ ์์ฑ์ ์ถ๊ฐ
์๋ฐ์คํฌ๋ฆฝํธ๋ ์กด์ฌํ๋ HTML ์์๋ ์์ฑ์ ์ ๊ฑฐ
์๋ฐ์คํฌ๋ฆฝํธ๋ HTML ๋ฌธ์์ ๋ชจ๋ HTML ์์๋ฅผ ๋ณ๊ฒฝ
์๋ฐ์คํฌ๋ฆฝํธ๋ HTML ๋ฌธ์์ ๋ชจ๋ HTML ์์ฑ์ ๋ณ๊ฒฝ
์๋ฐ์คํฌ๋ฆฝํธ๋ HTML ๋ฌธ์์ ๋ชจ๋ CSS ์คํ์ผ์ ๋ณ๊ฒฝ
์๋ฐ์คํฌ๋ฆฝํธ๋ HTML ๋ฌธ์์ ์๋ก์ด HTML ์ด๋ฒคํธ๋ฅผ ์ถ๊ฐ
์๋ฐ์คํฌ๋ฆฝํธ๋ HTML ๋ฌธ์์ ๋ชจ๋ HTML ์ด๋ฒคํธ์ ๋ฐ์
HTML ์์๋ฅผ ๋ค๋ฃจ๊ธฐ ์ํด์๋ ์ฐ์ ํด๋น ์์๋ฅผ ์ ํํด์ผ๋ง ํ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์์ ํน์ HTML ์์๋ฅผ ์ ํํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ๋ค.
HTML ํ๊ทธ ์ด๋ฆ(tag name)์ ์ด์ฉํ ์ ํ
์์ด๋(id)๋ฅผ ์ด์ฉํ ์ ํ
ํด๋์ค(class)๋ฅผ ์ด์ฉํ ์ ํ
name ์์ฑ(attribute)์ ์ด์ฉํ ์ ํ
CSS ์ ํ์(selector)๋ฅผ ์ด์ฉํ ์ ํ
HTML ๊ฐ์ฒด ์งํฉ(object collection)์ ์ด์ฉํ ์ ํ
HTML DOM์ ๋ ธ๋(node)๋ผ๊ณ ๋ถ๋ฆฌ๋ ๊ณ์ธต์ ๋จ์์ ์ ๋ณด๋ฅผ ์ ์ฅํ๊ณ ์๋ค. HTML ๋ฌธ์์ ๋ชจ๋ ๊ฒ์ ๋ ธ๋์ด๋ค.
HTML DOM์ ์ด๋ฌํ ๋ ธ๋๋ค์ ์ ์ํ๊ณ , ๊ทธ๋ค ์ฌ์ด์ ๊ด๊ณ๋ฅผ ์ค๋ช ํด ์ฃผ๋ ์ญํ ์ ํ๋ค.
HTML ๋ฌธ์์ ์ ๋ณด๋ ๋ ธ๋ ํธ๋ฆฌ(node tree)๋ผ๊ณ ๋ถ๋ฆฌ๋ ๊ณ์ธต์ ๊ตฌ์กฐ์ ์ ์ฅ๋๋ค. ์ด๋ฌํ ๋ ธ๋ ํธ๋ฆฌ๋ ๋ ธ๋๋ค์ ์งํฉ์ด๋ฉฐ, ๋ ธ๋ ๊ฐ์ ๊ด๊ณ๋ฅผ ๋ณด์ฌ์ค๋ค.
๋ ธ๋ ํธ๋ฆฌ๋ ์ต์์ ๋ ๋ฒจ์ธ ๋ฃจํธ ๋ ธ๋(root node)๋ก๋ถํฐ ์์ํ์ฌ, ๊ฐ์ฅ ๋ฎ์ ๋ ๋ฒจ์ธ ํ ์คํธ ๋ ธ๋๊น์ง ๋ป์ด ๋ด๋ ค๊ฐ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์์๋ HTML DOM์ ์ด์ฉํ์ฌ ๋ ธ๋ ํธ๋ฆฌ์ ํฌํจ๋ ๋ชจ๋ ๋ ธ๋์ ์ ๊ทผํ ์ ์๋ค.