Hello DOM

안녕 DOM?

DOM은 Document Object Model의 약자이다.
우리는 함께 DOM에 대한 튼튼한 기본을 만들어 가보도록 하자.

DOM의 핵심은

• 사용자와 상호 작용(interaction)
  • 사용자는 상호 작용 대상의 총칭이다.
• 동적으로 콘텐츠를 표현
  • 이를 위한 기반 기술을 제공한다.

예를 들어 onClick 이벤트를 통해 이미지에 필터를 씌우고 벗기고의 토글을 작동하게 한다고 하자. 이에 핵심은 DOM의 요소로 하여금 사용자와의 상호 작용(클릭)을 통해서코드를 실행하고, 이의 결과로 동적으로 콘텐츠를 표현한다는 것이다.

여기에서 사용자와 상호 작용을 하는 목적이 무엇이냐 묻는다면, 동적으로 콘텐츠를 표현하기 위함이다라고 답할 수 있다.
브라우저 위에서의 사용자는 참여자이며, 개발자는 연출과 감독의 역할을 맡는다.

DOM은 for 문이 있거나 if 문이 존재하지 않는다. 오로지 프로퍼티와 메소드만이 존재한다. 이러한 프로퍼티와 메소드를 우리는 자바스크립트로 통합하고 융합하여 시나리오가 존재하는 콘텐츠의 흐름을 사용자로 하여금 느끼게 해주는 것이다.

자 이제 시작해보자.

시리즈 목차

• HTML, Canvas, SVG, XML
• Proxy, Promise, Symbol, Class, ArrayBuffer, DataView
• XMLHttpRequest, Fetch, Web Workers
• 실행 컨텍스트, Event Loop
• Node.js