DOM이란?

프로그래밍 공부 일기



2020년 9월 9일
JS에 대해 조사해 가는 동안 DOM을 알고, JS를 다루는데 있어서 절대로 알지 않으면 안 되는 구조라고 생각했기 때문에 정리한다.

DOM이란?



Document Object Model의 약어로 「돔」이라고 불리며, HTML이나 XML 문서를 취급하기 위한 API. 즉, 프로그램으로부터 HTML이나 XML을 자유롭게 조작하기 위한 구조. ( API는 여기에 요약되어 있습니다. )
DOM에서는 HTML이나 XML문서를 노드라고 하는 계층적인 구조로서 식별해, JS등의 다양한 프로그래밍 언어나 스크립트로부터 취급하고 싶은 노드를 특정해 조작할 수 있도록 하는 구조를 제공한다.

특징



DOM에는 다음의 3가지 특징이 있다.
  • 트리 구조라고하는 계층 구조를 가지는
  • 각각 노드에서 설명합니다
  • 웹 페이지와 JS와 같은 프로그래밍 언어를 연결합니다

  • 계층 구조를 취하다



    계층 구조는 조직도적인 것.
    HTML의 계층 구조는 다음과 같다. 아래의 예에서는 <body> 를 정점으로서 아래에 몇개의 <section><p> 로 구성되어 있다. 이것은 HTML로 계층 구조를 구축한 경우의 일례이며, 이 계층 구조를 정의하고 있는 것이 DOM이라고 하는 구조를 사용하고 있다.



    각 요소는 노드로 표현



    DOM에서는 노드라고 하는 용어가 나온다.
    다음과 같이 노드는 각 요소 자체를 나타냅니다. 특정 노드를 기준으로 하면 그 위에 있는 노드를 부모 노드, 그 아래에 있는 노드를 자식 노드, 같은 계층에 있는 노드를 형제 자매 노드로 표현한다.


    참고문헌



    DOM이란?
    JavaScript 초보자라도 바로 알 수 있다! DOM이란 무엇인가?

    좋은 웹페이지 즐겨찾기