歡迎！您似乎正在使用廣告攔截器。請考慮通過禁用您的廣告攔截器來支持我。

J.J.'s Blogs

Like Share Discussion Bookmark Smile

J.J. Huang   2022-11-16   XML 2.延伸介紹   瀏覽次數：次   DMCA.com Protection Status {{moment(1668560400000).fromNow()}}

XML教學 | XML DOM

XML DOM是什麼？

簡單來說Document Object Model (DOM)定義了訪問和操作文件的標準。

網頁是由瀏覽器負責運行，因此瀏覽器其實就是一種編譯器負責去編譯我們寫的網頁程式，
有很多間公司都在設計瀏覽器，所以需要先定好一個規則讓各個瀏覽器都必須要按照這個規則去編譯，
也因此W3C定義了非常多的網頁規則好讓各大瀏覽器可以按照這些規則去設計瀏覽器，其中DOM就是其中的一個定義。

註：W3C Document Object Model (DOM) 是一個平台和語言中立的接口，允許程式和腳本動態訪問和更新文件的內容、結構和樣式。

  • HTML DOM定義了訪問和操作HTML檔的標準方式。它將HTML檔呈現為樹結構。

    註：圖片截取於w3schools - JavaScript HTML DOM

  • XML DOM定義了訪問和操作XML文件的標準方式。它將XML檔呈現為樹結構。

    註：圖片截取於w3schools - XML Tree

注：對於使用HTML或XML的任何人來說，簡單的理解DOM是必須的。

HTML DOM範例

HTML元素都可以通過HTML DOM訪問。

範例使用 w3schools - Try xml change html

1
2
3
4
5
<h1 id="demo">This is a Heading</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello World!'">Click Me!
</button>

範例<html>說明：

  • 建立一個h1區塊，並設定id為demo。
    1
    <h1 id="demo">This is a Heading</h1>
  • 新增一個button，並在按下按鈕後觸發執行document.getElementById取得Element對象，再呼叫innerHTML設置HTML內容為Hello World!，
    1
    <button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello World!'">Click Me! </button>

    註：詳細Document.getElementById()，參考。
    註：詳細Element.innerHTML，參考。

執行效果：

XML DOM範例

通過XML DOM訪問所有XML元素。

範例使用 w3schools - Books.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>

  <book category="cooking">
    <title lang="en">Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>

  <book category="children">
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>

</bookstore>

以下程式碼就是從XML檔中取得第一個<title>元素的值：

1
2
3
4
5
6
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","Books.xml",true);
xmlhttp.send();

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

特別說明以下這段程式碼：

1
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
  • 從xmlDoc呼叫getElementsByTagName("title")[0]方法，取得第一個title元素。
    1
    <title lang="en">Everyday Italian</title>
  • 然後在乎叫childNodes[0]去得這個元素的子元素，這邊的子元素是”text”的這個元素。
    1
    Everyday Italian
  • 最後呼叫nodeValue要取得這個Text裡面的值。 
    1
    Everyday Italian

註：可以嘗試看看getElementsByTagName("title")[0]改為getElementsByTagName("title")[1]，看是否是取得Harry Potter。

執行效果：

範例使用 w3schools - Try dom load xml text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var parser, xmlDoc;
var text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</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>

範例<script>與<html>，在上一章節中就已經有完善的說明：參考

執行效果：

結語

此章節「簡單」介紹了XML DOM，使用簡單範例其訪問與操作。
透過更多的互動，更了解如何操作XML檔。至於更深入的XML DOM會放在很後面才會進行介紹和教學，莫急莫急。
下一章節將會介紹XML Namespaces的部份。


註：以上參考了
iT 邦幫忙- Andy Chen, Day03-深入理解網頁架構：DOM
MDN - Document.getElementById
MDN - Element.innerHTML
w3resource.com - XML DOM
RUNOOB.COM - XML DOM
維基百科-XML
Family with 220 icons by inipagi

本文由J.J. Huang 創作，採用CC BY 3.0 TW協議 進行許可。可自由轉載、引用，但需署名作者且註明文章出處。