1. DOM API를 이용해서 HTML 화면변경을 하는 예제 - changeHTMLUsingDOM.jsp
2. DOM API를 이용해서 XML 파싱
DOM과 XML
DOM, 즉 Document Object Model은 문서를 객체로 표현하기 위한 표준으로서 HTML 이나 XML등의 문서를 객체로 표현할 때 사용되는 API이다. 자바스크립트 ,자바,C,C# 등다양한 언어에서 DOM API를 제공하고있다.
DOM은 문서를 트리구조로 표현하기 때문에 쉽게 이해할수있다. XMLHttpRequest 객체는 응답텍스트대신 XML 응답결과를 사용할수있는데,이 때 DOM API를 사용해서 서버가 생성한 XML로부터 데이터를 추출할 수 있다.
DOM API의 주요 인터페이스
DOM API에서 모든 건 Node로 표현된다.
Document: 전체 문서
Element: 각 태그. <books>나 <book>과 같이 태그에 해당하는 노드가 Element로 매핑됨
Text: 문자열 데이터가 Text노드로 표현된다. <author>이승재</author>의 경우 '이승재' 문자열은 text노드에 저장된다
CDataSection: XML문서의 CDATA 영역의 문자열 값을 저장한다. 이 영역에 해당하는 내용은 모두 텍스트로 인식된다. [!CDATA]
<XML문서와 DOM 트리구조>
<HTML문서와 DOM 트리구조>
1. DOM API를 이용해서 HTML 화면변경을 하는 예제
changeHTMLUsingDOM.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!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=UTF-8">
<title>HTML을 변경시키기</title>
<script type="text/javascript">
var count = 0;
function addItem() {
count++;
//E: Element
var newItemE = document.createElement("div");
newItemE.setAttribute("id","item_" + count);
// id라는 속성에 item_1 , item_2 ...
// <div id="item_1"></div>
var html = "새로 추가된 아이템[" + count + "] ";
html += "<input type=\"button\" value=\"삭제\"" +
"onclick=\"removeItem('item_" + count + "');\"/>"; //input box 만들기
// <div id="item_0">
// 새로 추가된 아이템[0] <input type="button" value="삭제" onclick="removeItem('item_0')"/>
// </div>
newItemE.innerHTML = html;
var itemListDiv = document.getElementById("itemList");
itemListDiv.appendChild(newItemE);
}
function removeItem(itemId) {
var removeItem = document.getElementById(itemId);
removeItem.parentNode.removeChild(removeItem);
}
</script>
</head>
<body>
<h1>HTML DOM을 이용한 화면 변경</h1>
<hr/>
<input type="button" value="추가" onclick="addItem();"/>
<div id="itemList"></div>
</body>
</html>
2. DOM API를 이용하여 XML 파일 파싱하기
books.xml
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book>
<title>겨울왕국</title>
<author>디즈니</author>
</book>
<book>
<title>이솝우화</title>
<author>미드</author>
</book>
<book>
<title>힐러리의삶</title>
<author>클린턴</author>
</book>
<book>
<title>수지의 어린시절</title>
<author>EBS</author>
</book>
</books>
getBookXML.xml
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/httpRequest.js"></script>
<script type="text/javascript">
//메인
function getBookList() {
// 현재 위치의 books.xml을 읽어와라
sendRequest("books.xml",
null,displayBookList,"GET");
}
//콜백함수
function displayBookList() {
// 이 예제에서 서버가 작동하는건 아님. (걍 써줬음)
if(httpRequest.readyState==4) {
if(httpRequest.status==200) {
// books.xml 을 출력하는 작업 (파싱)
// 전달받은 XML을 DOM객체에 넣음
var Document = httpRequest.responseXML;
// DOM객체에서 Element 추출
var booksE = Document.documentElement;
// book 의 갯수 추출
var bookNL = booksE.getElementsByTagName("book");
//alert(bookNL.length + "개"); 4개 나와야함
//전체 데이터를 읽고 HTML로 출력
var html = "";
html += "<ol>";
for (var i = 0; i < bookNL.length; i++) {
//한개의 book 읽음
var bookE = bookNL.item(i);
// title 값 읽어오기 - title 안에도 여러개 만들 수 있음 지금은 하나이기 때문에
// title.item(0)으로 가져온 것, 여러개면 item(1),item(2)...
var titleStr = bookE.getElementsByTagName("title").item(0).firstChild.nodeValue;
// author 값 읽어오기
var authorStr = bookE.getElementsByTagName("author").item(0).firstChild.nodeValue;
// 읽어낸 값을 가지고 html 완성하기
html += "<li>" + titleStr + " " + authorStr + "</li>";
}
html += "</ol>";
document.getElementById("bookDiv").innerHTML = html;
// 원래 변수 하나 선언해서 집어넣던거 이렇게 줄인거임
}
}
}
window.onload = function() {
getBookList();
}
</script>
</head>
<body>
<h1 id="list">Book List</h1>
<hr/>
<div id="bookDiv"></div>
</body>
</html>
'Ajax & jQuery' 카테고리의 다른 글
| Ajax - 댓글 기능이 있는 게시판 만들기(미) (0) | 2019.10.27 |
|---|---|
| Ajax - 방명록 만들기 (댓글창 만들기) (0) | 2019.10.27 |
| Ajax(4) - JSON형식 데이터를 읽어와 Javascript의 객체 생성 하기 (0) | 2019.10.23 |
| Ajax(3) - CSV 형식 데이터 읽기, 검색 시 제시어 기능 (0) | 2019.10.23 |
| JQuery 셋팅 및 예제 (10.18필기보고보완) (0) | 2019.10.23 |
