무작정 개발.Vlog

[Javascript] DOM(Document Object Model) , XML 데이터 가져오기

by 무작정 개발

Front-End/jQuery(ajax)

반응형
2022.03.17(58일 차_목요일)

 

DOM(Document Object Model)
  • DOM이란 Document Object Model의 줄임말이다.
  • HTML이나 XML 등의 문서를 객체로 표현할 때 사용되는 API이다.
  • DOM은 트리(Tree) 구조로 표현하기 때문에 쉽게 이해할 수 있다.
  • JS, Java, C, C# 등 다양한 언어에서 DOM API를 제공한다.
  • XMLHttpRequest 객체는 응답 텍스트 대신 XML 응답 결과를 사용할 수 있다.
  • 이때, DOM API를 사용해서 Server가 생성한 XML로부터 데이터를 추출 가능

 

 

XML 문서와 DOM 트리 구조

books.xml
books.xml
books.xml을 DOM 트리로 표현
books.xml을 DOM 트리로 표현

브라우저는 HTML의 모든 요소를 객체화하고 이 객체를 계층 구조로 묶어, 어떤 요소가 다른 요소 내부에

포함되어 있을 때, 이 요소는 자신을 포함한 요소의 자손 요소로써 구조화한다. 

 

위의 트리(Tree) 구조를 보면 author 요소는 title 요소와 형제 관계를 맺고, 이 둘은 book 요소의 자식이다.

이렇게 객체화된 요소는 여러 속성을 가질 수 있고, HTML 요소 속성을 그대로 사용하기도 한다.

즉, 객체 속성 이름으로 속성에 접근하여 상호 작용을 통해 속성을 바꿀 수 있다.

 

 

주요 DOM API

 

- DOM API에서 모든 건 Node(노드)로 표현되며 문서의 각 구성 요소들은 모두 Node 또는 하위

  인터페이스로 매핑된다.

- 브라우저에 출력된 웹페이지는 모두 DOM객체로 구성되어있고 객체화시키는 작업을 해서 DOM객체로 바꾼다.

  • Document : 전체 문서를 나타낸다.
  • Element : 각 태그를 나타낸다. / <books> 혹은 <book>와 같이 태그에 해당하는 Node(노드)가 Element로 매핑된다.
  • Text : 문자열 데이터가 Text 노드로 표현된다. / <aithor> 수지 </author>의 경우 '수지'문자열은 Text노드에 저장

 

XML 문서를 처리하기 위한 DOM 요소의 속성

프로퍼티 이름 설명
childNodes 현재 요소의 자식을 배열로 표현
firstChild 현재 요소의 1번째 자식
lastChild 현재 요소의 마지막 자식
nextSibling 현재 요소와 바로 다음 요소를 의미
nodeValue 해당 요소의 값을 읽고 쓸 수있는 속성을 정의 (=data)
parentNode 해당 요소의 부모 노드
previousSibling 현재 요소와 바로 이전의 요소를 의미

 

XML 문서를 다루는 유용한 DOM 요소의 메서드(Method)

getElementById(id) document에서 특정한 id 속성값을 가지고 있는 요소를 반환
getElementsByTagName(name) 특정한 태그 이름을 가지고 있는 자식 요소로 구성된 배열을 리턴
.hasChildNodes() 해당 요소가 자식 요소를 포함하고 있는지를 나타내는 Boolean값 리턴
getAttribute(name) 특정한 name에 해당하는 요소의 속성 값을 리턴

 

 

XML 파일을 읽어서 웹페이지에 출력

  • XMLHttpRequest 객체는 Server로부터 XML 문서를 응답으로 읽어올 수 있고, 서버에서 읽어온 XML 문서는 DOM으로 변환되어 저장된다.
  • DOM API를 이용하면 Server가 생성한 XML 문서로부터 원하는 정보를 읽어올 수 있다.

 

실행 화면

getBooksXML.jsp
getBooksXML.jsp

 

books.xml 파일 생성

books.xml
books.xml

DOM의 트리(Tree)에서 Document는 문서 전체를 의미하고,

<books>는 document 하위 루트 노드(node)이다.

 

firstChild : book 노드를 기준으로 보면 1번째에 위치한 title이다.

lastChild : book 노드를 기준으로 보면 마지막에 위치한 author이다.

 

 

getBooksXML.jsp - (출력 페이지)

html
<%@ 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="<%=cp%>/data/js/httpRequest.js"></script>
 
<script type="text/javascript">
 
	function getBookList() {
		
		sendRequest("books.xml",null,displayBookList,"GET");
		
	}
	
	//콜백함수
	function displayBookList() {
		
		if(httpRequest.readyState==4){
			if(httpRequest.status==200){
				
				//전달받은 xml을 dom 객체에 넣음
				var Document = httpRequest.responseXML;
 
				//dom 객체에서 element 추출
				var booksE = Document.documentElement;
				
				//book의 갯수 호출 
				var bookNL = booksE.getElementsByTagName("book");
 
				//전체데이터 읽고, HTML로 출력
				var html = "";
				html += "<ol>";
				
				for(var i=0;i<bookNL.length;i++){
					
					var bookE = bookNL.item(i); 
					
					var titleStr = bookE.getElementsByTagName("title")
										.item(0).firstChild.nodeValue;
					var authorStr = bookE.getElementsByTagName("author")
										 .item(0).firstChild.nodeValue;//title에는 Text데이터 1개만 들어있다.
				
					html += "<li>"
					+ titleStr
					+"&nbsp;&nbsp;&nbsp;&nbsp;"
					+ 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" style="display: block; margin: 0 auto;"></div>
</body>
</html>

 

https://github.com/chaehyuenwoo/jQuery-Ajax/tree/main/ajax4

 

GitHub - chaehyuenwoo/jQuery-Ajax: jQuery와 Ajax관련 소스

jQuery와 Ajax관련 소스. Contribute to chaehyuenwoo/jQuery-Ajax development by creating an account on GitHub.

github.com

이번 소스코드와 더 많은 예제는 위는 Github 참고

반응형
저작자표시 비영리
블로그의 프로필 사진

블로그의 정보

무작정 개발

무작정 개발

활동하기

티스토리툴바