Dynamic DOM 객체 다루기
지금까지는 DOM 의 기초적인 속성 및 메소드들을 다루어 봤다. 이런 속성으로는 다이나믹한 웹페이지를
구성하는데 한계가 있다. 웹페이지 전체가 리로딩 되지 않고 적절한 시점에 필요한 부분만 서버와 통신하
여 데이터가 수정되는 동적인 웹페이지를 만들려면 더 다양한 DOM 의 속성을 익혀야 한다. 자, 그럼 컨텐
츠를 동적으로 생성할 수 있게 해주는 W3C DOM 의 속성과 메소드에는 어떤것들이 있는지 알아보자.
document.createElement(tagName) : tagName 으로된 엘리먼트를 생성한다. div 를 메소드 파라미터로
입력하면 div 엘리먼트가 생성된다.
document.createTextNode(text) : 정적 텍스트를 담고 있는 노드를 생성한다.
<element>.appendChild(childNode) : 특정 노드를 현재 엘리먼트의 자식 노드에 추가시킨다. (예를들어
select 엘리먼트에 option 엘리먼트 추가)
<element>.getAttribute(name) : 속성명이 name 인 속성값을 반환한다.
<element>.setAttribute(name, value) : 속성값 value 를 속성명이 name 인 곳에 저장한다.
<element>.insertBefore(newNode, tartgetNode) : newNode 를 tartgetNode 전에 삽입한다.
<element>.removeAttribute(name) : 엘리먼트에서 name 속성을 제거한다.
<element>.removeChild(childNode) : 자식 엘리먼트를 제거한다.
<element>.replaceChild(newNode, oldNode) : oldNode 를 newNode 로 치환한다.
<element>.hasChildNodes() : 자식 노드가 존재하는지 여부를 판단한다. 리턴형식은 Boolean 이다.
여기서 한가지 짚고 넘어갈 부분이있다. 현재 거의 모든 브라우저는 DOM 을 지원하고 있으며 API 또한
비슷하게 동작하도록 구현되어 있다. 정확히 말하자면 DOM API 의 구현이 브라우저마다 다소 차이가 있
다는 말이다. 가장 호환이 안되는 브라우저는 다름아닌 인터넷 익스플로어다. AJAX 의 핵심은
XMLHttpRequest 객체이고 가장 먼저 이 객체를 구현하고 제공한 브라우저가 IE5임을 감안할때 상당히
아이러니컬하지 않은가? 2000년 IE 가 전세계 브라우저의 시장점유율 95% 차지할 즈음, IE 에 대적할 만
한 브라우저는 존재하지 않았다. 마이크로소프트가 다양한 웹표준 구현을 포기했던 시점이 바로 이때부터
다. 이때까지 XHR 의 사용은 당연히 저조할 수밖에 없었다. 하지만 모질라와 사파리가 잇따라 광범위하게
지원을 시작하게 되자 상황은 변하기 시작했고, 사용율이 극히 부진했던 XHR 객체는 W3C 의 표준으로
까지 자리매김하게 되었다. 더우기 구글맵, 구글 Suggest, Gmail, Flickr, Netflix 등에서 AJAX 를 사용하
자 이제는 명실상부한 웹의 표준으로 거듭나게 되었다. 너무 늦었지만 Microsoft 쪽에서도 많은 분발을 촉
구한다. 그러면 IE 에서 문제가 되고 있는 DOM 객체의 특징을 간략히 살펴보자.
첫째, IE 에서는 <table> 에 <tr> 을 추가할때 appendChilde() 메소드를 사용하더라도 <tr> 은 나타나지
않는다. 따라서 <tr> 을 <tbody> 에 추가해 주는 방식을 사용해야 모든 브라우저에서 동작하는 코드를 작
성할 수 있다.
둘째, IE 에서는 setAttribute() 메소드에 class 속성을 이용할 수 없다. setAttribute("class",
"newClassName") 한 후에 다시 setAttribute("className", "newClassName") 을 해야 모든 브라우저의
호환성을 보장할 수 있다.
셋째, IE 에서는 style 속성에 setAttribute() 메소드를 이용할 수 없다. <element>.setAttribute("style,
font-weight:bold;") 라고 하는 대신에 <element>.style.cssText = "font-weight:bold" 라고 해 줘야 모
든 브라우저에서 제대로 작동한다.
다음은 DOM 의 동적 속성 및 메소드를 이용해서 다이나믹한 웹페이지를 생성하는 예제를 다루어 보겠다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamically Editing Page Content</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doSearch() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "dynamicContent.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
clearPreviousResults();
parseResults();
}
}
}
function clearPreviousResults() {
var header = document.getElementById("header");
if(header.hasChildNodes()) {
header.removeChild(header.childNodes[0]);
}
var tableBody = document.getElementById("resultsBody");
while(tableBody.childNodes.length >0) {
tableBody.removeChild(tableBody.childNodes[0]);
}
}
function parseResults() {
var results = xmlHttp.responseXML;
var property = null;
var address = "";
var price = "";
var comments = "";
var properties = results.getElementsByTagName("property");
for(var i = 0; i <properties.length; i++) {
property = properties[i];
address = property.getElementsByTagName("address")[0].firstChild.nodeValue;
price = property.getElementsByTagName("price")[0].firstChild.nodeValue;
comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;
addTableRow(address, price, comments);
}
var header = document.createElement("h2");
var headerText = document.createTextNode("Results:");
header.appendChild(headerText);
document.getElementById("header").appendChild(header);
document.getElementById("resultsTable").setAttribute("border", "1");
}
function addTableRow(address, price, comments) {
var row = document.createElement("tr");
var cell = createCellWithText(address);
row.appendChild(cell);
cell = createCellWithText(price);
row.appendChild(cell);
cell = createCellWithText(comments);
row.appendChild(cell);
document.getElementById("resultsBody").appendChild(row);
}
function createCellWithText(text) {
var cell = document.createElement("td");
var textNode = document.createTextNode(text);
cell.appendChild(textNode);
return cell;
}
</script>
</head>
<body>
<h1>Search Real Estate Listings</h1>
<form action="#">
Show listings from
<select>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
</select>
to
<select>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
</select>
<input type="button" value="Search" onclick="doSearch();"/>
</form>
<span id="header">
</span>
<table id="resultsTable" width="75%" border="0">
<tbody id="resultsBody">
</tbody>
</table>
</body>
</html>
<3-9 dynamicContent.html 의 내용>
<?xml version="1.0" encoding="UTF-8"?>
<properties>
<property>
<address>812 Gwyn Ave</address>
<price>$100,000</price>
<comments>Quiet, serene neighborhood</comments>
</property>
<property>
<address>3308 James Ave S</address>
<price>$110,000</price>
<comments>Close to schools, shopping, entertainment</comments>
</property>
<property>
<address>98320 County Rd 113</address>
<price>$115,000</price>
<comments>Small acreage outside of town</comments>
</property>
</properties>
<3-10 dynamicContent.xml 의 내용>
<3-10 샘플 3-9의 실행결과 화면>
샘플 3-9를 보면 동적 메소드가 적용된 부분은 굵게 표시를 해 놓았다. 이부분을 이전 샘플들과 비교해
가면서 보면 코드를 이해하는데 큰 어려움은 없으리라 생각한다. 실행결과는 3-10 그림에 나와있다.
Search 버튼을 누르면 dynamicContent.xml 의 내용을 테이블로 표시한다. Search 버튼을 누르면 기존에
존재하는 테이블 row 를 동적으로 제거한 후에 동적으로 다시 그린다. 이번 예제는 이 부분이 핵심으므로
가장 중요한 코드만을 설명하겠다.
function createCellWithText(text) {
var cell = document.createElement("td");
var textNode = document.createTextNode(text);
cell.appendChild(textNode);
return cell;
}
위 메소드는 테이블 컬럼(<td></td>)에 해당하는 정보를 생성하는 메소드이다. 3-10 그림을 보면 하나의
row 에는 3개의 컬럼 요소가 있으며 동적으로 하나의 행을 생성하기 위해서는 address, price,
comments 에 해당하는 td 요소를 각각 생성해야 한다.
function addTableRow(address, price, comments) {
var row = document.createElement("tr");
var cell = createCellWithText(address);
row.appendChild(cell);
cell = createCellWithText(price);
row.appendChild(cell);
cell = createCellWithText(comments);
row.appendChild(cell);
document.getElementById("resultsBody").appendChild(row);
}
위 메소드는 테이블 행(<tr></tr>)에 해당하는 정보를 생성해서 테이블에 추가하는 메소드이다. 바로 위에
서 언급했듯이 행을 구성하고있는 3개의 컬럼 요소를 각각 만들어서 row 변수에 추가한 후, 이 변수를 다
시 tbody 속성에 추가하면 그림 3-10과 같은 화면이 완성되는 것이다.
출처: http://uip80.tistory.com/entry/Dynamic-DOM-객체-다루기?category=199706 [여명의집]