FIF's 코딩팩토리

HTML DOM(Document Object Model) 소개 본문

Web(웹)

HTML DOM(Document Object Model) 소개

FIF 2019. 8. 7. 10:56
반응형

DOM(Document Object Model)이란 무엇인가?

DOM(Document Object Model)은 HTML 문서의 모든 요소에 접근하는 방법을 정의한 API다.

DOM 객체는 텍스트와 이미지, 하이퍼링크, 폼 엘리먼트 등의 각 문서 엘리먼트를 나타낸다. 자바스크립트 코드에서는 동적인 HTML을 만들어내기 위해 DOM 객체에 접근해서 조작할 수 있다.

 

document.write()를 이용한 동적 문서 생성

자바스크립트에서 document.write()는 현재 파싱 중인 문서에 내용을 쓰는 데 사용할 수 있으며, 이 메서드를 호출하는 코드가 담긴 <script> 태그가 위치한 곳에서 HTML 문서에 텍스트를 집어넣는다.

<script> 태그의 최상위 수준의 코드 안에서만 document.write()를 호출할 수 있는데, 이는 이러한 스크립트가 문서 파싱 과정의 일부로 실행되기 때문이다.

document.write()의 예는 다음과 같다.

<!DOCTYPE html>

<html>

<body>

 

<script>

document.write("Hello DOM.");

</script>

 

</body>

</html>

문서를 트리로 표현하기

HTML 문서는 중첩된 태그로 구성된 계층적인 구조를 띠는데, 이는 DOM에서 객체 트리로 표현된다. DOM 트리에는 HTML 태그나 엘리먼트를 나타내는 노드가 담긴다.

DOM 노드

DOM 트리는 다양한 형식의 Node 객체가 담긴다. Node 인터페이스에는 트리 탐색과 조작을 위한 프로퍼티와 메서드가 정의돼 있다.

  • Node 객체의 childNodes 프로퍼티는 해당 노드의 자식 목록을 반환한다.

  • firstChild, lastChild, nextSibling, previousSibling, parentNode 프로퍼티는 노드 트리를 탐색하는 수단을 제공한다.

  • appendChild(), removeChild(), replaceChild(), insertBefore()와 같은 메서드를 이용하면 문서 트리에서 노드를 추가하고 제거할 수 있다.

DOM 트리의 루트에 위치한 Node는 Document 객체다. DOM 트리에는 단 하나의 Document 객체만이 있다. 트리상의 노드는 대부분 Element 객체와 Text 객체, 그리고 Comment 객체에 해당한다.

Element 인터페이스의 getAttribute(), setAttribute(), removeAttribute() 메서드를 이용하면 엘리먼트의 속성을 대상으로 질의, 설정, 삭제할 수 있다.

DOM HTML API

DOM 표준은 XML 및 HTML 문서에 모두 사용할 목적으로 고안됐다. Node, Element, Document 인터페이스 등의 핵심 DOM API는 비교적 일반화돼 있어 두 유형의 문서에 모두 적용할 수 있다.

DOM 표준에는 HTML 문서에 특화된 인터페이스도 포함돼 있다.

  • HTMLDocument는 HTML에 특화된 Document의 하위 인터페이스로서 location 프로퍼티를 비롯해 forms[] 배열, write() 메서드 등 다양한 문서 프로퍼티와 메서드가 정의돼 있다.

  • HTMLElement는 HTML에 특화된 Element의 하위 인터페이스로서 id, style, title, lang, dir, className 프로퍼티가 정의돼 있다.

언어 독립적인 DOM API

DOM 표준이 동적 HTML 프로그래밍을 위한 공통 API를 마련하기 위해 만들어진 것이긴 하지만 DOM은 웹 스크립트를 작성하는 것에만 국한되지 않는다. 사실 DOM 표준은 현재 XML 문서를 파싱하고 조작하는 서버 측 자바와 C++ 프로그램에서 가장 비중 있게 사용되고 있다. DOM 표준은 쓰임새가 다양하기 때문에 언어 독립적으로 정의돼 있다.

 

반응형
저작자표시 비영리

'Web(웹)' 카테고리의 다른 글

HttpServletRequest 주요 메서드  (0) 2022.08.22
GET과 POST 방식의 차이  (0) 2019.12.05
HTML DOM을 이용한 HTML 내용 변경  (0) 2019.08.07
JSTL 문법 초!!간단 정리  (0) 2019.07.03
HTML Form 요소  (0) 2019.07.02
'Web(웹)' Related Articles more
Comments