오랜만에 코드 쳐보니 기분좋다

[프론트공부(devjs)]

dom 어떤식으로 작동하는지 보는거 재밋당 히히

공부시간 약 10배가량 느려지게 되긴했지만 오랜만에 재밋넹 히히

[Asher(choiexe)]

dom 공부가 뭐에요?

[프론트공부(devjs)]

웹사이트를 만들때 html,css,js를 쓰잖아요! 사이트를 클릭하면 먼저 렌더링 엔진이라는 애가 html을 쫙 읽으면서 브라우저가 이해할 수 있는 자료구조인 dom이라는 애를 만들어내요! html에는 body도 있고 div도 있고 여러개 있을텐데, 한줄한줄 다 읽어가면서 상속트리를 만드는거죠.

[프론트공부(devjs)]

이러한 dom은 dom api를 제공하는데, 그 api를 이용해서 html의 구조나 내용, style(css)를 동적으로 고칠 수 있어요 예를들어 제가 어떤 버튼을 누르면, 그 버튼의 색깔을 흰색에서 검정색으로 바꾸고싶어요,. 그러면 일단 선택자로 해당 버튼의 쿼리셀렉터를 받아온다음, 클릭이벤트가 발생했을 때 해당 버튼요소의 style.color ="black"으로 바꾼다 라고 하면 되겠죠?

[프론트공부(devjs)]

html은 dom을, css는 cssom을 만들어요. 그리고 그걸 합쳐서(렌더링) 랜더트리라는걸 만드는데, 그 랜더트리를 저희가 dom api를 이용해서 html을 읽어서(파싱)해서 얻은 dom을 수정(레이아웃 계산, 페인팅)하는거죵 .ㅅ. ! 맞게 설명한지 모르겠는데ㅣ... 현재 이러한 dom api를 공부중입니다 .ㅅ. !!