JavaScript로 웹 브라우저 조작하기

HTML의 각 태그들을 객체로 바꾸어 구조화한 DOM을 불러와서 웹 브라우저를 조작할 수 있다.

HTML 태그 ⇒ 객체(구조화한 DOM) : 웹 브라우저 조작

1.1. 간단하게 DOM 조작해보기!

아직 DOM이란 것을 배우기 전이지만, 간단하게 어떤 식으로 DOM 요소를 불러와서 조작할 수 있는지 알아보자.

• counter을 만들어보기.

1.2. 브라우저 렌더링 과정 (DOM과 CSSOM)

각 브라우저에는 렌더링 엔진(Rendering Engine)이라는 것이 존재한다. 이것이 DOM 요소를 가져오고, 화면에 보여주는 역할을 한다. 그 과정에 대해 구체적으로 살펴봄으로써, DOM에 대해 이해하고자 한다.

• 렌더링 엔진이란? 렌더링 엔진은 HTML과 CSS, JavaScript를 파싱(parsing)하고 그 결과물을 바탕으로 페이지를 그려내는 역할을 합니다. 각 브라우저는 다양한 엔진을 사용하는데, Chrome과 Opera, Edge는 Blink를, Firefox는 Gecko를, Internet Explorer는 Trident를, Safari는 WebKit을 사용합니다.
  

url을 입력했을 때, 렌더링 엔진의 일처리를 그림으로 표현

⇒ 간단하게 표현한 그림

⇒ 좀 더 구체적인 그림

DOM : Document(웹페이지) Object Model → HTML 태그를 객체로 표현한 것.

CSSOM : CSS Object Model

렌더링 엔진의 일 처리 순서를 글로 표현

1. (Scripting) HTML parser가 HTML을 바탕으로 DOM tree를 그린다.

2. (Scripting) CSS parser가 CSS를 바탕으로 CSSOM tree을 그린다.

3. (Rendering) DOM에 CSSOM을 적용하여(Attachment) Render Tree를 그린다.

4. (Layout) Render Tree를 바탕으로 각 요소가 브라우저 화면에 놓일 위치와 크기를 계산한다.

5. (Painting) Render Tree를 바탕으로 Painting 하여 실제 화면에 렌더링 한다.

• 렌더링 처리 과정을 파악하면 뭐가 좋은가? ⇒ Point! HTML parser와 CSS parser가 일을 적게 하도록 만들고, layout이 덜 발생하도록 만들어야 웹 성능을 증대시킬 수 있다.

  1. 불필요한 html 태그와 css 규칙을 사용하지 않는다.

  2. top, left, width, height 등의 속성을 사용하여 요소를 변경하면 요소를 다시 그리기 때문에 paint 뿐만 아니라 layout부터 다시 발생한다. transform을 활용하면 기존의 것을 이동시키는 것이기에, 다시 그릴 필요 없이, 위치만 이동시켜주면 된다. 그러므로 웹 성능 최적화에 유리하다. (심화)

     [프론트엔드] 성능 최적화 정리

⇒ 결론은 웹사이트를 화면에 보여주는 과정에서 DOM이 생성된다는 것!

1.3. DOM 이란 무엇이고 왜 필요한가?

DOM(Document Object Model, 문서 객체 모델)은 HTML, XML 문서의 Programming interface 이다.

• Programming interface?
  프로그래밍적으로 상호작용 할 수 있게 하는 도구!

• HTML 문서가 상호작용 한다는 것은 뭘까?
  바로 HTML에 접근하여 제어할 수 있게 하는 것!
  그것을 가능케 하는 것이 바로 자바스크립트!

• 즉, DOM은 HTML과 JavaScript가 상호작용할 수 있도록 하는 도구이다!

DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어(JS)가 DOM 구조에 접근할 수 있는 방법(DOM API)을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

• document = 문서 = 웹페이지
• 구조화된 표현이란? - 객체!
• DOM 구조에 접근할 수 있는 방법을 제공? - DOM API
  ex) querySelector, innerText, nodeList, classList, addEventListener
  ⇒ 문서 구조, 스타일, 내용 등을 변경한다!

정리하자면 웹페이지를 마크업한 HTML은 컴퓨터에게 그냥 줄글일 뿐이고, 이를 구조화하기 위하여 HTML parser를 통해 DOM tree를 생성한다. DOM tree는 HTML 태그를 객체로 바꾸어, 태그를 제어할 수 있도록 만든 것이다. 이때 객체의 다양한 프로퍼티와 메소드를(DOM API) 통해 다양한 것을 얻고 제어할 수 있게 된다. 이것이 바로 DOM tree가 필요한 이유이다!!

한 마디로 다시! DOM은 웹 페이지를 제어하기 위해, 웹 페이지를 객체로 구조화한 것!

CSSOM 이란?

CSSOM은 각 요소들의 스타일 정보를 구조화한 표현이다.

1.4. 자주 사용되는 DOM API

다시!

DOM API는 JS에서 HTML에 접근할 수 있는 방법을 제공!

즉, DOM 구조에 접근할 수 있는 방법을 제공!

HTML 태그는 모두 DOM 요소가 되고, DOM API는 DOM 요소를 제어하는 데 사용된다.

제어한다는 것은, DOM 요소를 생성하고, 이동하고, 값을 받아오고, 수정하고 이벤트 리스너를 추가한다.