XML DOM設定節點


在本章中,我們將學習如何更改XML DOM物件中節點的值。 節點值可以更改(或設定)如下 -

var value = node.nodeValue;

如果nodeAttribute型別,那麼value變數將是屬性的值; 如果nodeText型別,則它將是文字內容; 如果nodeElement型別,則它將為null

以下部分將演示每種節點型別(AttributeTextElement型別)的節點值設定。

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