[JavaScript강의노트] DOM 사용하기 (1)
문서 객체 모델 (DOM)
문서 객체 모델이란 무엇인가
클릭하면 원래 크기의 이미지를 볼 수 있습니다.
클릭하면 원래 크기의 이미지를 볼 수 있습니다.
문서(Document)
원래 DOM은 XML이라는 기술에서 유래하였으며 D는 문서를 의미합니다. 특별히 웹 브라우저가 파싱(parsing)하여 화면을 구성하는데 사용되는 문서는 HTML과 XHTML이며 HTML과 함께 사용되는 DOM 기술을 HTML DOM이라고 하기도 합니다.
객체(Object)
객체는 프로퍼티(속성)와 메소드를 가지고 있으며 HTML 문서의 각 요소를 접근하기 위하여 웹 브라우저는 HTML 문서를 객체로 보고 접근할 수 있도록 해줍니다. 자바스크립트 초기에는 웹 브라우저를 제어하기 위해 윈도우 객체(window object)를 제공하였으며 윈도우 객체의 프로퍼티와 메서드는 브라우저 객체 모델(BOM; Browser Object Model)이라고 부르기도 합니다.
모델(Model)
DOM은 HTML이나 XHTML로 작성된 웹 문서를 나뭇가지형(tree) 구조로 표시하여 웹 문서의 각 요소(element)로 접근할 수 있도록 모델을 제공합니다.
DOM 사용하기
노드(node)
노드란 나뭇가지(tree)형 구조으로 연결(link)되어 부모(parent), 자식(child), 형제(sibling) 관계를 형성합니다. 노드는 다음과 같이 분류합니다.
요소(element) 노드
<html>, <head>, <body>와 같은 HTML 태그(tag)를 요소(element)라고 합니다. 요소는 하위 요소를 포함할 수 있으며 이 때 하위 요소를 자식 요소라고 합니다. 하위 요소를 포함하고 있는 상위 요소를 부모 요소라고 합니다.
텍스트(text) 노드
<p> 태그 사이에 위치한 문자열을 텍스트 노드라고 합니다. XHTML에서 텍스트 노드는 항상 요소 노드의 자식으로 포함되어야 합니다. 그러므로 HTML 문서의 작성시 문자열은 반드시 태그로 감싸는 습관을 들이기 바랍니다.
속성(attribute) 노드
HTML 태그는 나름의 속성들을 가지고 있습니다. 예를 들어 <body> 태그의 경우 배경색 지정을 위해 bgcolor라는 속성을 가지고 있습니다. 이러한 속성들 역시 요소 노드의 자식 노드로 포함됩니다.
CSS와의 관계
DOM에서 CSS를 다루기 위해 요소 노드의 style 속성 노드라는 개념으로 스타일 시트 속성 값을 읽어오거나 추가, 변경 등의 작업을 할 수 있습니다.
getElementById()
DOM API 중 가장 많이 사용되는 메서드 중의 하나로 window.document.getElementById()라는 구조로 document 객체에 포함된 메서드입니다. HTML 태그의 속성 중 "ID" 속성은 중복을 허용하지 않는 유일한 값을 가지는데 이 값을 검색하여 요소 노드를 리턴합니다.
var e = document.getElementById("header");
alert(e);
위의 예는 ID 속성의 값으로 "header"를 갖는 요소(태그)를 찾아 변수 e가 가리키도록 한 것입니다. 경고창을 이용하여 값을 출력하면 해당 요소의 타입과 이름이 표시됩니다.
getElementsByTagName()
이 메서드는 특정 태그를 사용하는 요소들을 배열로 리턴하게 됩니다.
var elements = document.getElementsByName("li");
alert(elements.length);
위의 예는 <LI> 태그들을 찾아 elements라는 배열로 저장하고 몇 개가 찾아졌는지 개 수를 출력합니다. 만일 <LI> 태그로 묶인 아이템들이 여러 개가 있는데 여기에 일괄적으로 "onmouseover"나 "onmouseout" 등 이벤트 리스너를 추가하고자 할 경우 getElementsByName() 메서드를 이용하여 배열에 담아 for 문등으로 돌려서 한꺼번에 추가하는 등의 작업으로 응용이 가능합니다.