Document

 

- DOM을 설명하기 앞서, Document는 브라우저가 불러온 웹 페이지를 나타내며, 모든 종류의 문서에 대한 공통의 속성과 메서드를 묘사합니다. 

- Document는 node tree로 표현될 수 있으며, tree안의 일부 node들은 children을 가질 수 있고 단순히 node만 존재할 수 있습니다. Document또한 Node를 상속받습니다. 

 

DOM

 

- "DOM"이란 간단히, Document( HTML or XML)을 접근/조작하는 API라고 할 수 있습니다. 문서의 유형(HTML, XML, SVG 등)에 따라서 더 다양한 API가 존재합니다. 그러므로 DOM은 HTML, XML, SVG등을 다루는 API 인터페이스 중 하나이지 DOM이 HTML은 아닙니다.

예컨대 "text/html" 콘텐츠 유형으로 제공되는 HTML 문서는 HTMLDocument 인터페이스도 구현하는 반면, XML과 SVG 문서는 XMLDocument 인터페이스를 구현합니다.

 

 

<!DOCTYPE html>
<html class=e>
 <head><title>Aliens?</title></head>
 <body>Why yes.</body>
</html>

위의 HTML 코드에서 Document는 아래와 같이 node tree로 표현됩니다.

 

 

 

Node

 

 

 

  • 노드는 다양한 DOM API(Document, Element ... )가 상속되는 인터페이스입니다.(모든 DOM 객체는 Node를 상속)

  • 다음 메소드와 속성들이 Node 인터페이스를 상속합니다. ( Document, Element, Attr, Text, Comment, CDATASection, ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference 등)

  • 엘리먼트는 Node를 상속받으므로 Node.baseURI, Node.childNodes, Node.nodeType 등 (어떤 카테고리에 속해 있는 노드인지 알려주는 식별자)과 같은 속성을 사용할 수 있습니다.

  • 즉, 문서에는 나와있지 않지만, HTML Document를 구성하는 node tree에서 최상단에 속한 것이 node이고 모든 엘리먼트들은 이 node 인터페이스를 상속받는다고 볼 수 있습니다.

 

 

 

Element

 

 

Element가 Node를 상속함.

Element의 대표적 속성 : attributes, classList, className, clientHeight, id, innerHTML등

 

 

  • 부모의 Node와 그 부모인 EventTarget의 속성을 상속하고 어떤 것들은 직접 구현(implement)합니다.

 

 

HTMLElement

 

HTMLElement은 Element를 상속함.

 

HTMLElement의 대표적 속성 : dataset, innerText, style, Element를 상속한 id 등

 

  • 대표적인 Document 인터페이스 메소드인 getElementById()에 의하여 HTMLElement를 얻을 수 있습니다.

  • 모든 종류의 HTML요소를 나타냅니다. 일부 요소는 이 인터페이스를 직접 구현하지만 나머지 요소는 HTMLElement를 상속한 자식 인터페이스를 구현합니다.

  • 이 요소가 하나 일 경우 HTMLElement이고 복수일경우 HTMLCollection을 반환한다.

 

HTMLCollection

 

  • 일반적으로 document.getElemetsByTag와 같이 복수의 노드를 접근할때 리턴된다. 

  • 유사 배열이다.

  • 가장 큰 특징으로 라이브 컬렉션이다.

  • NodeType을 오로지 ElementNode만 포함한다.

 

 

NodeList

 

  • HTMLCollection과는 다르게 모든 NodeType을 포함한다. 

  • Array는 아니지만 forEach를 사용이 가능하며 Array.from()을 사용하여 Array로도 변환 할 수 있다.

  • document.querySelectorAll은 정적 NodeList를 반환한다.

  • element.childNode는 동적 NodeList(라이브 컬렉션)을 반환한다.

  • 리스트의 항목을 열거할때는 for...in/for each..in을 사용하지말고 for of를 사용하면 NodeList객체를 올바르게 반복합니다.

 

 

 

 

 

 

저작자표시 비영리 변경금지

'Javascript > DOM 관련' 카테고리의 다른 글

img, a 태그의 CORS 문제  (0) 2024.04.23
[JAVASCRIPT] 브라우저 로드 순서  (0) 2019.12.01
[JAVASCRIPT] 스크롤 거리 구하기  (2) 2019.12.01
[JAVASCRIPT] event processing  (0) 2019.12.01

+ Recent posts

티스토리툴바