🌿 HTML의 파싱 순서

우리는 JavaScript로 HTML 문서를 조작 할 수 있습니다. 항상 document라고 하는 객체를 참조해와서 내부의 HTML 요소들을 참조하는 방식으로 그 문서의 내용을 조작했죠. 그런데 사실 우리는 HTML 요소들을 직접적으로 조작했던 것이 아닙니다. 조금 더 정확하게 이야기 하자면, 우리는 DOM Element 를 조작했던거예요.

DOM

브라우저는 HTML 문서를 파싱하는 과정에서 DOM이라는 트리구조 형태의 객체를 생성하게 됩니다. 트리 구조란, 자료구조의 일종으로 여러개의 노드로 구성되어 있으며 하나의 부모가 여러개의 자식 노드를 가지게 되는 형태를 이야기합니다.

우리는 DOM 트리를 살펴보며 트리구조가 가지게 되는 기본 형태를 살펴보도록 하겠습니다.

DOM 트리 구조는 간단하게 표현하자면 위와 같습니다. 각 요소들은 노드(Node) 라는 이름으로 불리우게 됩니다. 해당 구조를 토대로 DOM 트리를 간단하게 살펴보겠습니다.

DOM 트리

Parent Node : 각 node의 바로 위에 위치한 Node를 Parent Node, 부모 노드라 한다. Child Node : 각 node의 바로 아래에 위치한 Node를 Child Node, 자식 노드라 한다. Leaf Node : 트리구조 내에서 가장 끝단에 위치한, Child Node가 없는 Node를 가리킨다.

그리고 우리는 document를 활용해서 JavaScript 내부로 각각의 Node들을 참조 해 올 수 있었습니다.

아래는 간단한 DOM 관련 메소드 목록입니다.

DOM Method

이외에도 다양한 기능을 가진 메소드들이 존재합니다.

Event

우리는 자바스크립트에서 window.event를 통해 window 객체 내의 evnet 속성으로 접근할 수 있습니다. 여기서 window 객체는 현재의 DOM 문서를 담고 있는 창, 그 자체 를 가리킵니다. window 객체 내부에는 기본적으로 내장되어 있는 함수, 변수, 객체 등이 존재 합니다. 그리고 그 속성 중에는 event 속성이 존재하죠.

Event란, DOM 내에서 발생하는 이벤트를 의미합니다. 여기서 이벤트란, 키보드 버튼을 누르거나 마우스를 클릭 하는 등, 사용자의 액션 을 말합니다. 우리는 이 event 속성을 활용해 사용자의 행동에 따른 결과값을 만들어 낼 수 있습니다. 예를 들어 사용자가 inputbox에 이름을 적고 엔터 버튼을 눌렀을 때 어떠한 함수를 실행하도록 하고 싶다면, 아래와 같은 코드를 작성할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
		<script>
      const printName = function () {
        const inputValue = document.querySelector('#name-input-box');
        if (window.event.keyCode === 13) {
          console.log(inputValue.value);
        }
      };
    </script>
  </head>
  <body>
    <input id="name-input-box" onKeydown="printName()" />
  </body>
</html>

키보드의 Enter 버튼은 13이라는 keyCode 숫자를 가집니다. 해당 input 태그 내에서 버튼이 눌릴 때마다 함수가 실행 되도록 onkeydown 속성에 해당 함수를 할당해주고, 이때 발생하는 event를 체크해서 key code가 13이라면 Enter 버튼이 눌린 것이니까 조건문을 통과해서 실행 이러한 로직으로 각 event 속성에 담긴 데이터를 기반으로 특정 기능들을 실행해 줄 수 있는거죠.

강의 자료