XML DOM - 建立節點

上一頁
下一頁

本章將討論如何使用文件物件的幾種方法來建立新節點。這些方法提供了建立新的元素節點、文字節點、註釋節點、CDATA 節點和屬性節點的範圍。如果新建立的節點已存在於元素物件中，則會被新的節點替換。以下部分將透過示例演示這一點。

建立新的元素節點

createElement() 方法建立一個新的元素節點。如果新建立的元素節點已存在於元素物件中，則會被新的節點替換。

語法

使用createElement() 方法的語法如下：

var_name = xmldoc.createElement("tagname");

其中：

  • var_name - 是使用者定義的變數名，它儲存新元素的名稱。

  • ("tagname") - 是要建立的新元素節點的名稱。

示例

以下示例 (createnewelement_example.htm) 將 XML 文件 (node.xml) 解析為 XML DOM 物件，並在 XML 文件中建立一個新的元素節點PhoneNo。

<!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");

         new_element = xmlDoc.createElement("PhoneNo");

         x = xmlDoc.getElementsByTagName("FirstName")[0];
         x.appendChild(new_element);

         document.write(x.getElementsByTagName("PhoneNo")[0].nodeName);
      </script>
   </body>
</html>

  • new_element = xmlDoc.createElement("PhoneNo"); 建立新的元素節點 <PhoneNo>

  • x.appendChild(new_element); x 儲存指定子節點 <FirstName> 的名稱，新元素節點將附加到該節點。

執行

將此檔案儲存為伺服器路徑上的createnewelement_example.htm（此檔案和node.xml應位於伺服器上的同一路徑）。在輸出中，我們將屬性值作為PhoneNo。

建立新的文字節點

createTextNode() 方法建立一個新的文字節點。

語法

使用createTextNode() 的語法如下：

var_name = xmldoc.createTextNode("tagname");

其中：

  • var_name - 是使用者定義的變數名，它儲存新文字節點的名稱。

  • ("tagname") - 括號內是要建立的新文字節點的名稱。

示例

以下示例 (createtextnode_example.htm) 將 XML 文件 (node.xml) 解析為 XML DOM 物件，並在 XML 文件中建立一個新的文字節點Im new text node。

<!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");

         create_e = xmlDoc.createElement("PhoneNo");
         create_t = xmlDoc.createTextNode("Im new text node");
         create_e.appendChild(create_t);

         x = xmlDoc.getElementsByTagName("Employee")[0];
         x.appendChild(create_e);


         document.write(" PhoneNO: ");
         document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue);
      </script>
    </body>
</html>

上述程式碼的詳細資訊如下：

  • create_e = xmlDoc.createElement("PhoneNo"); 建立一個新的元素 <PhoneNo>。

  • create_t = xmlDoc.createTextNode("Im new text node"); 建立一個新的文字節點"Im new text node"。

  • x.appendChild(create_e); 文字節點"Im new text node" 附加到元素 <PhoneNo>。

  • document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue); 將新文字節點的值寫入元素 <PhoneNo>。

執行

將此檔案儲存為伺服器路徑上的createtextnode_example.htm（此檔案和 node.xml 應位於伺服器上的同一路徑）。在輸出中，我們將屬性值作為，即PhoneNO: Im new text node。

建立新的註釋節點

createComment() 方法建立一個新的註釋節點。註釋節點包含在程式中是為了更容易理解程式碼的功能。

語法

使用createComment() 的語法如下：

var_name = xmldoc.createComment("tagname");

其中：

  • var_name - 是使用者定義的變數名，它儲存新註釋節點的名稱。

  • ("tagname") - 是要建立的新註釋節點的名稱。

示例

以下示例 (createcommentnode_example.htm) 將 XML 文件 (node.xml) 解析為 XML DOM 物件，並在 XML 文件中建立一個新的註釋節點"Company is the parent node"。

<!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");

         create_comment = xmlDoc.createComment("Company is the parent node");

         x = xmlDoc.getElementsByTagName("Company")[0];

         x.appendChild(create_comment);

         document.write(x.lastChild.nodeValue);
      </script>
   </body>
</html>

在上面的例子中：

  • create_comment = xmlDoc.createComment("Company is the parent node") **建立指定的註釋行**。

  • x.appendChild(create_comment) 在這一行中，'x' 儲存元素 <Company> 的名稱，註釋行將附加到該元素。

執行

將此檔案儲存為伺服器路徑上的createcommentnode_example.htm（此檔案和node.xml應位於伺服器上的同一路徑）。在輸出中，我們將屬性值作為Company is the parent node。

建立新的CDATA 節點

createCDATASection() 方法建立一個新的 CDATA 節點。如果新建立的 CDATA 節點已存在於元素物件中，則會被新的節點替換。

語法

使用createCDATASection() 的語法如下：

var_name = xmldoc.createCDATASection("tagname");

其中：

  • var_name - 是使用者定義的變數名，它儲存新的 CDATA 節點的名稱。

  • ("tagname") - 是要建立的新 CDATA 節點的名稱。

示例

以下示例 (createcdatanode_example.htm) 將 XML 文件 (node.xml) 解析為 XML DOM 物件，並在 XML 文件中建立一個新的 CDATA 節點"Create CDATA Example"。

<!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");

         create_CDATA = xmlDoc.createCDATASection("Create CDATA Example");

         x = xmlDoc.getElementsByTagName("Employee")[0];
         x.appendChild(create_CDATA);
         document.write(x.lastChild.nodeValue);
      </script>
   </body>
</html>

在上面的例子中：

  • create_CDATA = xmlDoc.createCDATASection("Create CDATA Example") 建立一個新的 CDATA 節點"Create CDATA Example"

  • x.appendChild(create_CDATA) 在這裡，x 儲存索引為 0 的指定元素 <Employee>，CDATA 節點值將附加到該元素。

執行

將此檔案儲存為伺服器路徑上的createcdatanode_example.htm（此檔案和 node.xml 應位於伺服器上的同一路徑）。在輸出中，我們將屬性值作為Create CDATA Example。

建立新的屬性節點

要建立一個新的屬性節點，可以使用setAttributeNode() 方法。如果新建立的屬性節點已存在於元素物件中，則會被新的節點替換。

語法

使用createElement() 方法的語法如下：

var_name = xmldoc.createAttribute("tagname");

其中：

  • var_name - 是使用者定義的變數名，它儲存新屬性節點的名稱。

  • ("tagname") - 是要建立的新屬性節點的名稱。

示例

以下示例 (createattributenode_example.htm) 將 XML 文件 (node.xml) 解析為 XML DOM 物件，並在 XML 文件中建立一個新的屬性節點section。

<!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");

         create_a = xmlDoc.createAttribute("section");
         create_a.nodeValue = "A";

         x = xmlDoc.getElementsByTagName("Employee");
         x[0].setAttributeNode(create_a);
         document.write("New Attribute: ");
         document.write(x[0].getAttribute("section"));

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

在上面的例子中：

  • create_a=xmlDoc.createAttribute("Category") 建立一個名為 <section> 的屬性。

  • create_a.nodeValue="Management" 為屬性 <section> 建立值"A"。

  • x[0].setAttributeNode(create_a) 此屬性值設定為索引為 0 的節點元素 <Employee>。

列印頁面
上一頁
下一頁
廣告