๋ชฉ๋ก2022/01/24 (7)
whatisthis?
DOM(Document Object Model) - ๋ธ๋ผ์ฐ์ ๊ฐ HTMLํ์ผ์ ์ฝ์ด์ ํ๋ฉด์ ๋์์ฃผ๋ ๊ณผ์ = Critical Rendering Path. >> 1) ๋ธ๋ผ์ฐ์ ๊ฐ HTML๊ณผ CSS๋ฅผ ํ์ฑ(parsing) ใ ก ๋ ๋ํธ๋ฆฌ(Render Tree) ์์ฑ๋จ. 2) ๋ธ๋ผ์ฐ์ ๊ฐ ๋ ๋๋ง(rendering)ํจ. ** ์์ธํ ๋ด์ฉ์ ์ถํ ํฌ์คํ ์์ . etc. ์น๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง(Rendering) ๊ณผ์ - DOM DOM์ ๋ฌด์์ธ๊ฐ? DOM Node์ Element์ ์ฐจ์ด ์ฌํ์๋ณดํ์ ๋ณด์ฅ๋ช ๊ณผ ๋ณด์ฅ๊ฐ๊ฒฉ์ ๊ฐ์ ธ์ค๊ธฐ ์ํด ์นํฌ๋กค๋ง์ ํด๋ณด์๋ค. ์ฌ์ค ์ด ๊ณผ์ ์ ๊ทธ๋ฅ, html parsingํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ html์์ ๋ด๊ฐ ์ํ mywebproject.tistory...
DOM์ ๋ฌด์์ธ๊ฐ? DOM Node์ Element์ ์ฐจ์ด ์ฌํ์๋ณดํ์ ๋ณด์ฅ๋ช ๊ณผ ๋ณด์ฅ๊ฐ๊ฒฉ์ ๊ฐ์ ธ์ค๊ธฐ ์ํด ์นํฌ๋กค๋ง์ ํด๋ณด์๋ค. ์ฌ์ค ์ด ๊ณผ์ ์ ๊ทธ๋ฅ, html parsingํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ html์์ ๋ด๊ฐ ์ํ๋ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๋ ๊ฒ์ด ์ ๋ถ์๋ค. ์ velog.io
Document ๊ฐ์ฒด - Window ๊ฐ์ฒด(=์ ์ญ๊ฐ์ฒด)์ ์ํด์์. - Document๋ HTML์ ๊ดํ ๊ฒ์ ๋ด๋น. (=์นํ์ด์ง) >> ๋๋ถ๋ถ์ ๊ฒ์ด ํ๊ทธ(tag)๋ฅผ ์ ํํ๊ณ ์กฐ์ํ๋๋ฐ ์ฌ์ฉ๋จ. - ์์ ์ ํ >> ์ ํํ ๋ถ๋ถ์ html ์ฝ๋๋ฅผ ๋ฐํ 1) document.getElementById(์์ด๋) document.getElementById('id-name'); // ... ] ๐ก name ์์ฑ : form ์ปจํธ๋กค ์์์ ๊ฐ(value)๋ฅผ ์๋ฒ๋ก ์ ์กํ๊ธฐ ์ํ ์์ฑ. >> class / id / name ์ ์ฐจ์ด์ ์ฌ์ฉ ์์๋ ์๋ ํฌ์คํ ์ฐธ๊ณ ๐ป Html. class์ id, name์ ์ฐจ์ด class vs. id vs. name REFERENCE id, name, class ์์ฑ์ ๋ํ ์ฌ์ฉ..
class vs. id vs. name REFERENCE id, name, class ์์ฑ์ ๋ํ ์ฌ์ฉ๋ฒ์ด ๊ถ๊ธํฉ๋๋ค. ์ ๋ชฉ ๊ทธ๋๋ก id, name, class ์์ฑ์ ๋ํ ์ ํํ ์ฌ์ฉ๋ฒ์ด ๊ถ๊ธํฉ๋๋ค.์ผ๋ฌด ์ ์๋ ๊ฐ์๋ฅผ ๋ณด๋ค๋ณด๋ฉด ์ ์์ฑ์ ๊ต์ฅํ ์์ฃผ ์ฌ์ฉํ์๋๋ฐ๋ฏธ์ ์ ํ๋ค๋ณด๋ฉด ์ ์์ฑ์ ์ฌ์ฉ์ ํด์ผํ๋์ง? ๋๋ ์ด๋ค hashcode.co.kr
1. Window ๊ฐ์ฒด - ๋ธ๋ผ์ฐ์ ์ ์์ / ์๋ฐ์คํฌ๋ฆฝํธ ์์ง / ๋ชจ๋ ๋ณ์๋ฅผ ๋ด๊ณ ์๋ ๊ฐ์ฒด. - ๋ธ๋ผ์ฐ์ ์ ์ฒด๋ฅผ ๋ด๋นํ๋ ๊ฒ = Window ๊ฐ์ฒด- ์น์ฌ์ดํธ๋ง ๋ด๋นํ๋ ๊ฒ = Document ๊ฐ์ฒด (Document๊ฐ์ฒด๋ Window๊ฐ์ฒด ์์ ๋ค์ด์์.) window๊ฐ์ฒด ์๋์๋ ๋ง์ ์์ฑ(property)๊ณผ ๋ฉ์๋(method)๊ฐ ์กด์ฌํจ.๊ทธ์ค์์๋ ๋ํ์ ์ธ ๊ฒ์ ์ดํด๋ณด๋ฉด * ๊ฐ์ฒด : screen , location , history , document ๊ฐ์ฒด * ๋ฉ์๋ : parseInt , isNaN ๋ฑ ์ฌ์ค parseInt๊ฐ์ ๊ฒฝ์ฐ์๋ window.parseInt()๋ผ๊ณ ์์ฑํ์ง ์๊ณ parseInt()๋ผ๊ณ ๋ง ์์ฑํ๋ค. Window ๊ฐ์ฒด๋ ๋ชจ๋ ๊ฐ์ฒด์ ์กฐ์, ์ฆ ์ ์ญ๊ฐ์ฒด(global object)..
Callback ๐ ํจ์(Function) ์๋ฐ์คํฌ๋ฆฝํธ์์ ํจ์๋ ์ผ๊ธ๊ฐ์ฒด์ด๋ค. ์ผ๊ธ ๊ฐ์ฒด(first-class object)๋, ๋ค๋ฅธ ๊ฐ์ฒด๋ค์ ์ผ๋ฐ์ ์ผ๋ก ์ ์ฉ ๊ฐ๋ฅํ ์ฐ์ฐ์ ๋ชจ๋ ์ง์ํ๋ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํจ๋ค. โช ๋ณ์์ ํ ๋น(assignment)ํ ์ ์๋ค. โช ๋ค๋ฅธ ํจ์๋ฅผ ์ธ์(argument)๋ก ์ ๋ฌ๋ฐ์ ์ ์๋ค. โช ๋ค๋ฅธ ํจ์์ ๊ฒฐ๊ณผ๋ก์ return ๋ ์ ์๋ค. โช ์คํ ๋์ค์ ์์ฑ๋ ์ ์๋ค. - ์ฝ๋ฐฑํจ์๋ ์ด์ค์์๋ '๋งค๊ฐ๋ณ์๋ก ์ ๋ฌํ ์ ์๋ค', ์ฆ '๋ค๋ฅธํจ์๋ฅผ ์ธ์๋ก ์ ๋ฌ๋ฐ์ ์ ์๋ค' ๋ ํน์ง์ ์ด์ฉ. ๐ ์ฝ๋ฐฑํจ์(Callback) - ๋ค๋ฅธํจ์์ ๋งค๊ฐ๋ณ์๋ก ๋๊ฒจ์ค ํจ์๋ฅผ ์๋ฏธ. - ๋งค๊ฐ๋ณ์๋ก ๋๊ฒจ๋ฐ์ ํจ์๋ ์ผ๋จ ๋๊ฒจ๋ฐ๊ณ , ๋์ค์ ํธ์ถ(called back)ํ๋ค๋ ์๋ฏธ. ์ฆ, Aํจ์์ ์ธ์..
๋ฐฐ์ด์ ๊ดํ Method 1) ๋ฐฐ์ด.length let array= [1, 2, 3, 4]; array.length; // 4 ๋ฐฐ์ด์ ๊ธธ์ด๋ฅผ ์๋ ค์ค๋ค. ๋ฐฐ์ด์ ์์๊ฐ ์ถ๊ฐ/์ ๊ฑฐ ๋ ๋ ๋ง๋ค ์๋์ผ๋ก ๋ฐ๋๋ค. let array = [1, 2, 3, 4, 5]; array.length; // 5 array.pop(); // pop : ๋งจ ๋์ ์์๋ฅผ ์ ๊ฑฐ array.length; // 4 2) ๋ฐฐ์ด.join(๊ตฌ๋ถ์) ๋ฐฐ์ด์ ํญ๋ชฉ๋ค์ ๊ตฌ๋ถ์๋ฅผ ๊ธฐ์ค์ผ๋ก ํฉ์น ์ ๋ฌธ์์ด ๋ฐํ. ๊ตฌ๋ถ์๋ฅผ ์ ๋ ฅํ์ง ์์ผ๋ฉด ์๋์ผ๋ก ์ฝค๋ง(,)๊ฐ ๋๋ค. let arr = [1, 2, 3]; arr.join(); // "1,2,3" ใ ก default : ์ฝค๋ง(,) arr.join(':'); // "1:2:3" 3) ๋ฐฐ์ด.concat(ํฉ์น ..