XML DOM - 設定節點

在本章中，我們將學習如何在 XML DOM 物件中更改節點的值。節點值可以按如下方式更改：

var value = node.nodeValue;

如果node是Attribute，則value變數將是屬性的值；如果node是Text節點，則它將是文字內容；如果node是Element，則它將為null。

以下部分將演示每種節點型別（屬性、文字節點和元素）的節點值設定。

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

<Company>
   <Employee category = "Technical">
      <FirstName>Tanmay</FirstName>
      <LastName>Patil</LastName>
      <ContactNo>1234567890</ContactNo>
      <Email>tanmaypatil@xyz.com</Email>
   </Employee>
   
   <Employee category = "Non-Technical">
      <FirstName>Taniya</FirstName>
      <LastName>Mishra</LastName>
      <ContactNo>1234667898</ContactNo>
      <Email>taniyamishra@xyz.com</Email>
   </Employee>
   
   <Employee category = "Management">
      <FirstName>Tanisha</FirstName>
      <LastName>Sharma</LastName>
      <ContactNo>1234562350</ContactNo>
      <Email>tanishasharma@xyz.com</Email>
   </Employee>
</Company>

更改文字節點的值

當我們說更改節點元素的值時，我們的意思是編輯元素的文字內容（也稱為文字節點）。以下示例演示瞭如何更改元素的文字節點。

示例

以下示例（set_text_node_example.htm）將 XML 文件（node.xml）解析為 XML DOM 物件，並更改元素文字節點的值。在本例中，每個Employee的Email都更改為support@xyz.com，並列印這些值。

<!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("/dom/node.xml");

         x = xmlDoc.getElementsByTagName("Email");
         for(i = 0;i<x.length;i++) {	
	
            x[i].childNodes[0].nodeValue = "support@xyz.com";
            document.write(i+');
            document.write(x[i].childNodes[0].nodeValue);
            document.write('<br>');
         }
	
      </script>
   </body>
</html>

執行

將此檔案另存為伺服器路徑上的set_text_node_example.htm（此檔案和node.xml應位於伺服器上的同一路徑）。您將收到以下輸出：

0) support@xyz.com
1) support@xyz.com
2) support@xyz.com

更改屬性節點的值

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

示例

以下示例（set_attribute_example.htm）將 XML 文件（node.xml）解析為 XML DOM 物件，並更改元素屬性節點的值。在本例中，每個Employee的Category分別更改為admin-0、admin-1、admin-2，並列印這些值。

<!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("/dom/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_node_attribute_example.htm（此檔案和node.xml應位於伺服器上的同一路徑）。結果如下所示：

0) admin-0
1) admin-1
2) admin-2

列印頁面