감자 텃밭

[WEB] DOM (Document Object Model) 본문

Web/Web Theory Information

[WEB] DOM (Document Object Model)

g2h 2023. 1. 22. 19:24

DOM이란 무엇인가?

Document Object Model 즉 문서 객체 모델로서

XML 또는 HTML 문서에 접근할 수 있도록 하는 인터페이스이며, 계층 적으로 표현되는데,

이를 통해 내용을 생성, 변경 및 삭제등 작업을 할 수 있도록 하며,

웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있도록 연결시켜 주는 담당을 한다.

 

즉 쉽게 말해 HTML 문서에 접근하기 위한 표준 API라고 생각하면 된다.

 

DOM은 플랫폼 및 언어 독립적인 프로그래밍 인터페이스를 제공하며, 일반적으로 JS 객체를 통해 제공하는데

이를 흔히 DOM API 라고 한다.

 

DOM API를 통해 웹 페이지의 구성 요소에 쉽게 접근하여 구조를 탐색, 내용, 속성, 스타일을 추가 삭제 변경이

가능하다.

 

DOM API는 각 객체의 메소드나 속성을 통해 DOM에 접근할 수 있다.

 

<html>
  ...생략...
  <body>
    <p id="greeting"></p>
    <script>
    	document.getElementById("greeting").innerHTML = "Hello, hunters!";
    </script>
  </body>
</html>

위의 코드를 살펴 보면

  • document : DOM Tree에서 촤상위 노드이다.
  • getElementByld("greetion") : 아이디가 greeting인  HTML 요소에 접근하도록 한다.
  • innerHTML : 지정된 HTML 요소의 값을 타나 낸다.

사진 출처 : 위키백과

위 사진과 같은 DOM Tree는 웹 브라우저에 로드되면 문서를 이루는 텍스트, 요소,

속성 등을 노드라 불리며, 문서 객체가 되고 이 각각의 노드들이 위 사진과 같이  DOM Tree라는 

논리적 트리 구조를 나타나게 된다.

 

여기서 최상위 노드는 "Document" 노드이며, 텍스트, 요소, 속성 노드들은

이 Document노드의 자식 노드가 된다.

DOM API를 사용하기 위해 중요한 데이터 타입들을 나열하면 아래 표와 같이

정리할 수 있다.

document member가 document type의 object를 리턴할 때 이 object는 root document object자체이다.
element DOM API의 member에 의해 return된 element 또는 element type의 node를 의미한다.
nodelist elements의 배열이다. nodelist의 items은 index를 통해 접근가능하다.
attribute attribute는 DOM에서 elements와 같은 nodes이다.
namedNodeMap array와 유사하지만 items은 name 또는 index에 의해 접근가능하다.

 

 

 

내용 출처 및 참고사이트
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://www.bugbountyclub.com/pentestgym/view/40

 

※ 내용이 이상하거나 문제가 있을 경우, 또는 설명에 부족한 내용이 있으시면 알려 주시면 감사합니다.

저작자표시

'Web > Web Theory Information' 카테고리의 다른 글

[WEB] Ajax (Asynchronous JavaScript And XML)  (0) 2023.02.24
[WEB] Same Origin Policy (SOP)  (0) 2023.02.17
[WEB] XPath (XML Path Language)  (0) 2023.01.22
[WEB] XML (eXtensible Markup Language)  (0) 2023.01.21
'Web/Web Theory Information' Related Articles more