DOM; Document Object Model
DOM으로 본 HTML 문서 트리 구조
소스. HTML 소스
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>DOM 구조</title>
</head>
<body>
<h1>DOM 문서 구조</h1>
<p><strong>DOM</strong> 구조를 표현하는 예입니다.</p>
- <p><input type="button" value="노드 읽어 오기" onclick="getElement('headTitle')"></p>
</body>
</html>
그림. 노트 트리 (Node tree)
노드
노드는 문서를 구성하는 원소들이다. 각 노드는 요소 노드(element node)와 텍스트 노드(text node)로 구성되어 있다.
요소 노드(element node)
DOM을 구성하는 원소이다. <p>, <div>, <strong>과 같이 HTML 요소를 나타내는 노드.
텍스트 노드(text node)
<p>텍스트</p>의 경우 HTML 요소 사이의 내용(content)이다.
속성 노드(attribute node)
<table border="10">의 경우 border와 같은 속성들을 표현하는 요소이다.
주요 메서드
getElementById
id 속성으로 지정된 속성값인 id의 이름을 이용하여 요소를 참조한다.
소스. id 속성을 가진 요소 포함
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>DOM 구조</title>
</head>
<body>
<h1 id="headTitle">DOM 문서 구조</h1>
<p><strong>DOM</strong> 구조를 표현하는 예입니다.</p>
</body>
</html>
소스. id를 이용한 참조
- function getElement(id) {
alert(document.getElementById(id).nodeName + ": " +
document.getElementById(id).firstChild.nodeValue);
return false;
}
getElementByName
getAttribute / setAttribute
소스. 속성값을 이용한 예제
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>DOM 구조</title>
<script type="text/javascript" src="js/ex081212-01.js">
</script>
</head>
<body>
<h1 id="headTitle">DOM 문서 구조</h1>
<p><strong onmouseover="changeStyle(this)" onmouseout="changeStyle(this)">DOM</strong> 구조를 표현하는 예입니다.</p>
<p>
<input type="button" value="노드 숨기기" onclick="hideHeader('headTitle')">
<input type="button" value="노드 표시하기" onclick="showHeader('headTitle')">
</p>
</body>
</html>
소스. Javascript 소스
- sw = -1;
-
function changeStyle(node) {
sw *= -1;
if (sw > 0) {
// note.setAttribute("style", "color: red; font-size: 32pt"); // FireFox 3.0
// IE
node.style.color = "red";
node.style.fontSize = "32pt"; else
node.setAttribute("style", "color: black");
} else {
//node.setAttribute("style", "color: black"); // FireFox 3.0
node.style.color = "black";
node.style.fontSize = "";
}
}
- function hideHeader(id) {
//document.getElementById(id).setAttribute("style", "display: none");
}
- function showHeader(id) {
document.getElementById(id).setAttribute("style", "display: block");
}
JavaScript (19) 
