XML DOM刪除節點 - tw511教學網

在本章中，我們將學習XML DOM刪除節點的操作。刪除節點操作是指從文件中刪除指定的節點。實現此操作以移除諸如文字節點，元素節點或屬性節點之類的節點。

以下是用於刪除節點操作的方法 -

removeChild()方法
removeAttribute()方法

1. removeChild()方法

removeChild()方法從子列表中刪除oldChild指示的子節點，並將其返回。刪除子節點等同於刪除文字節點。因此，刪除子節點會刪除與其關聯的文字節點。

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

Node removeChild(Node oldChild) throws DOMException

其中，

oldChild - 是要刪除的節點。
此方法返回已刪除的節點。

範例1 - 刪除當前節點
以下範例(remove_curtnode.html)將XML文件(node.xml)解析為XML DOM物件，並從父節點中刪除指定的節點<ContactNo>。

<!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8">
      <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");

         document.write("<b>在刪除操作之前，總共有ContactNo元素: </b>");
         document.write(xmlDoc.getElementsByTagName("ContactNo").length);
         document.write("<br>");

         x = xmlDoc.getElementsByTagName("ContactNo")[0];
         x.parentNode.removeChild(x);

         document.write("<b>在刪除操作之後，總共有ContactNo元素: </b>");
         document.write(xmlDoc.getElementsByTagName("ContactNo").length);
      </script>
   </body>
</html>

在上面的例子中 -

x = xmlDoc.getElementsByTagName("ContactNo")[0]獲取索引為0的元素<ContactNo>。
x.parentNode.removeChild(x);從父節點中刪除索引為0的元素<ContactNo>。

執行上面範例程式碼，得到以下結果 -

範例2 - 刪除文字節點

以下範例(removetextnode.html)將XML文件(node.xml)解析為XML DOM物件，並刪除指定的子節點<FirstName>。

<!DOCTYPE html>
<html>
   <head>
         <meta charset="utf-8">
      <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("FirstName")[0];

         document.write("<b>刪除前子節點的文字節點數量是:</b> ");
         document.write(x.childNodes.length);
         document.write("<br>");

         y = x.childNodes[0];
         x.removeChild(y);
         document.write("<b>刪除後子節點的文字節點數量是:</b> ");
         document.write(x.childNodes.length);

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

在上面的例子中 -

x = xmlDoc.getElementsByTagName("FirstName")[0]; - 獲取第一個元素<FirstName>到索引為0儲存到變數x。
y = x.childNodes [0]; - 在這一行中，變數y儲存要刪除的子節點。
x.removeChild(y); - 刪除指定的子節點。

執行上面範例程式碼，得到以下結果 -

2. removeAttribute()方法

removeAttribute()方法按名稱刪除元素的屬性。

語法

使用removeAttribute()的語法如下 -

void removeAttribute(java.lang.String name) throws DOMException

其中，

name - 要刪除的屬性的名稱。

範例

以下範例(remove_elementattribute.html)將XML文件(node.xml)解析為XML DOM物件，並刪除指定的屬性節點。

<!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');
         document.write(x[1].getAttribute('category'));
         document.write("<br>");
         x[1].removeAttribute('category');
         document.write(x[1].getAttribute('category'));

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

在上面範例程式碼中 ?

document.write(x[1].getAttribute('category')); ? 呼叫在第一個位置索引的category屬性的值。
x[1].removeAttribute('category'); ? 刪除屬性的值。

執行上面範例程式碼，得到以下結果 -