XML DOM 고급
XML DOM - 고급
이 튜토리얼의 이전 장에서는 XML DOM을 소개하고 XML DOM의 getElementsByTagName() 메서드를 사용하여 XML 문서에서 데이터를 검색했습니다. 데이터를 검색합니다.
이 장에서는 다른 중요한 XML DOM 메서드를 결합해 보겠습니다.
XML DOM 튜토리얼에서 XML DOM에 대해 자세히 알아볼 수 있습니다.
요소 값 가져오기
아래 예에 사용된 XML 파일: books.xml.
다음 예에서는 첫 번째 <title> 요소의 텍스트 값을 검색합니다.
예
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
속성 값 가져오기
다음 인스턴스는 <title> 요소의 "lang" 속성의 첫 번째 텍스트 값을 검색합니다.
Instance
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");
document.write(txt);
</script>
</body>
</html>인스턴스 실행 중»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.
요소 값 변경
다음 예에서는 첫 번째 <title> 요소의 값을 변경합니다. 텍스트 값:
Instance
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;
document.write(txt);
</script>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
새 속성 만들기
XML DOM의 setAttribute() 메서드는 기존 속성 값을 변경하거나 새 속성을 만드는 데 사용됩니다.
다음 예에서는 새 속성(edition="first")을 생성하고 이를 각 <book> 요소에 추가합니다.
예
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("book");
for(i=0;i<x.length;i++)
{
x[i].setAttribute("edition","first");
}
//Output all attribute values
for (i=0;i<x.length;i++)
{
document.write("Category: " + x[i].getAttribute('category') + "<br>");
document.write("Edition: " + x[i].getAttribute('edition') + "<br>");
}
</script>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
생성 createElement( )
요소의 메서드 XML DOM은 새 요소 노드를 생성합니다.
XML DOM의 createTextNode() 메서드는 새 텍스트 노드를 생성합니다.
XML DOM의appendChild() 메서드는 노드에 하위 노드를 추가합니다(마지막 하위 노드 뒤에).
텍스트 콘텐츠가 포함된 새 요소를 만들려면 새 요소 노드와 새 텍스트 노드를 동시에 만든 다음 기존 노드에 추가해야 합니다.
다음 예에서는 다음 텍스트를 사용하여 새 요소(<edition>)를 만든 다음 이를 첫 번째 <book> 요소에 추가합니다.
인스턴스 설명
<edition> 요소 생성
값이 "First"인 텍스트 노드 생성
-
이 텍스트 노드를 새 <edition> 요소에 추가합니다.
<edition> 요소를 첫 번째 <book> 요소에 추가합니다.
요소 삭제
인스턴스
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
newel=xmlDoc.createElement("edition");
newtext=xmlDoc.createTextNode("First");
newel.appendChild(newtext);
x=xmlDoc.getElementsByTagName("book");
x[0].appendChild(newel);
for (i=0;i<x[0].childNodes.length;i++)
{
if (x[0].childNodes[i].nodeType==1)
{
document.write(x[0].childNodes[i].nodeName);
document.write(": ");
document.write(x[0].childNodes[i].childNodes[0].nodeValue);
document.write("<br>");
}
}
</script>
</body>
</html>인스턴스 실행»
"인스턴스 실행"을 클릭합니다. 온라인 보기 버튼 예
참고: 위 예의 결과는 사용하는 브라우저에 따라 다를 수 있습니다. Firefox는 개행 문자를 빈 텍스트 노드로 처리하지만 Internet Explorer는 그렇지 않습니다. XML DOM 튜토리얼에서 이 문제와 이를 방지하는 방법에 대해 자세히 알아볼 수 있습니다.
