XML DOM - 刪除節點

上一個

下一個

在本章中，我們將學習 XML DOM 的 刪除節點 操作。刪除節點操作會從文件中刪除指定的節點。此操作可以用來刪除文字節點、元素節點或屬性節點。

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

removeChild()
removeAttribute()

removeChild()

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

語法

使用 removeChild() 的語法如下：

Node removeChild(Node oldChild) throws DOMException

其中：

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

示例 - 刪除當前節點

以下示例 (removecurrentnode_example.htm) 將 XML 文件 (node.xml) 解析為 XML DOM 物件，並從父節點中刪除指定的節點 <ContactNo>。

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

         document.write("<b>Before remove operation, total ContactNo elements: </b>");
         document.write(xmlDoc.getElementsByTagName("ContactNo").length);
         document.write("<br>");

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

         document.write("<b>After remove operation, total ContactNo elements: </b>");
         document.write(xmlDoc.getElementsByTagName("ContactNo").length);
      </script>
   </body>
</html>

在上述示例中：

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

執行

將此檔案儲存為伺服器路徑上的 removecurrentnode_example.htm（此檔案和 node.xml 應位於伺服器上的同一路徑）。我們將得到以下結果：

Before remove operation, total ContactNo elements: 3
After remove operation, total ContactNo elements: 2

示例 - 刪除文字節點

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

<!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("FirstName")[0];

         document.write("<b>Text node of child node before removal is:</b> ");
         document.write(x.childNodes.length);
         document.write("<br>");

         y = x.childNodes[0];
         x.removeChild(y);
         document.write("<b>Text node of child node after removal is:</b> ");
         document.write(x.childNodes.length);

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

在上述示例中：

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

執行

將此檔案儲存為伺服器路徑上的 removetextNode_example.htm（此檔案和 node.xml 應位於伺服器上的同一路徑）。我們將得到以下結果：

Text node of child node before removal is: 1
Text node of child node after removal is: 0

removeAttribute()

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

語法

使用 removeAttribute() 的語法如下：

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

其中：

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

示例

以下示例 (removeelementattribute_example.htm) 將 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("/dom/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')); - 呼叫索引為 1 的屬性 category 的值。
x[1].removeAttribute('category'); - 刪除屬性值。

執行

將此檔案儲存為伺服器路徑上的 removeelementattribute_example.htm（此檔案和 node.xml 應位於伺服器上的同一路徑）。我們將得到以下結果：

Non-Technical
null

列印頁面

上一個

下一個