1번 nodeValFunc(this);
<번호>와 <이름>의 value를 출력
index
<!-- 파씽방법2 -->
<!-- xml파일 -->
<title>Insert title here</title>
</head>
<body>
<p id="demo"></p>
<script type="text/javascript">
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
/* 아래 함수 호출 */
nodeValFunc(this);
}
}
xhttp.open("GET", 'client.xml', true);
xhttp.send();
function nodeValFunc(xml) {/* Node들의 값 정하기 */
let num, name;
let txt, numtxt, xmlDoc;
txt = numtxt = "";
xmlDoc = xml.responseXML;/* obj로 document 전체가 넘어옴 */
console.log(xmlDoc);
num = xmlDoc.getElementsByTagName("번호");
name = xmlDoc.getElementsByTagName("이름");
console.log(num.length);/* 배열로 넘어옴 */
for (i = 0; i < num.length; i++) {
txt += num[i].childNodes[0].nodeValue + "<br>";
numtxt += name[i].childNodes[0].nodeValue +"<br>";
}
document.getElementById("demo").innerHTML = txt + numtxt;
}
</script>
</body>
2번 nodeNameFunc(this);
nodeName을 있는만큼 출력
<body>
<p id="demo"></p>
<script type="text/javascript">
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
/* 아래 함수 호출 */
//nodeValFunc(this);
nodeNameFunc(this);
//childNodeFunc(this);
}
}
xhttp.open("GET", 'client.xml', true);
xhttp.send();
function nodeNameFunc(xml) {
let arr, xmlDoc, txt;
txt = "";
xmlDoc = xml.responseXML;/* 파씽되서 넘어오는 부분 */
arr = xmlDoc.documentElement.childNodes;/* 배열로 받음 */
for (i = 0; i < arr.length; i++) {
if (arr[i].nodeType == 1) {
txt += arr[i].nodeName + "<br>";
}
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
3번 childNodeFunc(this);
<고객> Tag아래 해당 번호와 fchild.nodeName 출력
<body>
<p id="demo"></p>
<script type="text/javascript">
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
/* 아래 함수 호출 */
//nodeValFunc(this);
//nodeNameFunc(this);
childNodeFunc(this);
}
}
xhttp.open("GET", 'client.xml', true);
xhttp.send();
function childNodeFunc(xml) {
let arr, xmlDoc, txt;
txt = "";
xmlDoc = xml.responseXML;
arr = xmlDoc.getElementsByTagName("고객")[0];
let len = arr.childNodes.length;
console.log(len);/* 답 : 9 -> <고객>포함 </>전까지태그가 9개 */
let fchild = arr.firstChild;/* 첫번째 태그부터 */
for (i = 0; i < len; i++) {
if (fchild.nodeType == 1){
txt += i + " " + fchild.nodeName + "<br>";
}
fchild = fchild.nextSibling;/* 그 다음태그로 넘겨주는 작업 */
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
client.xml 소스
<?xml version="1.0" encoding="UTF-8"?>
<고객들>
<고객>
<번호>1</번호>
<이름>홍길동</이름>
<주소>서울시</주소>
<방문>2020/01/23</방문>
</고객>
<고객>
<번호>2</번호>
<이름>성춘향</이름>
<주소>부산시</주소>
<방문>2011/11/21</방문>
</고객>
<고객>
<번호>3</번호>
<이름>일지매</이름>
<주소>광주</주소>
<방문>2016/06/12</방문>
</고객>
</고객들>
'XML & JSON' 카테고리의 다른 글
| JSON // 기본 (String <--> Json 호환) (0) | 2020.07.14 |
|---|---|
| JSON// tabel// key 포함값가져오기 (0) | 2020.07.14 |
| XML//외부파일에서 불러와 파씽 (0) | 2020.07.14 |
| XML//table//DOM을 이용한 파씽 (0) | 2020.07.14 |
| XML// 기본 (0) | 2020.07.14 |
