目錄
XML簡介
一、初識XML
1.什么是 XML?
2.XML 和 HTML 之間的差異
3.XML 不會做任何事情
4.通過 XML 您可以發明自己的標簽
5.XML 不是對 HTML 的替代
二、XML 用途
1.XML 把數據從 HTML 分離
2.XML 簡化數據共享
3.XML 簡化數據傳輸
三、XML 樹結構
1.一個 XML 文檔實例
2.XML 文檔形成一種樹結構
四、XML 語法規則
1.XML 文檔必須有根元素
2.XML 聲明
3.所有的 XML 元素都必須有一個關閉標簽
4.XML 標簽對大小寫敏感
5.XML 必須正確嵌套
6.XML 屬性值必須加引號
7.實體引用
8.XML 中的注釋
9.在 XML 中,空格會被保留
五、XML 元素
1.什么是 XML 元素?
2.XML 命名規則
3.最佳命名習慣
4.XML 元素是可擴展的
六.XML 屬性
1.XML 屬性
2.XML 屬性必須加引號
3.XML 元素 vs. 屬性
4.避免 XML 屬性?
5.針對元數據的 XML 屬性
七、查看 XML 文件
1.查看 XML 文件
2.查看無效的 XML 文件
3.為什么 XML 顯示這個樣子?
八、使用 CSS 顯示 XML
1.使用 CSS 顯示您的 XML?
九、使用 XSLT 顯示 XML
1.使用 XSLT 顯示 XML
2.在服務器上通過 XSLT 轉換 XML
十、XML JavaScript
1.XMLHttpRequest 對象
2.XML 解析器
實例
總結
XML簡介
??XML 被設計用來傳輸和存儲數據。?
??HTML 被設計用來顯示數據
提示:以下是本篇文章正文內容,下面案例可供參考
一、初識XML
1.什么是 XML?
- XML 指可擴展標記語言(EXtensible Markup Language)。
- XML 是一種很像HTML的標記語言。
- XML 的設計宗旨是傳輸數據,而不是顯示數據。
- XML 標簽沒有被預定義。您需要自行定義標簽。
- XML 被設計為具有自我描述性。
- XML 是 W3C 的推薦標準
2.XML 和 HTML 之間的差異
XML 不是 HTML 的替代。
XML 和 HTML 為不同的目的而設計:
- XML 被設計用來傳輸和存儲數據,其焦點是數據的內容。
- HTML 被設計用來顯示數據,其焦點是數據的外觀。
HTML 旨在顯示信息,而 XML 旨在傳輸信息。
3.XML 不會做任何事情
也許這有點難以理解,但是 XML 不會做任何事情。XML 被設計用來結構化、存儲以及傳輸信息。
下面實例是 Jani 寫給 Tove 的便簽,存儲為 XML:
-
- <note>
- <to>Tove</to>
- <from>Jani</from>
- <heading>Reminder</heading>
- <body>Don't forget me this weekend!</body>
- </note>
上面的這條便簽具有自我描述性。它包含了發送者和接受者的信息,同時擁有標題以及消息主體。
但是,這個 XML 文檔仍然沒有做任何事情。它僅僅是包裝在 XML 標簽中的純粹的信息。我們需要編寫軟件或者程序,才能傳送、接收和顯示出這個文檔。
4.通過 XML 您可以發明自己的標簽
上面實例中的標簽沒有在任何 XML 標準中定義過(比如 <to> 和 <from>)。這些標簽是由 XML 文檔的創作者發明的。
這是因為 XML 語言沒有預定義的標簽。
HTML 中使用的標簽都是預定義的。HTML 文檔只能使用在 HTML 標準中定義過的標簽(如 <p>、<h1> 等等)。
XML 允許創作者定義自己的標簽和自己的文檔結構。
5.XML 不是對 HTML 的替代
XML 是對 HTML 的補充。
XML 不會替代 HTML,理解這一點很重要。在大多數 Web 應用程序中,XML 用于傳輸數據,而 HTML 用于格式化并顯示數據。
對 XML 最好的描述是:
XML 是獨立于軟件和硬件的信息傳輸工具。
二、XML 用途
XML 應用于 Web 開發的許多方面,常用于簡化數據的存儲和共享。
1.XML 把數據從 HTML 分離
如果您需要在 HTML 文檔中顯示動態數據,那么每當數據改變時將花費大量的時間來編輯 HTML。
通過 XML,數據能夠存儲在獨立的 XML 文件中。這樣您就可以專注于使用 HTML/CSS 進行顯示和布局,并確保修改底層數據不再需要對 HTML 進行任何的改變。
通過使用幾行 JavaScript 代碼,您就可以讀取一個外部 XML 文件,并更新您的網頁的數據內容。
2.XML 簡化數據共享
在真實的世界中,計算機系統和數據使用不兼容的格式來存儲數據。
XML 數據以純文本格式進行存儲,因此提供了一種獨立于軟件和硬件的數據存儲方法。
這讓創建不同應用程序可以共享的數據變得更加容易。
3.XML 簡化數據傳輸
對開發人員來說,其中一項最費時的挑戰一直是在互聯網上的不兼容系統之間交換數據。
由于可以通過各種不兼容的應用程序來讀取數據,以 XML 交換數據降低了這種復雜性。
三、XML 樹結構
XML 文檔形成了一種樹結構,它從"根部"開始,然后擴展到"枝葉"。
1.一個 XML 文檔實例
XML 文檔使用簡單的具有自我描述性的語法:
-
- <?xml version="1.0" encoding="UTF-8"?>
- <note>
- <to>Tove</to>
- <from>Jani</from>
- <heading>Reminder</heading>
- <body>Don't forget me this weekend!</body>
- </note>
第一行是 XML 聲明。它定義 XML 的版本(1.0)和所使用的編碼(UTF-8 : 萬國碼, 可顯示各種語言)。
下一行描述文檔的根元素(像在說:"本文檔是一個便簽"):
<note>
接下來 4 行描述根的 4 個子元素(to, from, heading 以及 body):
-
- <to>Tove</to>
- <from>Jani</from>
- <heading>Reminder</heading>
- <body>Don't forget me this weekend!</body>
最后一行定義根元素的結尾:
</note>
您可以假設,從這個實例中,XML 文檔包含了一張 Jani 寫給 Tove 的便簽。
XML 具有出色的自我描述性,您同意嗎?
2.XML 文檔形成一種樹結構
XML 文檔必須包含根元素。該元素是所有其他元素的父元素。
XML 文檔中的元素形成了一棵文檔樹。這棵樹從根部開始,并擴展到樹的最底端。
所有的元素都可以有子元素:
-
- <root>
- <child>
- <subchild>.....</subchild>
- </child>
- </root>
父、子以及同胞等術語用于描述元素之間的關系。父元素擁有子元素。相同層級上的子元素成為同胞(兄弟或姐妹)。
所有的元素都可以有文本內容和屬性(類似 HTML 中)。
實例:
上圖表示下面的 XML 中的一本書:
XML 文檔實例
-
- <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>
- <book category="WEB">
- <title lang="en">Learning XML</title>
- <author>Erik T. Ray</author>
- <year>2003</year>
- <price>39.95</price>
- </book>
- </bookstore>
實例中的根元素是 <bookstore>。文檔中的所有 <book> 元素都被包含在 <bookstore> 中。
<book> 元素有 4 個子元素:<title>、<author>、<year>、<price>。?
四、XML 語法規則
XML 的語法規則很簡單,且很有邏輯。這些規則很容易學習,也很容易使用。
1.XML 文檔必須有根元素
XML 必須包含根元素,它是所有其他元素的父元素,比如以下實例中 root 就是根元素:
-
- <root>
- <child>
- <subchild>.....</subchild>
- </child>
- </root>
以下實例中 note 是根元素:
-
- <?xml version="1.0" encoding="UTF-8"?>
- <note>
- <to>Tove</to>
- <from>Jani</from>
- <heading>Reminder</heading>
- <body>Don't forget me this weekend!</body>
- </note>
2.XML 聲明
XML 聲明文件的可選部分,如果存在需要放在文檔的第一行,如下所示:
<?xml version="1.0" encoding="utf-8"?>
以上實例定義 XML 的版本(1.0)和所使用的編碼(UTF-8 : 萬國碼, 可顯示各種語言)。
3.所有的 XML 元素都必須有一個關閉標簽
在 HTML 中,某些元素不必有一個關閉標簽:
- <p>This is a paragraph.
- <br>
在 XML 中,省略關閉標簽是非法的。所有元素都必須有關閉標簽:
- <p>This is a paragraph.</p>
- <br />
注釋:從上面的實例中,您也許已經注意到 XML 聲明沒有關閉標簽。這不是錯誤。聲明不是 XML 文檔本身的一部分,它沒有關閉標簽。
4.XML 標簽對大小寫敏感
XML 標簽對大小寫敏感。標簽 <Letter> 與標簽 <letter> 是不同的。
必須使用相同的大小寫來編寫打開標簽和關閉標簽:
- <Message>這是錯誤的</message>
- <message>這是正確的</message>
注釋:打開標簽和關閉標簽通常被稱為開始標簽和結束標簽。不論您喜歡哪種術語,它們的概念都是相同的。
5.XML 必須正確嵌套
在 HTML 中,常會看到沒有正確嵌套的元素:
<b><i>This text is bold and italic</b></i>
在 XML 中,所有元素都必須彼此正確地嵌套:
<b><i>This text is bold and italic</i></b>
在上面的實例中,正確嵌套的意思是:由于 <i> 元素是在 <b> 元素內打開的,那么它必須在 <b> 元素內關閉。
6.XML 屬性值必須加引號
- 與 HTML 類似,XML 元素也可擁有屬性(名稱/值的對)。
- 在 XML 中,XML 的屬性值必須加引號。
請研究下面的兩個 XML 文檔。 第一個是錯誤的,第二個是正確的:
- <note date=12/11/2007>
- <to>Tove</to>
- <from>Jani</from>
- </note>
- <note date="12/11/2007">
- <to>Tove</to>
- <from>Jani</from>
- </note>
在第一個文檔中的錯誤是,note 元素中的 date 屬性沒有加引號。
7.實體引用
在 XML 中,一些字符擁有特殊的意義。
如果您把字符 "<" 放在 XML 元素中,會發生錯誤,這是因為解析器會把它當作新元素的開始。
這樣會產生 XML 錯誤:
<message>if salary < 1000 then</message>
為了避免這個錯誤,請用實體引用來代替 "<" 字符:
<message>if salary < 1000 then</message>
在 XML 中,有 5 個預定義的實體引用:
< | < | less than |
> | > | greater than |
& | & | ampersand |
' | ' | apostrophe |
" | " | quotation mark |
注釋:在 XML 中,只有字符 "<" 和 "&" 確實是非法的。大于號是合法的,但是用實體引用來代替它是一個好習慣。
8.XML 中的注釋
在 XML 中編寫注釋的語法與 HTML 的語法很相似。
<!-- This is a comment -->
9.在 XML 中,空格會被保留
HTML 會把多個連續的空格字符裁減(合并)為一個:
HTML: | Hello Tove |
輸出結果: | Hello Tove |
在 XML 中,文檔中的空格不會被刪減。
五、XML 元素
XML 文檔包含 XML 元素。
1.什么是 XML 元素?
XML 元素指的是從(且包括)開始標簽直到(且包括)結束標簽的部分。
一個元素可以包含:
- 其他元素
- 文本
- 屬性
- 或混合以上所有...
- <bookstore>
- <book category="CHILDREN">
- <title>Harry Potter</title>
- <author>J K. Rowling</author>
- <year>2005</year>
- <price>29.99</price>
- </book>
- <book category="WEB">
- <title>Learning XML</title>
- <author>Erik T. Ray</author>
- <year>2003</year>
- <price>39.95</price>
- </book>
- </bookstore>
在上面的實例中,<bookstore> 和 <book> 都有 元素內容,因為他們包含其他元素。<book> 元素也有屬性(category="CHILDREN")。<title>、<author>、<year> 和 <price> 有文本內容,因為他們包含文本。
2.XML 命名規則
XML 元素必須遵循以下命名規則:
- 名稱可以包含字母、數字以及其他的字符
- 名稱不能以數字或者標點符號開始
- 名稱不能以字母 xml(或者 XML、Xml 等等)開始
- 名稱不能包含空格
可使用任何名稱,沒有保留的字詞。
3.最佳命名習慣
- 使名稱具有描述性。使用下劃線的名稱也很不錯:<first_name>、<last_name>。
- 名稱應簡短和簡單,比如:<book_title>,而不是:<the_title_of_the_book>。
- 避免 "-" 字符。如果您按照這樣的方式進行命名:"first-name",一些軟件會認為您想要從 first 里邊減去 name。
- 避免 "." 字符。如果您按照這樣的方式進行命名:"first.name",一些軟件會認為 "name" 是對象 "first" 的屬性。
- 避免 ":" 字符。冒號會被轉換為命名空間來使用(稍后介紹)。
- XML 文檔經常有一個對應的數據庫,其中的字段會對應 XML 文檔中的元素。有一個實用的經驗,即使用數據庫的命名規則來命名 XML 文檔中的元素。
- 在 XML 中,éòá 等非英語字母是完全合法的,不過需要留意,您的軟件供應商不支持這些字符時可能出現的問題。
4.XML 元素是可擴展的
XML 元素是可擴展,以攜帶更多的信息。
請看下面的 XML 實例:
-
- <note>
- <to>Tove</to>
- <from>Jani</from>
- <body>Don't forget me this weekend!</body>
- </note>
讓我們設想一下,我們創建了一個應用程序,可將 <to>、<from> 以及 <body> 元素從 XML 文檔中提取出來,并產生以下的輸出:
MESSAGE To: Tove Don't forget me this weekend! |
想象一下,XML 文檔的作者添加的一些額外信息:
-
- <note>
- <date>2008-01-10</date>
- <to>Tove</to>
- <from>Jani</from>
- <heading>Reminder</heading>
- <body>Don't forget me this weekend!</body>
- </note>
那么這個應用程序會中斷或崩潰嗎?
不會。這個應用程序仍然可以找到 XML 文檔中的 <to>、<from> 以及 <body> 元素,并產生同樣的輸出。
XML 的優勢之一,就是可以在不中斷應用程序的情況下進行擴展。
六.XML 屬性
XML元素具有屬性,類似 HTML。
屬性(Attribute)提供有關元素的額外信息。
1.XML 屬性
在 HTML 中,屬性提供有關元素的額外信息:
- <img src="computer.gif">
- <a href="demo.html">
屬性通常提供不屬于數據組成部分的信息。在下面的實例中,文件類型與數據無關,但是對需要處理這個元素的軟件來說卻很重要:
<file type="gif">computer.gif</file>
2.XML 屬性必須加引號
屬性值必須被引號包圍,不過單引號和雙引號均可使用。比如一個人的性別,person 元素可以這樣寫:
<person sex="female">
或者這樣也可以:
<person sex='female'>
如果屬性值本身包含雙引號,您可以使用單引號,就像這個實例:
<gangster name='George "Shotgun" Ziegler'>
或者您可以使用字符實體:
<gangster name="George "Shotgun" Ziegler">
3.XML 元素 vs. 屬性
請看這些實例:
- <person sex="female">
- <firstname>Anna</firstname>
- <lastname>Smith</lastname>
- </person>
-
-
-
- <person>
- <sex>female</sex>
- <firstname>Anna</firstname>
- <lastname>Smith</lastname>
- </person>
在第一個實例中,sex 是一個屬性。在第二個實例中,sex 是一個元素。這兩個實例都提供相同的信息。
沒有什么規矩可以告訴我們什么時候該使用屬性,而什么時候該使用元素。我的經驗是在 HTML 中,屬性用起來很便利,但是在 XML 中,您應該盡量避免使用屬性。如果信息感覺起來很像數據,那么請使用元素吧。
4.避免 XML 屬性?
因使用屬性而引起的一些問題:
- 屬性不能包含多個值(元素可以)
- 屬性不能包含樹結構(元素可以)
- 屬性不容易擴展(為未來的變化)
屬性難以閱讀和維護。請盡量使用元素來描述數據。而僅僅使用屬性來提供與數據無關的信息。
不要做這樣的蠢事(這不是 XML 應該被使用的方式):
<note day="10" month="01" year="2008"
to="Tove" from="Jani" heading="Reminder"
body="Don't forget me this weekend!">
</note>
5.針對元數據的 XML 屬性
有時候會向元素分配 ID 引用。這些 ID 索引可用于標識 XML 元素,它起作用的方式與 HTML 中 id 屬性是一樣的。這個實例向我們演示了這種情況:
- <messages>
- <note id="501">
- <to>Tove</to>
- <from>Jani</from>
- <heading>Reminder</heading>
- <body>Don't forget me this weekend!</body>
- </note>
- <note id="502">
- <to>Jani</to>
- <from>Tove</from>
- <heading>Re: Reminder</heading>
- <body>I will not</body>
- </note>
- </messages>
上面的 id 屬性僅僅是一個標識符,用于標識不同的便簽。它并不是便簽數據的組成部分。
在此我們極力向您傳遞的理念是:元數據(有關數據的數據)應當存儲為屬性,而數據本身應當存儲為元素。
七、查看 XML 文件
在所有主流的瀏覽器中,均能夠查看原始的 XML 文件。
不要指望 XML 文件會直接顯示為 HTML 頁面。
1.查看 XML 文件
- <?xml version="1.0" encoding="ISO-8859-1"?>
-
- - <note>
-
- <to>Tove</to>
-
- <from>Jani</from>
-
- <heading>Reminder</heading>
-
- <body>Don't forget me this weekend!</body>
- </note>
XML 文檔將顯示為代碼顏色化的根以及子元素。通過點擊元素左側的加號(+)或減號( - ),可以展開或收起元素的結構。要查看原始的 XML 源(不包括 + 和 - 符號),選擇"查看頁面源代碼"或從瀏覽器菜單"查看源文件"。
注釋:在 Safari 中,只有元素的文本將被顯示。要查看原始的 XML,您必須右鍵單擊頁面,選擇"查看源文件"。
2.查看無效的 XML 文件
餐菜單,存儲為 XML 數據。
3.為什么 XML 顯示這個樣子?
- XML 文檔不會攜帶有關如何顯示數據的信息。
- 由于 XML 標簽由 XML 文檔的作者"發明",瀏覽器無法確定像 <table> 這樣一個標簽究竟描述一個 HTML 表格還是一個餐桌。
- 在沒有任何有關如何顯示數據的信息的情況下,大多數的瀏覽器都會僅僅把 XML 文檔顯示為源代碼。
- 后續,我們會了解幾個有關這個顯示問題的解決方案,其中會使用 CSS、XSLT 和 JavaScript
八、使用 CSS 顯示 XML
通過使用 CSS(Cascading Style Sheets 層疊樣式表),您可以添加顯示信息到 XML 文檔中。
1.使用 CSS 顯示您的 XML?
使用 CSS 來格式化 XML 文檔是有可能的。
下面是 XML 文件的一小部分。
- <?xml version="1.0" encoding="ISO-8859-1"?>
- <?xml-stylesheet type="text/css" href="cd_catalog.css"?>
- <CATALOG>
- <CD>
- <TITLE>Empire Burlesque</TITLE>
- <ARTIST>Bob Dylan</ARTIST>
- <COUNTRY>USA</COUNTRY>
- <COMPANY>Columbia</COMPANY>
- <PRICE>10.90</PRICE>
- <YEAR>1985</YEAR>
- </CD>
- <CD>
- <TITLE>Hide your heart</TITLE>
- <ARTIST>Bonnie Tyler</ARTIST>
- <COUNTRY>UK</COUNTRY>
- <COMPANY>CBS Records</COMPANY>
- <PRICE>9.90</PRICE>
- <YEAR>1988</YEAR>
- </CD>
- .
- .
- .
- </CATALOG>
第二行把 XML 文件鏈接到 CSS 文件:
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
使用 CSS 格式化 XML 不是常用的方法。
九、使用 XSLT 顯示 XML
通過使用 XSLT,您可以把 XML 文檔轉換成 HTML 格式。
1.使用 XSLT 顯示 XML
- XSLT 是首選的 XML 樣式表語言。
- XSLT(eXtensible Stylesheet Language Transformations)遠比 CSS 更加完善。
- XSLT 是在瀏覽器顯示 XML 文件之前,先把它轉換為 HTML。
2.在服務器上通過 XSLT 轉換 XML
在上面的實例中,當瀏覽器讀取 XML 文件時,XSLT 轉換是由瀏覽器完成的。
在使用 XSLT 來轉換 XML 時,不同的瀏覽器可能會產生不同結果。為了減少這種問題,可以在服務器上進行 XSLT 轉換。
十、XML JavaScript
1.XMLHttpRequest 對象
XMLHttpRequest 對象用于在后臺與服務器交換數據。
XMLHttpRequest 對象是開發者的夢想,因為您能夠:
- 在不重新加載頁面的情況下更新網頁
- 在頁面已加載后從服務器請求數據
- 在頁面已加載后從服務器接收數據
- 在后臺向服務器發送數據
創建一個 XMLHttpRequest 對象
所有現代瀏覽器(IE、Firefox、Chrome、Safari 和 Opera)都有內建的 XMLHttpRequest 對象。
創建 XMLHttpRequest 對象的語法:
xmlhttp=new XMLHttpRequest();
2.XML 解析器
所有現代瀏覽器都有內建的 XML 解析器。
XML 解析器把 XML 文檔轉換為 XML DOM 對象 - 可通過 JavaScript 操作的對象。
解析 XML 文檔
下面的代碼片段把 XML 文檔解析到 XML DOM 對象中:
- 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;
解析 XML 字符串
下面的代碼片段把 XML 字符串解析到 XML DOM 對象中:
- txt="<bookstore><book>";
- txt=txt+"<title>Everyday Italian</title>";
- txt=txt+"<author>Giada De Laurentiis</author>";
- txt=txt+"<year>2005</year>";
- txt=txt+"</book></bookstore>";
-
- if (window.DOMParser)
- {
- parser=new DOMParser();
- xmlDoc=parser.parseFromString(txt,"text/xml");
- }
- else // Internet Explorer
- {
- xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
- xmlDoc.async=false;
- xmlDoc.loadXML(txt);
- }
注釋:Internet Explorer 使用 loadXML() 方法來解析 XML 字符串,而其他瀏覽器使用 DOMParser 對象。
跨域訪問
出于安全方面的原因,現代的瀏覽器不允許跨域的訪問。
這意味著,網頁以及它試圖加載的 XML 文件,都必須位于相同的服務器上。
3.XML DOM
DOM(Document Object Model 文檔對象模型)定義了訪問和操作文檔的標準方法。
XML DOM
XML DOM(XML Document Object Model)定義了訪問和操作 XML 文檔的標準方法。
XML DOM 把 XML 文檔作為樹結構來查看。
所有元素可以通過 DOM 樹來訪問。可以修改或刪除它們的內容,并創建新的元素。元素,它們的文本,以及它們的屬性,都被認為是節點。
HTML DOM
HTML DOM 定義了訪問和操作 HTML 文檔的標準方法。
所有 HTML 元素可以通過 HTML DOM 來訪問。
加載一個 XML 文件 - 跨瀏覽器實例
下面的實例把 XML 文檔("note.xml")解析到 XML DOM 對象中,然后通過 JavaScript 提取一些信息:
實例
- <html>
- <body>
- <h1>W3Schools Internal Note</h1>
- <div>
- <b>To:</b> <span id="to"></span><br />
- <b>From:</b> <span id="from"></span><br />
- <b>Message:</b> <span id="message"></span>
- </div>
-
- <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","note.xml",false);
- xmlhttp.send();
- xmlDoc=xmlhttp.responseXML;
-
- document.getElementById("to").innerHTML=
- xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
- document.getElementById("from").innerHTML=
- xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
- document.getElementById("message").innerHTML=
- xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
- </script>
-
- </body>
- </html>
重要注釋!
如需從上面的 XML 文件("note.xml")的 <to> 元素中提取文本 "Tove",語法是:
getElementsByTagName("to")[0].childNodes[0].nodeValue
請注意,即使 XML 文件只包含一個 <to> 元素,您仍然必須指定數組索引 [0]。這是因為 getElementsByTagName() 方法返回一個數組。
4.HTML 頁面顯示 XML 數據
在 HTML 頁面中顯示 XML 數據
在下面的實例中,我們打開一個 XML 文件("cd_catalog.xml"),然后遍歷每個 CD 元素,并顯示HTML 表格中的 ARTIST 元素和 TITLE 元素的值:
- <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","cd_catalog.xml",false);
- xmlhttp.send();
- xmlDoc=xmlhttp.responseXML;
-
- document.write("<table border='1'>");
- var x=xmlDoc.getElementsByTagName("CD");
- for (i=0;i<x.length;i++)
- {
- document.write("<tr><td>");
- document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
- document.write("</td><td>");
- document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
- document.write("</td></tr>");
- }
- document.write("</table>");
- </script>
- </body>
- </html>
總結
本文參考W3school