JavaScript - Dom

치맨·2023년 2월 17일
0

javascript

목록 보기
14/23
post-thumbnail

목차


Dom이란

  • Document Object Model로서 HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 입니다.

  • 렌더링 엔진에 의해 HTML문서를 파싱하여 노드 객체로 구성된 트리 자료구조 입니다.

  • 더 이해를 쉽게하기 위해 사진으로 확인해보겠습니다.

첫번째 사진의 첫번째 줄부터 한줄씩 읽어서 아래의 사진처럼 트리형식으로 파싱하여, 트리구조를 만든것이 DOM입니다.


Bom이란

  • Bom이란 Browser Object Model의 약자로서 웹페이지를 제외한 웹 브라우저의 모든 내용을 담고 있는 객체 입니다.

  • Dom은 웹페이지에 대한 조작 및 수정을 한다면, Bom은 document가 아닌, window를 제어합니다.

  • 예를들어 다른 웹 페이지로 이동하거나, 화면 관련 정보를 얻거나, 브라우저에 알림창을 띄우거나, AJAX 요청을 보내는 등 수많은 기능이 있습니다.


Node객체란

  • 앞서 DOM은 노드객체로 구성된 트리 자료구조라고 했습니다. 그럼 노드객체란 어떤것 일까요?

  • 총 12개의 종류가 있지만, 중요한 4가지만 알아보도록 하겠습니다.

    1.문서노드 : DOM트리의 최상위에 존재하는 루트 노드로서, document객체를 가리킵니다. 따라서 DOM트리의 노드들에 접근하기 위한 진입점 역할을 합니다.
    위의 사진에서 노란색 상자

    1. 요소노드 : HTML의 요소를 가리키는 객체입니다. 요소노드는 HTML 요소간의 중첩에 의해 부자 관계를 가지며, 이 부자 관계를 통해 정보를 구조화 합니다. 따라서 요소 노드는 문서의 구조를 표현한다고 할 수 있습니다.
      위의 사진에서 보라색 상자

    2. 어트리뷰트 노드 : 어트리뷰트 노드는 HTML요소의 어트리뷰트를 가리키며, 요소노드와 연결 되어있습니다. 단 부모노드와 연결되어 있지 않기 때문에 요소노드와 형제 노드는 아닙니다. 따라서 어트리뷰트 노드에 접근하여 참조 혹은 변경하기 위해서는 요소노드에 접근해야 합니다.
      위의 사진에서 초록색 상자

    3. 텍스트 노드 : HTML요소의 텍스트를 가리키며, 요소노드의 자식 노드입니다. 또한 자식노드를 가질 수 없는 리프노드 입니다. 따라서 텍스트노드에 접근하기 위해서는 부모노드인 요소노드에 접근해야 합니다.
      위의 상자에서 핑크색 상자

DOM API를 통해 동적으로 조작

  • 만약 DOM을 조작하지 않고 처음 HTMl문서 그대로 둔다면 이를 정적페이지 라고 합니다.

  • 만약 JavaScript를 통해 DOM API로 DOM을 조작하게 된다면, 웹페이지를 수정하게 되는데 이를 동적페이지 라고 합니다.

  • 그렇다면 어떻게 DOM을 조작할 수 있을까요??
    DOM API를 통해 노드에 접근하여 HTML의 구조나 내용 또는 스타일을 동적으로 변경할 수 있습니다.

  • 사진을 통해 좀 더 이해하기 쉽도록 설명해보겠습니다.

      1. 우선 처음에 HTML을 아래와 같이 작성합니다.
      1. 웹페이지에서는 아래와 같이 나타납니다.
      1. 친구들의 family Name이라는 div요소에 id를 통해 접근하여, textContent 메소드를 활용하여 내용을 변경해보겠습니다.
      1. 웹페이지에서는 아래와 같이 변경됩니다.

더 많은 메서드와, 다양한 기능들은 공식문서에서 참고해보시면 됩니다.
→ DOM MDN

profile
기본기가 탄탄한 개발자가 되자!

0개의 댓글