XML DOM創建節點

在本章中，我們將討論如何使用文檔對象的幾種方法來創建新節點。這些方法提供了創建新元素節點，文本節點，註釋節點，CDATA節節點和屬性節點的範圍。如果新創建的節點已存在於元素對象中，則將其替換爲新節點。下面將通過示例演示這些操作。

1. 創建新的Element節點

createElement()方法創建一個新的元素節點。如果元素對象中存在新創建的元素節點，則將其替換爲新元素節點。

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

var_name = xmldoc.createElement("tagname");

其中，

var_name - 是用戶定義的變量名，它包含新元素的名稱。
tagname - 是要創建的新元素節點的名稱。

示例
以下示例(create_newelement.html)將XML文檔(node.xml)解析爲XML DOM對象，並在XML文檔中創建新的元素節點 - PhoneNo。

文件：create_newelement.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");

         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>的名稱。

執行
將此文件保存爲:create_newelement.html，並放置到服務器路徑上(此文件和node.xml應位於服務器中的同一路徑上)。在輸出結果中應該能到新建的屬性值爲：PhoneNo。

2. 創建新的Text節點

createTextNode()方法創建一個新的文本節點。

語法

使用createTextNode()的語法如下 -

var_name = xmldoc.createTextNode("tagname");

在上面示例代碼中，

var_name - 它是用戶定義的變量名，它包含新文本節點的名稱。
tagname - 括號內是要創建的新文本節點的名稱。

示例

以下示例(create_textnode.html)將XML文檔(node.xml)解析爲XML DOM對象，並在XML文檔中創建新文本節點Im。

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

         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>。

執行

將此文件保存爲：create_textnode.html，並放置到WEB服務器上(此文件和node.xml應位於服務器中的同一路徑上)。在輸出中得到屬性值，即PhoneNO: Im new text node。

3. 創建新的註釋節點

createComment()方法創建一個新的註釋節點。註釋節點包含在程序中，以便於理解代碼功能。

語法
使用createComment()的語法如下 -

var_name = xmldoc.createComment("tagname");

其中，

var_name - 是用戶定義的變量名，它包含新註釋節點的名稱。
tagname - 是要創建的新註釋節點的名稱。

示例

以下示例(create_commentnode.html)將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("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>的名稱。

執行

將此文件保存爲：create_commentnode.html ，並放置到服務器上(此文件和node.xml應位於服務器中的同一路徑上)。在輸出中獲取屬性值 - " Company is the parent node"。

4. 創建新的CDATA節節點

createCDATASection()方法創建一個新的CDATA節節點。如果新創建的CDATA節節點存在於元素對象中，則它將被新節點替換。

語法
使用createCDATASection()的語法如下 -

var_name = xmldoc.createCDATASection("tagname");

在上面代碼中，

var_name − 是用戶定義的變量名，它包含新CDATA部分節點的名稱。
tagname − 是要創建的新CDATA部分節點的名稱。

示例
以下示例(create_datanode.html)將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("/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節點值。

執行
將此文件保存爲：create_cdatanode.html，並放置到服務器上(此文件和node.xml應位於服務器中的同一路徑上)。在輸出中將獲取屬性值爲：Create CDATA Example。如下圖所示 -

XML

5. 創建新的屬性節點

要創建新的屬性節點，請使用setAttributeNode()方法。如果元素對象中存在新創建的屬性節點，則將其替換爲新節點。

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

var_name = xmldoc.createAttribute("tagname");

其中，

var_name - 是用戶定義的變量名，它包含新屬性節點的名稱。
tagname - 是要創建的新屬性節點的名稱。

示例
以下示例(create_attribute_node.html)將XML文檔(node.xml)解析爲XML DOM對象，並在XML文檔中創建新的屬性節點部分。

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

         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) 這個屬性值設置爲<Employee>的第0個索引位置。

執行上面示例代碼，得到以下結果 -

XML

DOM教程

XML DOM操作

XML DOM對象

XML DOM創建節點

1. 創建新的Element節點

2. 創建新的Text節點

3. 創建新的註釋節點

4. 創建新的CDATA節節點

5. 創建新的屬性節點