DOM 刪除節點
XML DOM 刪除節點
removeChild() 方法刪除指定節點。
removeAttribute() 方法刪除指定屬性。
試試看 - 實例
#下面的實例使用 XML 檔案 books.xml。
函數 loadXMLDoc(),位於外部 JavaScript 中,用於載入 XML 檔案。
刪除元素節點
本範例使用 removeChild() 來刪除第一個 <book> 元素。
刪除目前元素節點
本範例使用 parentNode 和 removeChild() 來刪除目前的 <book> 元素。
刪除文字節點
本範例使用 removeChild() 來刪除第一個 <title> 元素的文字節點。
清空文字節點的文字
本例使用 nodeValue() 屬性來清空第一個 <title> 元素的文字節點。
根據名稱刪除屬性
本範例使用 removeAttribute() 從第一個 <book> 元素中刪除 "category" 屬性。
根據物件刪除屬性
本例使用 removeAttributeNode() 從所有 <book> 元素中刪除所有屬性。
刪除元素節點
removeChild() 方法刪除指定的節點。
當一個節點被刪除時,其所有子節點也會被刪除。
下面的程式碼片段會從載入的xml 中刪除第一個<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>
運行實例»點擊"運行實例"按鈕查看線上實例
- 使用loadXMLDoc() 把"books.xml" 載入xmlDoc 中
- 把變數y 設定為要刪除的元素節點
- 透過使用removeChild() 方法從父節點刪除元素節點
刪除自身- 刪除目前的節點removeChild() 方法是唯一可以刪除指定節點的方法。 當您已導覽至需要刪除的節點時,就可以透過使用parentNode 屬性和removeChild() 方法來刪除此節點:
<!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>
執行實例»點擊"運行實例" 按鈕查看線上實例#
實例解釋:
使用loadXMLDoc() 把"books.xml" 載入xmlDoc 中
把變數y 設為要刪除的元素節點
透過使用parentNode 屬性和removeChild() 方法來刪除此元素節點
#刪除文字節點removeChild() 方法可用來刪除文字節點:
<!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>##執行實例»
##點擊"執行實例"按鈕查看線上實例
實例解釋:
- 把變數x 設定為第一個title 元素節點
- 把變數y 設定為要刪除的文字節點
- #不太常用removeChild() 從節點刪除文字。可以使用 nodeValue 屬性來代替它。請看下一段。
清除文字節點
nodeValue 屬性可用來改變或清除文字節點的值:
實例
<!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>
點擊"運行實例"按鈕查看線上實例
#實例解釋:
- 把變數x 設定為第一個title 元素的文字節點
- 使用nodeValue 屬性來清空文字節點的文字
- 遍歷並更改所有<title> 元素的文字節點:嘗試
##根據名稱刪除屬性節點
name
) 方法用於根據名稱刪除屬性節點。
實例:removeAttribute('category')下面的程式碼片段刪除第一個<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>
實例解釋:
使用loadXMLDoc() 把"books.xml" 載入xmlDoc 中
使用getElementsByTagName() 來獲取book 節點
從第一個book 元素節點中刪除"category" 屬性
遍歷並刪除所有<book> 元素的" category" 屬性:試試看
根據物件刪除屬性節點
removeAttributeNode(node) 方法透過使用node 物件作為參數,來刪除屬性節點。
實例: removeAttributeNode(x)
下面的程式碼片段刪除所有<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>
執行實例»
點擊"運行實例"按鈕查看線上實例
實例解釋:
使用loadXMLDoc() 把"books.xml" 載入xmlDoc 中
使用getElementsByTagName() 來取得所有book 節點
#檢查每個book 元素是否擁有屬性
如果在某個book 元素中存在屬性,則刪除該屬性