DOM AIP에서 모든건 Node로 표현되며 문서의 각 구성 요소들은 모두 Node 또는 하위 인터페이스로 매핑됨
- Document : 전체 문서를 나타낸다.
- Element : 각 태그를 나타낸다.
- Text : 문자열 데이터가 Text 노드로 표현된다.
(ex. <title>웹 표준</title>에서 "웹 표준" 문자열은 Text 노드에 저장
- CDataSection : XML문서의 CDATA 영역의 문자열 값을 저장한다.
@ Node 인터페이스의 주요 프로퍼티
NodeList는 length 와 item(i)를 제공한다.
- length : NodeList에 저장된 노드의 개수(NodeList의 길이)
- item(i) : 인덱스 i에 저장된 노드를 구함(i는 0부터 시작)
@ Node에 정의된 nodeType관련 상수값
@ Document 인터페이스의 주요 프로퍼티 및 함수
- getElementsByTagName : 지정한 이름의 태그에 해당하는 NodeList를 구함
- getElementById : id 속성의 값이 일치하는 Element를 구함
@ Element 인터페이스의 주요 프로퍼티 및 함수
- getAttribute(String name) : name에 해당하는 속성의 값을 구한다.
- setAttribute(String name, String value) : 이름이 name인 속성의 값을 value로 지정한다.
- removeAttribute(String name) : 이름이 name인 속성을 제거한다.
@ Document 인터페이스의 Element 노드 생성 함수
- createElement(String tagName) : 지정한 태그 이름을 갖는 Element 노드를 생성한다.
- createTextNode(String text) : text를 값으로 갖는 Text 노드를 생성한다.
예)
@ Node 인터페이스의 DOM트리 변경 관련 함수
@ responseXML 응답 읽어오기
XMLHttpRequest 객체는 XML문서를 응답 데이터로 사용할 수 있다. responseXML을 사용하면 된다.
@ XSL/T는 XML문서를 XSL을 사용해서 원하는 문서로 변환시킬 때 사용되는 기술.
주로 XML문서를 HTML문서로 변환할 때 많이 사용된다. XML을 읽어 온후 XSL을 읽어오고 XSL을 사용해서 XML을 HTML 코드로 변환해야 한다.
IE의 경우
IE가 아닌 경우
innerHTML이 아닌 appencChild()함수를 사용하는 이유는 transformToFragment() 함수가
DOM트리의 노드를 생성하기 때문이다.
XSL 파일 코드
XSL파일을 이용해서 XML문서를 HTML코드로 변환하는 코드
 |
- Document : 전체 문서를 나타낸다.
- Element : 각 태그를 나타낸다.
- Text : 문자열 데이터가 Text 노드로 표현된다.
(ex. <title>웹 표준</title>에서 "웹 표준" 문자열은 Text 노드에 저장
- CDataSection : XML문서의 CDATA 영역의 문자열 값을 저장한다.
@ Node 인터페이스의 주요 프로퍼티
| 프로퍼티 타입 | 프로퍼티 이름 | 설명 |
| String | nodeName | 노드의 이름 |
| String | nodeValue | 노드의 값 |
| unsigned short | nodeType | 노드 타입 |
| Node | parentNode | 부모 노드 |
| NodeList | childNodes | 자식 노드 목록 |
| Node | firstChild | 첫 번째 자식 노드 |
| Node | lastChild | 마지막 자식 노드 |
| Node | previousSibling | 현재 노드와 같은 부모를 갖는 자식 노드 중 현재 노드 이전의 자식 노드 |
| Node | nextSibling | 현재 노드와 같은 부모를 갖는 자식 노드 중 현재 노드 다음의 자식 노드 |
| Document | ownerDocument | 이 노드가 포함된 Document 객체 |
NodeList는 length 와 item(i)를 제공한다.
- length : NodeList에 저장된 노드의 개수(NodeList의 길이)
- item(i) : 인덱스 i에 저장된 노드를 구함(i는 0부터 시작)
@ Node에 정의된 nodeType관련 상수값
| NodeType | Named Constant |
|---|---|
| 1 | ELEMENT_NODE |
| 2 | ATTRIBUTE_NODE |
| 3 | TEXT_NODE |
| 4 | CDATA_SECTION_NODE |
| 5 | ENTITY_REFERENCE_NODE |
| 6 | ENTITY_NODE |
| 7 | PROCESSING_INSTRUCTION_NODE |
| 8 | COMMENT_NODE |
| 9 | DOCUMENT_NODE |
| 10 | DOCUMENT_TYPE_NODE |
| 11 | DOCUMENT_FRAGMENT_NODE |
| 12 | NOTATION_NODE |
@ Document 인터페이스의 주요 프로퍼티 및 함수
- getElementsByTagName : 지정한 이름의 태그에 해당하는 NodeList를 구함
- getElementById : id 속성의 값이 일치하는 Element를 구함
@ Element 인터페이스의 주요 프로퍼티 및 함수
- getAttribute(String name) : name에 해당하는 속성의 값을 구한다.
- setAttribute(String name, String value) : 이름이 name인 속성의 값을 value로 지정한다.
- removeAttribute(String name) : 이름이 name인 속성을 제거한다.
@ Document 인터페이스의 Element 노드 생성 함수
- createElement(String tagName) : 지정한 태그 이름을 갖는 Element 노드를 생성한다.
- createTextNode(String text) : text를 값으로 갖는 Text 노드를 생성한다.
예)
var pNode =document.createElement("p");
var textNode= document.createTextNode("테스트");
pNode.appendChild(textNode);
var textNode= document.createTextNode("테스트");
pNode.appendChild(textNode);
@ Node 인터페이스의 DOM트리 변경 관련 함수
| 함 수 | 설명 |
| insertBefore(Node newChild, Node refChild) | 현재 노드의 자식 노드인 refChild 노드의 previousSibling 자리에 newChild 노드를 삽입 |
| replaceChild(Node newChild,Node oldChild) | 현재 노드의 자식 노드인 oldChild 노드를 새로운 newChild노드로 교체 |
| removeChild(Node oldChild) | 현재 노드의 자식 노드인 oldChild를 현재 노드에서 제거 |
| appendChild(Node newChild) | newChild 노드를 현재 노드의 마지막 자식 노드로 추가 |
@ responseXML 응답 읽어오기
XMLHttpRequest 객체는 XML문서를 응답 데이터로 사용할 수 있다. responseXML을 사용하면 된다.
@ XSL/T는 XML문서를 XSL을 사용해서 원하는 문서로 변환시킬 때 사용되는 기술.
주로 XML문서를 HTML문서로 변환할 때 많이 사용된다. XML을 읽어 온후 XSL을 읽어오고 XSL을 사용해서 XML을 HTML 코드로 변환해야 한다.
IE의 경우
bookList.innerHTML=xmlDoc.transformNode(xslDoc);
IE가 아닌 경우
var xsltProc = new XSLTProcessor();
xsltProc.importStylesheet(xslDoc);
var fragment = xsltProc.transformToFragment(xmlDoc,document);
bookList.appendChild(fragment);
xsltProc.importStylesheet(xslDoc);
var fragment = xsltProc.transformToFragment(xmlDoc,document);
bookList.appendChild(fragment);
innerHTML이 아닌 appencChild()함수를 사용하는 이유는 transformToFragment() 함수가
DOM트리의 노드를 생성하기 때문이다.
XSL 파일 코드
더보기
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes" encoding="euc-kr" />
<xsl:template match="books">
<ul>
<xsl:for-each select="book">
<li><b><xsl:value-of select="title" /></b>
(<i><xsl:value-of select="author" /></i>)
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes" encoding="euc-kr" />
<xsl:template match="books">
<ul>
<xsl:for-each select="book">
<li><b><xsl:value-of select="title" /></b>
(<i><xsl:value-of select="author" /></i>)
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>
XSL파일을 이용해서 XML문서를 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> 책 목록 </title>
<script type="text/javascript" src="httpRequest.js"></script>
<script type="text/javascript">
var xmlDoc=null;
var xslDoc=null;
function loadBooks(){
sendRequest("books.jsp",null,loadedBooksXML,"GET");
}
function loadedBooksXML(){
if(httpRequest.readyState==4){
if(httpRequest.status==200){
xmlDoc=httpRequest.responseXML;
sendRequest("books.xsl",null,loadedBooksXSL,"GET");
}
}
}
function loadedBooksXSL(){
if(httpRequest.readyState==4){
if(httpRequest.status==200){
xslDoc=httpRequest.responseXML;
doXSLT();
}
}
}
function doXSLT(){
if(xmlDoc==null||xslDoc==null)return;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title> 책 목록 </title>
<script type="text/javascript" src="httpRequest.js"></script>
<script type="text/javascript">
var xmlDoc=null;
var xslDoc=null;
function loadBooks(){
sendRequest("books.jsp",null,loadedBooksXML,"GET");
}
function loadedBooksXML(){
if(httpRequest.readyState==4){
if(httpRequest.status==200){
xmlDoc=httpRequest.responseXML;
sendRequest("books.xsl",null,loadedBooksXSL,"GET");
}
}
}
function loadedBooksXSL(){
if(httpRequest.readyState==4){
if(httpRequest.status==200){
xslDoc=httpRequest.responseXML;
doXSLT();
}
}
}
function doXSLT(){
if(xmlDoc==null||xslDoc==null)return;
var bookList=document.getElementById("bookList");
if(window.ActiveXObject){
bookList.innerHTML=xmlDoc.transformNode(xslDoc);
}else{
var xsltProc=new XSLTProcessor();
xsltProc.importStylesheet(xslDoc);
var fragment=xsltProc.transformToFragment(xmlDoc,document);
bookList.appendChild(fragment);
}
}
window.onload=function(){
loadBooks();
}
</script>
</head>
<body>
<h1>신규 책 목록</h1>
<div id="bookList"></div>
</body>
</html>
bookList.innerHTML=xmlDoc.transformNode(xslDoc);
}else{
var xsltProc=new XSLTProcessor();
xsltProc.importStylesheet(xslDoc);
var fragment=xsltProc.transformToFragment(xmlDoc,document);
bookList.appendChild(fragment);
}
}
window.onload=function(){
loadBooks();
}
</script>
</head>
<body>
<h1>신규 책 목록</h1>
<div id="bookList"></div>
</body>
</html>