HTML 頁面顯示 XML 數據

HTML 頁面中顯示 XML 數據

在下面的實例中，我們打開一個 XML 文件（"cd_catalog.xml"），然后遍歷每個 CD 元素，并顯示HTML 表格中的 ARTIST 元素和 TITLE 元素的值：

實例

<html>

<body>

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>

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

用XMLSpy編輯與約束XML文件操作

一、XML文件介紹

可擴展標記語言，標準通用標記語言的子集，簡稱XML。是一種用于標記電子文件使其具有結構性的標記語言。

XML文件格式是純文本格式，在許多方面類似于HTML，XML由XML元素組成，每個XML元素包括一個開始標記（<title>），一個結束標記（</title>）以及兩個標記之間的內容，例如，可以將XML元素標記為價格、訂單編號或名稱。標記是對文檔存儲格式和邏輯結構的描述。在形式上，標記中可能包括注釋、引用、字符數據段、起始標記、結束標記、空元素、文檔類型聲明( DTD)和序言。

XML文件的作用是可以定義數據交流的標準或系統配置參數，有一段時間預測是可以替代HTML的標簽語言，但是后來發展不理想，沒有成為HTML網頁的替代方案。但是XML文件在數據交流中還是非常有用的，尤其是在進行數據交流標準的定義中，不同用戶按事先約定好的XML標簽格式傳遞數據，雙方就可以交流數據。其規范性要強于json文件格式

具體規則如下：

1、必須有聲明語句。

XML聲明是XML文檔的第一句，其格式如下：

<?xml version="1.0" encoding="utf-8"?>

2、注意大小寫

在XML文檔中，大小寫是有區別的。"<P>"和"<p>"是不同的標記。注意在寫元素時，前后標記的大小寫要保持一致。

3、XML文檔有且只有一個根元素

XML文檔必須有一個根元素，就是緊接著聲明后面建立的第一個元素，其他元素都是這個根元素的子元素，根元素完全包括文檔中其他所有的元素。根元素的起始標記要放在所有其他元素的起始標記之前；根元素的結束標記要放在所有其他元素的結束標記之后。例如

<?xml version="1.0" encoding="utf-8"?>
<data>
         XXXXXX
</data>

4、屬性值使用引號

在HTML代碼里面，屬性值可以加引號，也可以不加。但是XML規定，所有屬性值必須加引號（可以是單引號，也可以是雙引號，建議使用雙引號），否則將被視為錯誤。

<?xml version="1.0" encoding="utf-8"?>
		<data name="school_data">
					XXXXXX
		</data>

5、所有的標記必須有相應的結束標記

在HTML中，標記可以不成對出現，而在XML中，所有標記必須成對出現，有一個開始標記，就必須有一個結束標記，否則將被視為錯誤。

<?xml version="1.0" encoding="utf-8"?>
<data name=”school_data”>
	<school name=”ncist”>
		<myclass name="計算機B191">
            <student id="001">
                <realname>張一</realname>
                <sex>男</sex>
                <age>21</age>
            </student>
        </myclass>
	</school>
	<school name=”pku”>
		<myclass name="物聯網B191">
            <student id="001">
                <realname>王一</realname>
                <sex>女</sex>
                <age>19</age>
            </student>
        </myclass>
	</school>
</data>

6、所有的空標記也必須被關閉

空標記是指標記對之間沒有內容的標記，比如"<img></img>"等標記。在XML中，規定所有的標記必須有結束標記。

二、XMLSpy軟件介紹

XMLSpy 是來自Altova的一款方便實用，功能強大的XML（標準通用標記語言的子集）編輯器。軟件支持WYSWYG，支持Unicode、多字符集，支持Well-formed和Validated兩種類型的XML文檔，支持NewsML等多種標準XML文檔的編輯，軟件在原來的基礎上增加了幾個很有用的功能，會讓XML代碼的處理更容易，是J2EE,.NET和數據庫開發人員不可缺少的高性能的開發工具。網上搜索需要的版本安裝就可以了。

XMLSpy 軟件界面

XMLSpy 編輯界面

三、利用XMLSpy軟件編輯XML文件

1、建立一個XML樣例文件

首先利用任意文本編輯器，建立一個普通的XML文件，里面含有基本的XML數據結構。

<?xml version="1.0" encoding="UTF-8" ?>
<data>
    <school name="ncist001">
        <myclass name="計算機001">
            <student id="001">
                <realname>張一</realname>
                <sex>男</sex>
                <age>21</age>
            </student>
        </myclass>
    </school>
</data>

2、利用XMLSpy軟件生成約束文件

利用XMLSpy軟件打開此文件，分析生成約束XSD文件。這步很關鍵。會提示是否應用約束等，基本都是默認確認就可以了。軟件自動在XML文件中建立約束的語句。這種方法可以快速生成約束文件，在此基礎上進行修改，能夠快速完成約束文件的生成。

帶有約束的XML文件

生成約束文件

xsd約束文件

3、修改約束文件xsd

軟件自動生成了約束文件xsd，但是這個約束文件有問題。主要是它采用扁平化方法，描述各個元素的層級關系。所謂扁平化描述，就是指描述本層和它所包含的下一層的元素。

注意點：

1　 data是根目錄，它只描述的data的類型，和含有的下一級子元素。具體下一級子元素的詳細描述，又采用扁平化方法在下面描述了

2　 在描述中，元素的屬性數據類型都進行了約束，問題在于后面采用枚舉，限定的數據內容，因此需要把枚舉的內容刪除掉。

3　在元素的描述中，沒有限定數據數量，默認就是1個。應該添加不限定。方法是自己寫，或者在添加一個元素，然后再生成約束文件，分析文件就可以了。

xsd約束文件

4、XML可視化

XMLSpy軟件提供了一種可視化結構展示，非常方便查看自己的XML約束條件。

xml可視化

5、約束文件地址修改

XML文件中引用的約束文件為絕對地址，不適合發布使用。把它修改為相對地址，xml和xsd文件在同一個文件夾中。

xsd地址

6、約束檢查

XML約束檢查，如果是用XMLSpy軟件，如果有問題，會報錯，不讓保存。根據提示錯誤，可以修改xsd文件或者XML文件

約束檢查結果

四、pycharm軟件中生成約束xsd文件

利用pycharm也可以生成XSD文件，但是文件的描述感覺沒有XMLSpy軟件描述的清晰，如下圖，不適用。Pycharm不能進行XML規則檢查。

pycharm編輯xml

xml文件

五、Python讀寫XML文件

常見的 XML 編程接口有 DOM 和 SAX，這兩種接口處理 XML 文件的方式不同，當然使用場合也不同。

Python 有三種方法解析 XML，就是SAX，DOM，以及 ElementTree。

1.SAX (simple API for XML )

Python 標準庫包含 SAX 解析器，SAX 用事件驅動模型，通過在解析XML的過程中觸發一個個的事件并調用用戶定義的回調函數來處理XML文件。

2.DOM(Document Object Model)

將 XML 數據在內存中解析成一個樹，通過對樹的操作來操作XML。

3.ElementTree(元素樹)

ElementTree就像一個輕量級的DOM，具有方便友好的API。代碼可用性好，速度快，消耗內存少。

注：因DOM需要將XML數據映射到內存中的樹，一是比較慢，二是比較耗內存，而SAX流式讀取XML文件，比較快，占用內存少，但需要用戶實現回調函數（handler）。

代碼如下：

家好，我是皮皮。

前言

對于前端來說，HTML 都是最基礎的內容。

今天，我們來了解一下 HTML 和網頁有什么關系，以及與 DOM 有什么不同。通過本講內容，你將掌握瀏覽器是怎么處理 HTML 內容的，以及在這個過程中我們可以進行怎樣的處理來提升網頁的性能，從而提升用戶的體驗。

一、瀏覽器頁面加載過程

不知你是否有過這樣的體驗：當打開某個瀏覽器的時候，發現一直在轉圈，或者等了好長時間才打開頁面……

此時的你，會選擇關掉頁面還是耐心等待呢？

這一現象，除了網絡不穩定、網速過慢等原因，大多數都是由于頁面設計不合理導致加載時間過長導致的。

我們都知道，頁面是用 HTML/CSS/JavaScript 來編寫的。

HTML 的職責在于告知瀏覽器如何組織頁面，以及搭建頁面的基本結構；
CSS 用來裝飾 HTML，讓我們的頁面更好看；
JavaScript 則可以豐富頁面功能，使靜態頁面動起來。

HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來定義一個網頁結構，基本上所有網頁都是這樣的 HTML 結構：

<html>
    <head></head>
    <body></body>
</html>

其中：

html元素是頁面的根元素，它描述完整的網頁；
head元素包含了我們想包含在 HTML 頁面中，但不希望顯示在網頁里的內容；
body元素包含了我們訪問頁面時所有顯示在頁面上的內容，是用戶最終能看到的內容;

HTML 中的元素特別多，其中還包括可用于 Web Components 的自定義元素。

前面我們提到頁面 HTML 結構不合理可能會導致頁面響應慢，這個過程很多時候體現在<script>和<style>元素的設計上，它們會影響頁面加載過程中對 Javascript 和 CSS 代碼的處理。

因此，如果想要提升頁面的加載速度，就需要了解瀏覽器頁面的加載過程是怎樣的，從根本上來解決問題。

瀏覽器在加載頁面的時候會用到 GUI 渲染線程和 JavaScript 引擎線程（更詳細的瀏覽器加載和渲染機制將在第 7 講中介紹）。其中，GUI 渲染線程負責渲染瀏覽器界面 HTML 元素，JavaScript 引擎線程主要負責處理 JavaScript 腳本程序。

由于 JavaScript 在執行過程中還可能會改動界面結構和樣式，因此它們之間被設計為互斥的關系。也就是說，當 JavaScript 引擎執行時，GUI 線程會被掛起。

以網易云課堂官網為例，我們來看看網頁加載流程。

（1）當我們打開官網的時候，瀏覽器會從服務器中獲取到 HTML 內容。

（2）瀏覽器獲取到 HTML 內容后，就開始從上到下解析 HTML 的元素。

（3）<head>元素內容會先被解析，此時瀏覽器還沒開始渲染頁面。

我們看到<head>元素里有用于描述頁面元數據的<meta>元素，還有一些<link>元素涉及外部資源（如圖片、CSS 樣式等），此時瀏覽器會去獲取這些外部資源。除此之外，我們還能看到<head>元素中還包含著不少的<script>元素，這些<script>元素通過src屬性指向外部資源。

（4）當瀏覽器解析到這里時（步驟 3），會暫停解析并下載 JavaScript 腳本。

（5）當 JavaScript 腳本下載完成后，瀏覽器的控制權轉交給 JavaScript 引擎。當腳本執行完成后，控制權會交回給渲染引擎，渲染引擎繼續往下解析 HTML 頁面。

（6）此時<body>元素內容開始被解析，瀏覽器開始渲染頁面。

在這個過程中，我們看到<head>中放置的<script>元素會阻塞頁面的渲染過程：把 JavaScript 放在<head>里，意味著必須把所有 JavaScript 代碼都下載、解析和解釋完成后，才能開始渲染頁面。

到這里，我們就明白了：如果外部腳本加載時間很長（比如一直無法完成下載），就會造成網頁長時間失去響應，瀏覽器就會呈現“假死”狀態，用戶體驗會變得很糟糕。

因此，對于對性能要求較高、需要快速將內容呈現給用戶的網頁，常常會將 JavaScript 腳本放在<body>的最后面。這樣可以避免資源阻塞，頁面得以迅速展示。我們還可以使用defer/async/preload等屬性來標記<script>標簽，來控制 JavaScript 的加載順序。

百度首頁

三、DOM 解析

對于百度這樣的搜索引擎來說，必須要在最短的時間內提供到可用的服務給用戶，其中就包括搜索框的顯示及可交互，除此之外的內容優先級會相對較低。

瀏覽器在渲染頁面的過程需要解析 HTML、CSS 以得到 DOM 樹和 CSS 規則樹，它們結合后才生成最終的渲染樹并渲染。因此，我們還常常將 CSS 放在<head>里，可用來避免瀏覽器渲染的重復計算。

二、HTML 與 DOM 有什么不同

我們知道<p>是 HTML 元素，但又常常將<p>這樣一個元素稱為 DOM 節點，那么 HTML 和 DOM 到底有什么不一樣呢？

根據 MDN 官方描述：文檔對象模型（DOM）是 HTML 和 XML 文檔的編程接口。

也就是說，DOM 是用來操作和描述 HTML 文檔的接口。如果說瀏覽器用 HTML 來描述網頁的結構并渲染，那么使用 DOM 則可以獲取網頁的結構并進行操作。一般來說，我們使用 JavaScript 來操作 DOM 接口，從而實現頁面的動態變化，以及用戶的交互操作。

在開發過程中，常常用對象的方式來描述某一類事物，用特定的結構集合來描述某些事物的集合。DOM 也一樣，它將 HTML 文檔解析成一個由 DOM 節點以及包含屬性和方法的相關對象組成的結構集合。

三、DOM 解析

我們常見的 HTML 元素，在瀏覽器中會被解析成節點。比如下面這樣的 HTML 內容：

<html>
    <head>
        <title>標題</title>
    </head>
    <body>
        <a href='xx.com'>我的超鏈接</a>
        <h1>頁面第一標題</h1>
    </body>
</html>

打開控制臺 Elements 面板，可以看到這樣的 HTML 結構，如下圖所示：

在瀏覽器中，上面的 HTML 會被解析成這樣的 DOM 樹，如下圖所示：

我們都知道，對于樹狀結構來說，常常使用parent/child/sibling等方式來描述各個節點之間的關系，對于 DOM 樹也不例外。

舉個例子，我們常常會對頁面功能進行抽象，并封裝成組件。但不管怎么進行整理，頁面最終依然是基于 DOM 的樹狀結構，因此組件也是呈樹狀結構，組件間的關系也同樣可以使用parent/child/sibling這樣的方式來描述。同時，現在大多數應用程序同樣以root為根節點展開，我們進行狀態管理、數據管理也常常會呈現出樹狀結構。

四、事件委托

我們知道，瀏覽器中各個元素從頁面中接收事件的順序包括事件捕獲階段、目標階段、事件冒泡階段。其中，基于事件冒泡機制，我們可以實現將子元素的事件委托給父級元素來進行處理，這便是事件委托。

如果我們在每個元素上都進行監聽的話，則需要綁定三個事件;(假設頁面上有a,b,c三個兄弟節點)

function clickEventFunction(e) {
  console.log(e.target === this); // logs `true`
  // 這里可以用 this 獲取當前元素
}
// 元素a,b,c綁定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);

使用事件委托，可以通過將事件添加到它們的父節點，而將事件委托給父節點來觸發處理函數：

function clickEventFunction(event) {
  console.log(e.target === this); // logs `false`
  // 獲取被點擊的元素
  const eventTarget = event.target;
  // 檢查源元素`event.target`是否符合預期
  // 此處控制廣告面板的展示內容
}
// 元素1綁定
element1.addEventListener("click", clickEventFunction, false);

這樣能解決什么問題呢？

綁定子元素會綁定很多次的事件，而綁定父元素只需要一次綁定。
將事件委托給父節點，這樣我們對子元素的增加和刪除、移動等，都不需要重新進行事件綁定。

常見的使用方式主要是上述這種列表結構，每個選項都可以進行編輯、刪除、添加標簽等功能，而把事件委托給父元素，不管我們新增、刪除、更新選項，都不需要手動去綁定和移除事件。

如果在列表數量內容較大的時候，對成千上萬節點進行事件監聽，也是不小的性能消耗。使用事件委托的方式，我們可以大量減少瀏覽器對元素的監聽，也是在前端性能優化中比較簡單和基礎的一個做法。

注意:

如果我們直接在document.body上進行事件委托，可能會帶來額外的問題;
由于瀏覽器在進行頁面渲染的時候會有合成的步驟，合成的過程會先將頁面分成不同的合成層，而用戶與瀏覽器進行交互的時候需要接收事件。此時，瀏覽器會將頁面上具有事件處理程序的區域進行標記，被標記的區域會與主線程進行通信。
如果我們document.body上被綁定了事件，這時候整個頁面都會被標記;
即使我們的頁面不關心某些部分的用戶交互，合成器線程也必須與主線程進行通信，并在每次事件發生時進行等待。這種情況，我們可以使用passive: true選項來解決

五、總結

我們了解了 HTML 的作用，以及它是如何影響瀏覽器中頁面的加載過程的，同時還介紹了使用 DOM 接口來控制 HTML 的展示和功能邏輯。我們了解了DOM解析事件委托等相關概念。

在線咨詢

上一篇：創建專業電子郵件簽名：提升個人與品牌形象的實用指南
下一篇：19.HTML CSS邊距、邊框、填充和內容

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 頁面顯示 XML 數據

家好，我是皮皮。

前言

一、瀏覽器頁面加載過程

三、DOM 解析

二、HTML 與 DOM 有什么不同

三、DOM 解析

四、事件委托

五、總結

您的項目需求