XML DOM設置節點

在本章中，我們將學習如何更改XML DOM對象中節點的值。節點值可以更改(或設置)如下 -

var value = node.nodeValue;

如果node是Attribute類型，那麼value變量將是屬性的值; 如果node是Text類型，則它將是文本內容; 如果node是Element類型，則它將爲null。

以下部分將演示每種節點類型(Attribute，Text和Element類型)的節點值設置。

以下所有示例中使用的node.xml如下所示 -

<Company> 
   <Employee category = "Technical" id = "firstelement"> 
      <FirstName>Susen</FirstName> 
      <LastName>Su</LastName> 
      <ContactNo>1584567890</ContactNo> 
      <Email>[email protected]</Email> 
   </Employee>  

   <Employee category = "Non-Technical"> 
      <FirstName>Max</FirstName> 
      <LastName>Su</LastName> 
      <ContactNo>1334667898</ContactNo> 
      <Email>[email protected]</Email> 
   </Employee>  

   <Employee category = "Management"> 
      <FirstName>Min</FirstName> 
      <LastName>Su</LastName> 
      <ContactNo>1364562350</ContactNo> 
      <Email>[email protected]</Email> 
   </Employee> 
</Company>

1. 更改 Text 節點的值

當Node元素的更改值時，需要編輯元素的文本內容(也稱爲文本節點)。以下示例演示如何更改元素的Text節點。

示例

以下示例(set_text_node.html)將XML文檔(node.xml)解析爲XML DOM對象，並更改元素文本節點的值。在這個示例中，將每個員工的電子郵件更新爲[[email protected]](mailto:[email protected])並打印值。

文件：set_text_node.html -

<!DOCTYPE html>
<html>
   <head>
      <script>

      </script>
   </head>
   <body>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else {
                // code for IE5 and IE6
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();

            return xhttp.responseXML;
         }

         var xmlDoc = loadXMLDoc("/node.xml");

         x = xmlDoc.getElementsByTagName("Email");
         for(i = 0;i<x.length;i++) {    

            x[i].childNodes[0].nodeValue = "[email protected]";
            document.write(i+" => ");
            document.write(x[i].childNodes[0].nodeValue);
            document.write('<br>');
         }

      </script>
   </body>
</html>

執行

將此文件保存爲:set_text_node.html，放到服務器路徑上(此文件和node.xml應位於服務器中的同一路徑上)。使用瀏覽器打開將看到以下輸出 -

XML

2. 更改屬性節點的值

以下示例演示如何更改元素的屬性節點。

示例

以下示例(set_attribute.html)將XML文檔(node.xml)解析爲XML DOM對象，並更改元素屬性節點的值。在這種情況下，每個Employee元素的Category屬性分別爲：admin-0，admin-1，admin-2並打印它們的值。

文件：set_text_node.html -

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
                xhttp = new XMLHttpRequest();
            } else{ // code for IE5 and IE6 
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/node.xml");

         x = xmlDoc.getElementsByTagName("Employee");
         for(i = 0 ;i<x.length;i++){    

            newcategory = x[i].getAttributeNode('category');
            newcategory.nodeValue = "admin-"+i;
            document.write(i+' => ');
            document.write(x[i].getAttributeNode('category').nodeValue);
            document.write('<br>');
         }

      </script>
   </body>
</html>

執行

將此文件保存爲:set_attribute.html，放到服務器路徑上(此文件和node.xml應位於服務器中的同一路徑上)。使用瀏覽器打開將看到以下輸出 -

XML

DOM教程

XML DOM操作

XML DOM對象

XML DOM設置節點

1. 更改 Text 節點的值

2. 更改屬性節點的值