溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

XML中的樹形結(jié)構(gòu)與DOM文檔對象模型代碼演示

發(fā)布時間：2020-07-10 15:49:28 來源：億速云 閱讀：227 作者：Leah 欄目：編程語言

這篇文章將為大家詳細講解有關(guān)XML中的樹形結(jié)構(gòu)與DOM文檔對象模型代碼演示，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

樹結(jié)構(gòu)
XML 文檔始終是描述性的。樹狀結(jié)構(gòu)通常被稱為 XML 樹，它在描述 XML 文檔的過程中扮演一個重要的角色。

這個樹結(jié)構(gòu)包含根（父）元素，子元素等等。通過使用樹狀結(jié)構(gòu)，我們可以了解源自根元素的所有后續(xù)分支和子分支。解析從根元素開始，然后向下移動到指向某個元素的第一個分支，從這里開始處理第一個分支及其子節(jié)點。

示例
下面的示例演示了簡單的 XML 樹結(jié)構(gòu)：

<?xml version="1.0"?>  
<Company>  
    <Employee>  
        <FirstName>Tanmay</FirstName>  
        <LastName>Patil</LastName>  
        <ContactNo>1234567890</ContactNo>  
        <Email>tanmaypatil@xyz.com</Email>  
        <Address>  
            <City>Bangalore</City>  
            <State>Karnataka</State>  
            <Zip>560212</Zip>  
        </Address>  
    </Employee>  
</Company>

下面的樹結(jié)構(gòu)表示上面的 XML 文檔：
XML中的樹形結(jié)構(gòu)與DOM文檔對象模型代碼演示

圖中，有一個叫做 <company> 的根元素。里面又有一個 <Employee> 元素。在雇員元素里面，又有 5 個分支，分別是 <FirstName>，<LastName>，<ContactNo>，<Email> 和 <Address>。在 <Address> 元素內(nèi)，又有三個子分支，分別是 <City>，<State> 和 <Zip>。

DOM文檔對象模型
文檔對象模型（DOM）是 XML 的基礎(chǔ)。XML 文檔有一個信息層次結(jié)構(gòu)單位，被稱作節(jié)點；DOM 是描述這些節(jié)點和它們之間關(guān)系的一種方式。

DOM 文檔就是一個節(jié)點集合或者按照層次結(jié)構(gòu)組織的信息塊。這個層次結(jié)構(gòu)允許開發(fā)人員導航這個節(jié)點樹來查詢特定的信息。由于它基于信息層次結(jié)構(gòu)，DOM 也被認為是_基于節(jié)點樹_的。

另一方面，XML DOM 還提供了一個 API，允許開發(fā)者在節(jié)點樹的任意位置添加，編輯，移動或者移除節(jié)點，以便創(chuàng)建應用程序。

示例
下面的示例（sample.htm）將一個 XML 文檔（"address.xml"）解析為一個 XML DOM 對象，然后用 JavaScript 提取了一些信息：

<!DOCTYPE html>  
<html>  
<body>  
<h2>TutorialsPoint DOM example </h2>  
<div>  
<b>Name:</b> <span id="name"></span><br>  
<b>Company:</b> <span id="company"></span><br>  
<b>Phone:</b> <span id="phone"></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","/xml/address.xml",false);   
xmlhttp.send();   
xmlDoc=xmlhttp.responseXML;   
document.getElementById("name").innerHTML=   
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;   
document.getElementById("company").innerHTML=   
xmlDoc.getElementsByTagName("company")[0].childNodes[0].nodeValue;   
document.getElementById("phone").innerHTML=   
xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;   
</script>  
</body  
</html>

address.xml 的內(nèi)容如下：

<?xml version="1.0"?>  
<contact-info>  
    <name>Tanmay Patil</name>  
    <company>TutorialsPoint</company>  
    <phone>(011) 123-4567</phone>  
</contact-info>

我們可以把這兩個文 sample.htm 和 address.xml 件保存到同一目錄 /xml 中，然后通過在瀏覽器中打開的方式執(zhí)行 sample.htm 文件。它應該生成如下所示結(jié)果：
XML中的樹形結(jié)構(gòu)與DOM文檔對象模型代碼演示

這里，可以看到我們提取了每個子節(jié)點并顯示了它們的值。

關(guān)于XML中的樹形結(jié)構(gòu)與DOM文檔對象模型代碼演示就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手