Dom
-
๐ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive | #2 DOM [์์ ๋ ธ๋ ์ ํํ๊ธฐ]TIL 2022. 5. 25. 16:18
์ฉ์ด ์ ๋ฆฌ - HTMLCollection ๊ฐ์ฒด : ์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด์ด๋ฉด์ ์ดํฐ๋ฌ๋ธ์ด๋ค. ์ธ๋ฑ์ค๋ฅผ ํค ๊ฐ์ผ๋ก ๊ฐ์ง๊ณ ์๊ณ , length๋ฅผ ๊ฐ์ง๊ณ ์๋ค. ๋ฐฐ์ด๊ณผ ๋น์ทํ๊ฒ ์๊ฒผ์ง๋ง ๊ฐ์ฒด์ด๋ค. - NodeList ๊ฐ์ฒด : ์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด์ด๋ฉด์ ์ดํฐ๋ฌ๋ธ์ด๋ค. forEach ๋ฉ์๋๋ฅผ ์ ๊ณตํ๋ค. ์์ ๋ ธ๋ ์ทจ๋ํ๊ธฐ DOM API(ํ๋กํผํฐ, ๋ฉ์๋)๋ฅผ ์ฌ์ฉํ์ฌ html ์ ๋ณ๊ฒฝํ๊ธฐ ์ํด์๋ ์ผ๋จ ๋ณ๊ฒฝํ ๋ ธ๋๋ฅผ ์ ํํ ์ ์์ด์ผ ํ๋ค. Hello ์๋ฅผ ๋ค์ด div ํ๊ทธ ์์ Hello ํ ์คํธ๋ฅผ ๋ณ๊ฒฝํ๊ธฐ ์ํด์๋ div ์์ ๋ ธ๋์ ์ฐ๊ฒฐ๋ ํ ์คํธ ๋ ธ๋๋ฅผ ๋ณ๊ฒฝํด์ผ ํ๋ค. ์ด๋ฅผ ์ํด DOM์ ์ฌ๋ฌ ๊ฐ์ง ๋ฉ์๋๋ค์ ์ ๊ณตํ๋ค. 1. id๋ฅผ ์ด์ฉํ๊ธฐ - method : document.getElementById(); - parame..
-
๐ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive | #1 DOM [DOM ์ด๋?]TIL 2022. 5. 25. 10:46
์ฉ์ด ์ ๋ฆฌ - ํ์ฑ(parsing) : ๋ฌธ์ฅ์ด๋, ๋ฐ์ดํฐ ๋ฌธ์์ด์ ๋ถ์ํ๊ณ ํด๋ถํ์ฌ ์ํ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฝ์๋ด๋ ๊ธฐ์ ์๋ฅผ ๋ค์ด JSON.parse(json) ๋ฉ์๋๋ ์ธ์๋ก ๋ฐ์ json์ ๋ถ์ํ๊ณ ํด๋ถํ์ฌ ๊ฐ์ฒด๋ก ๋ณํํ๋ค. const json = `{"string" : "json ๋ณํ", "result" : "true"}`; const result = JSON.parse(json); console.log(result);//{string: 'json ๋ณํ', result: 'true'} console.log(result.string); //json ๋ณํ console.log(result.result); //true -API(Application Programming Interface) : ๋ฆฌ๋ชจ์ปจ ์ญํ tv..