XML DOM 刪除節點 · W3School Xml 教程

# XML DOM 刪除節點 removeChild() 方法刪除指定節點。 removeAttribute() 方法刪除指定屬性。 ## 嘗試一下 - 實例下面的實例使用 XML 文件 [books.xml](images/books.xml)。函數 [loadXMLDoc()](dom-loadxmldoc.html)，位于外部 JavaScript 中，用于加載 XML 文件。 [刪除元素節點](/try/try.php?filename=try_dom_removechild) 本例使用 removeChild() 來刪除第一個 <book> 元素。 ``` <!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); document.write("Number of book nodes: "); document.write(xmlDoc.getElementsByTagName('book').length); document.write("<br>"); y=xmlDoc.getElementsByTagName("book")[0]; xmlDoc.documentElement.removeChild(y); document.write("Number of book nodes after removeChild(): "); document.write(xmlDoc.getElementsByTagName('book').length); </script> </body> </html> ``` [刪除當前元素節點](/try/try.php?filename=try_dom_removecurrent) 本例使用 parentNode 和 removeChild() 來刪除當前的 <book> 元素。 ``` <!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); document.write("Number of book nodes before removeChild(): "); document.write(xmlDoc.getElementsByTagName("book").length); document.write("<br>"); x=xmlDoc.getElementsByTagName("book")[0] x.parentNode.removeChild(x); document.write("Number of book nodes after removeChild(): "); document.write(xmlDoc.getElementsByTagName("book").length); </script> </body> </html> ``` [刪除文本節點](/try/try.php?filename=try_dom_removetextnode) 本例使用 removeChild() 來刪除第一個 <title> 元素的文本節點。 ``` <!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0]; document.write("Child nodes: "); document.write(x.childNodes.length); document.write("<br>"); y=x.childNodes[0]; x.removeChild(y); document.write("Child nodes: "); document.write(x.childNodes.length); </script> </body> </html> ``` [清空文本節點的文本](/try/try.php?filename=try_dom_remove_nodevalue) 本例使用 nodeValue() 屬性來清空第一個 <title> 元素的文本節點。 ``` <!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; document.write("Value: " + x.nodeValue); document.write("<br>"); x.nodeValue=""; document.write("Value: " + x.nodeValue); </script> </body> </html> ``` [根據名稱刪除屬性](/try/try.php?filename=try_dom_removeattribute) 本例使用 removeAttribute() 從第一個 <book> 元素中刪除 "category" 屬性。 ``` <!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName('book'); document.write(x[0].getAttribute('category')); document.write("<br>"); x[0].removeAttribute('category'); document.write(x[0].getAttribute('category')); </script> </body> </html> ``` [根據對象刪除屬性](/try/try.php?filename=try_dom_removeattributenode) 本例使用 removeAttributeNode() 從所有 <book> 元素中刪除所有屬性。 ``` <!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> </head> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName('book'); for (i=0;i<x.length;i++) { while (x[i].attributes.length>0) { attnode=x[i].attributes[0]; old_att=x[i].removeAttributeNode(attnode); document.write("Removed: " + old_att.nodeName) document.write(": " + old_att.nodeValue) document.write("<br>") } } </script> </body> </html> ``` ## 刪除元素節點 removeChild() 方法刪除指定的節點。當一個節點被刪除時，其所有子節點也會被刪除。下面的代碼片段將從載入的 xml 中刪除第一個 <book> 元素： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); y=xmlDoc.getElementsByTagName("book")[0]; xmlDoc.documentElement.removeChild(y); ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 把變量 y 設置為要刪除的元素節點 3. 通過使用 removeChild() 方法從父節點刪除元素節點 ## 刪除自身 - 刪除當前的節點 removeChild() 方法是唯一可以刪除指定節點的方法。當您已導航到需要刪除的節點時，就可以通過使用 parentNode 屬性和 removeChild() 方法來刪除此節點： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0]; x.parentNode.removeChild(x); ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 把變量 y 設置為要刪除的元素節點 3. 通過使用 parentNode 屬性和 removeChild() 方法來刪除此元素節點 ## 刪除文本節點 removeChild() 方法可用于刪除文本節點： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0]; y=x.childNodes[0]; x.removeChild(y); ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 把變量 x 設置為第一個 title 元素節點 3. 把變量 y 設置為要刪除的文本節點 4. 通過使用 removeChild() 方法從父節點刪除元素節點不太常用 removeChild() 從節點刪除文本。可以使用 nodeValue 屬性代替它。請看下一段。 ## 清空文本節點 nodeValue 屬性可用于改變或清空文本節點的值： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.nodeValue=""; ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 把變量 x 設置為第一個 title 元素的文本節點 3. 使用 nodeValue 屬性來清空文本節點的文本遍歷并更改所有 <title> 元素的文本節點： [嘗試一下](/try/try.php?filename=try_dom_remove_nodevalue2) ## 根據名稱刪除屬性節點 removeAttribute(_name_) 方法用于根據名稱刪除屬性節點。實例：removeAttribute('category') 下面的代碼片段刪除第一個 <book> 元素中的 "category" 屬性： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book"); x[0].removeAttribute("category"); ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 使用 getElementsByTagName() 來獲取 book 節點 3. 從第一個 book 元素節點中刪除 "category" 屬性遍歷并刪除所有 <book> 元素的 "category" 屬性： [嘗試一下](/try/try.php?filename=try_dom_removeattribute2) ## 根據對象刪除屬性節點 removeAttributeNode(_node_) 方法通過使用 node 對象作為參數，來刪除屬性節點。實例: removeAttributeNode(x) 下面的代碼片段刪除所有 <book> 元素的所有屬性： ## 實例 ``` xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book"); for (i=0;i<x.length;i++) { while (x[i].attributes.length>0) { attnode=x[i].attributes[0]; old_att=x[i].removeAttributeNode(attnode); } } ``` 實例解釋： 1. 使用 [loadXMLDoc()](dom-loadxmldoc.html) 把 "[books.xml](images/books.xml)" 載入 xmlDoc 中 2. 使用 getElementsByTagName() 來獲取所有 book 節點 3. 檢查每個 book 元素是否擁有屬性 4. 如果在某個 book 元素中存在屬性，則刪除該屬性