XML DOM 튜토리얼

DOM이 무엇인가요?

DOM은 문서에 대한 접근 및操作의 표준을 정의합니다：

“W3C 문서 객체 모델 (DOM)은 플랫폼과 언어에 관계없는 인터페이스로, 프로그램과 스크립트가 문서의 내용, 구조, 스타일을 동적으로 접근하고 업데이트할 수 있게 합니다.”

HTML DOM은 HTML 문서에 대한 접근 및操作의 표준 방법을 정의합니다. 그것은 HTML 문서를 트리 구조로 표현합니다.

XML DOM은 XML 문서에 대한 접근 및操作의 표준 방법을 정의합니다. 그것은 XML 문서를 트리 구조로 표현합니다.

HTML 또는 XML을 사용하는 모든 사람들에게 DOM을 이해하는 것은 필수입니다.

HTML DOM

모든 HTML 요소는 HTML DOM을 통해 접근할 수 있습니다.

예제 1

이 예제에서 id="demo"의 HTML 요소의 값을 변경합니다：

<h1 id="demo">이는 제목입니다</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

직접 테스트해 보세요

예제 2

이 예제에서 HTML 문서에서 첫 번째 <h1> 요소의 값을 변경합니다：

<h1>이는 제목입니다</h1>
<h1>이는 제목입니다</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

직접 테스트해 보세요

주의:HTML 문서가 단 하나의 <h1> 요소만 포함되어 있어도, getElementsByTagName() 메서드가 항상 배열을 반환하기 때문에 배열 인덱스 [0]를 지정해야 합니다.

HTML DOM에 대한 더 많은 내용을 JavaScript 강의에서 배울 수 있습니다.

XML DOM

모든 XML 요소는 XML DOM을 통해 접근할 수 있습니다.

XML DOM은 다음과 같습니다:

  • XML의 표준 객체 모델
  • XML의 표준 프로그래밍 인터페이스
  • 플랫폼과 언어에 독립적입니다
  • W3C 표준

다른 말로 하면: XML DOM은 XML 요소를 가져오기, 변경하기, 추가하기, 또는 제거하기 위한 표준입니다.

XML 요소의 값을 가져옵니다

이 예제에서 XML 문서에서 첫 번째 <title> 요소의 텍스트 값을 검색합니다：

예제

txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

XML 파일을 로드합니다

이 예제에서 사용하는 XML 파일은 books.xml입니다。

이 예제에서 "books.xml"를 xmlDoc에 읽어들여서 books.xml에서 첫 번째 <title> 요소의 텍스트 값을 검색합니다：

예제

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    document.getElementById("demo").innerHTML =
    xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>

직접 테스트해 보세요

예제 설명

  1. xmlDoc - 파서로 생성된 XML DOM 객체
  2. getElementsByTagName("title")[0] - 첫 번째 <title> 요소를 가져옵니다
  3. childNodes[0] - <title> 요소의 첫 번째 자식 노드(텍스트 노드)
  4. nodeValue - 노드의 값(텍스트 자체)

XML 문자열 로드

이 예제에서는 텍스트 문자열을 XML DOM 객체에 로드하고 JavaScript를 사용하여 정보를 추출합니다:

예제

<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>"
"<title>雅舍谈吃</title>" +
"<author>梁实秋</author>" +
"<year>2013</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

직접 테스트해 보세요

프로그래밍 인터페이스

DOM은 XML을 노드 객체의 집합으로 모델링합니다. JavaScript나 다른 프로그래밍 언어를 사용하여 노드에 접근할 수 있습니다. 이 튜토리얼에서는 JavaScript를 사용합니다.

DOM의 프로그래밍 인터페이스는 일련의 표준 속성과 메서드로 정의됩니다.

속성일반적으로 무엇인지를 의미합니다(예를 들어 nodename이 "book"입니다)

메서드일반적으로 무엇을 할 수 있는지를 의미합니다(예를 들어 "book"을 삭제하는 동작)

XML DOM 속성

이들은 일반적인 DOM 속성입니다:

  • x.nodeName - x의 이름
  • x.nodeValue - x의 값
  • x.parentNode - x의 부모 노드
  • x.childNodes - x의 자식 노드
  • x.attributes - x의 속성 노드

주의:위의 목록에서 x는 노드 객체입니다.

XML DOM 메서드

  • x.getElementsByTagName(name) - 지정된 태그 이름을 가진 모든 요소를 가져옵니다
  • x.appendChild(node) - x에 자식 노드를 추가합니다
  • x.removeChild(node) - x에서 자식 노드를 제거합니다

주의:위의 목록에서,x 노드 객체입니다.