[JavaScript] DOM이란?

챔수·2023년 3월 7일
0

개발 공부

목록 보기
16/101

1. DOM이란?

DOM은 Document Object Model의 약자로 직역 하면 Document : 문서, Object : 객체 로 문서 객체 모델로 번역 할 수 있다.

그러면 html에서의 문서 객체는 무엇일지 생각 해봐야 될 것이다.
html에서의 문서 객체는 body, div 등과 같은 태그들을 JavaScript가 이용할 수 있는 객체로 만든 것을 문서, 객체 라고 한다. 문서 객체를 인식하는 방식으로 해석 할 수 있다.

2. DOM에 어떻게 접근할 수 있을까?

javascript로 작성 중이라면 script 태그를 통해서 html 태그들을 조작할 수 있다.

<html>
  <head>
    <script>
       // run this function when the document is loaded
       window.onload = function() {

         // create a couple of elements in an otherwise empty HTML page
         var heading = document.createElement("h1");
         var heading_text = document.createTextNode("Big Head!");
         heading.appendChild(heading_text);
         document.body.appendChild(heading);
      }
    </script>
  </head>
  <body>
  </body>
</html>
  • 위 예시는 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때) 실행되는 함수를 정의하였다. 이 함수는 새로운 H1 element 를 생성하고, element 에 text 를 추가하며, H1 을 이 문서의 트리에 추가한다.

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

profile
프론트앤드 공부중인 챔수입니다.

0개의 댓글