DOM

1. DOM(Document Object Model)이란?

출처 : https://www.codestates.com/blog/content/dom-javascript

• DOM이란 W3C(World Wide Web Consortium)이란 회의에서 정한 문서 객체 모델이다.
• HTML 형식의 텍스트를 DOM 형식으로 불러와 데이터를 확인 및 조작할 수 있다.
• DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹 페이지, HTML 문서, SVG 문서 및 구성 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못한다.

 

2. DOM은 어떤 식으로 사용되는가?

노드	역할
document	● Dom Tree의 최상위 루트 노드이다. ● document 객체를 가리킨다. ● HTML 문서 전체를 나타내는 노드이다. ● window 객체의 document 프로퍼티로 연결되어 있다. ● window.document, document로 참조해서 사용할 수 있다. ● HTML 문서에 오로지 1개만 존재한다.
element	● 모든 HTML 요소(body, h2, div 등)를 지칭하는 노드이다. ● 속성 노드를 가질 수 잇는 유일한 노드이다. ● 부모-자식 관계를 가지게 되기 때문에 계층적 구조를 이룰 수 있다.
attribute	● 모든 HTML 요소의 속성에 대한 노드이다. ● 따라서, 부모 노드가 아닌 해당 노드와 바인딩 되어 있다.
text	● HTML 문서의 모든 텍스트를 지칭하는 노드

 

• javascript와 같은 스크립트 언어를 통해 DOM 수정이 가능하다.
• 예를 들어 : XMLHttpRequest의 responsText는 서버의 응답 값을 html 형식의 텍스트로 불러온다.
• DOMparser() 객체를 이용해 html 텍스트를 DOM 형식으로 변환 후 데이터를 핸들링 할 수 있다.
• DOM 파일의 구성은 위 그림과 같다.

 

💡 JavaScript DOM 접근하는 방법

※ DOM method : DOM 객체의 멤버 함수로, HTML 태그를 제어한다.
※ DOM property : DOM 객체의 멤버 변수로, HTML 태그의 속성을 반영한다.

● document.getElementById(id) : id 프로퍼티가 속한 노드를 반영한다.
● document.getElementsbyClassName(class) : class 프로퍼티가 속한 노드를 반영한다. </aside>

 

 

3. DOMParser() 객체

mimeType	doc.constructor
text/html	Document
text/xml	XMLDocument (en-US)
application/xml	XMLDocument (en-US)
application/xhtml+xml	XMLDocument (en-US)
image/svg+xml	XMLDocument (en-US)

 

● DOMParser() 객체를 이용해 지정된 문자열의 형식을 DOM으로 파싱할 수 있다.

● parseFromString(string, mimeType) 형식으로 사용할 수 있다.