XML DOM設定節點 - tw511教學網

在本章中，我們將學習如何更改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]並列印值。

檔案：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應位於伺服器中的同一路徑上)。使用瀏覽器開啟將看到以下輸出 -

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應位於伺服器中的同一路徑上)。使用瀏覽器開啟將看到以下輸出 -