XML DOM删除节点
removeChild() 方法删除指定节点。
removeAttribute() 方法删除指定属性。
尝试一下 - 实例
下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。
删除元素节点
本例使用 removeChild() 来删除第一个 元素。
删除当前元素节点
本例使用 parentNode 和 removeChild() 来删除当前的 元素。
删除文本节点
本例使用 removeChild() 来删除第一个
元素的文本节点。</p>
<p>清空文本节点的文本<br>本例使用 nodeValue() 属性来清空第一个 <title> 元素的文本节点。</p>
<p>根据名称删除属性<br>本例使用 removeAttribute() 从第一个 <book> 元素中删除 "category" 属性。</p>
<p>根据对象删除属性<br>本例使用 removeAttributeNode() 从所有 <book> 元素中删除所有属性。</p>
<hr>
<h2>删除元素节点</h2>
<p>removeChild() 方法删除指定的节点。</p>
<p>当一个节点被删除时，其所有子节点也会被删除。</p>
<p>下面的代码片段将从载入的 xml 中删除第一个 <book> 元素：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <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></pre>
</div>
<br>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a>
<p>点击 "运行实例" 按钮查看在线实例</p>
</div>
<p>实例解释：</p>
<ol class=" list-paddingleft-2">
<li><p>使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</p></li>
<li><p>把变量 y 设置为要删除的元素节点</p></li>
<li><p>通过使用 removeChild() 方法从父节点删除元素节点</p></li>
</ol>
<hr>
<h2>删除自身 - 删除当前的节点</h2>
<p>removeChild() 方法是唯一可以删除指定节点的方法。</p>
<p>当您已导航到需要删除的节点时，就可以通过使用 parentNode 属性和 removeChild() 方法来删除此节点：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <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></pre>
</div>
<br>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a>
<p>点击 "运行实例" 按钮查看在线实例</p>
</div>
<p>实例解释：</p>
<ol class=" list-paddingleft-2">
<li><p>使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</p></li>
<li><p>把变量 y 设置为要删除的元素节点</p></li>
<li><p>通过使用 parentNode 属性和 removeChild() 方法来删除此元素节点</p></li>
</ol>
<hr>
<h2>删除文本节点</h2>
<p>removeChild() 方法可用于删除文本节点：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <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></pre>
</div>
<br>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a>
<p>点击 "运行实例" 按钮查看在线实例</p>
</div>
<p>实例解释：</p>
<ol class=" list-paddingleft-2">
<li><p>使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</p></li>
<li><p>把变量 x 设置为第一个 title 元素节点</p></li>
<li><p>把变量 y 设置为要删除的文本节点</p></li>
<li><p>通过使用 removeChild() 方法从父节点删除元素节点</p></li>
</ol>
<p>不太常用 removeChild() 从节点删除文本。可以使用 nodeValue 属性代替它。请看下一段。</p>
<hr>
<h2>清空文本节点</h2>
<p>nodeValue 属性可用于改变或清空文本节点的值：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <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></pre>
</div>
<br>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a>
<p>点击 "运行实例" 按钮查看在线实例</p>
</div>
<p>实例解释：</p>
<ol class=" list-paddingleft-2">
<li><p>使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</p></li>
<li><p>把变量 x 设置为第一个 title 元素的文本节点</p></li>
<li><p>使用 nodeValue 属性来清空文本节点的文本</p></li>
</ol>
<p>遍历并更改所有 <title> 元素的文本节点：尝试一下<br></p>
<hr>
<h2>根据名称删除属性节点</h2>
<p>removeAttribute(<em>name</em>) 方法用于根据名称删除属性节点。</p>
<p>实例：removeAttribute('category')</p>
<p>下面的代码片段删除第一个 <book> 元素中的 "category" 属性：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <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></pre>
</div>
<br>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a>
<p>点击 "运行实例" 按钮查看在线实例</p>
</div>
<p>实例解释：</p>
<ol class=" list-paddingleft-2">
<li><p>使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</p></li>
<li><p>使用 getElementsByTagName() 来获取 book 节点</p></li>
<li><p>从第一个 book 元素节点中删除 "category" 属性</p></li>
</ol>
<p>遍历并删除所有 <book> 元素的 "category" 属性：尝试一下</p>
<hr>
<h2>根据对象删除属性节点</h2>
<p>removeAttributeNode(<em>node</em>) 方法通过使用 node 对象作为参数，来删除属性节点。</p>
<p>实例: removeAttributeNode(x)</p>
<p>下面的代码片段删除所有 <book> 元素的所有属性：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <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></pre>
</div>
<br>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a>
<p>点击 "运行实例" 按钮查看在线实例</p>
</div>
<p>实例解释：</p>
<ol class=" list-paddingleft-2">
<li><p>使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</p></li>
<li><p>使用 getElementsByTagName() 来获取所有 book 节点</p></li>
<li><p>检查每个 book 元素是否拥有属性</p></li>
<li><p>如果在某个 book 元素中存在属性，则删除该属性</p></li>
</ol>
<br>
</div>
</div>
</div>
<div class="previous-next-links">
<div class="previous-design-link">
←
<a href="//m.sbmmt.com/xml/xml-nodes-set.html" rel="prev">DOM 改变节点</a>
</div>
<div class="next-design-link">
<a href="//m.sbmmt.com/xml/xml-nodes-replace.html" rel="next">DOM 替换节点</a>→
</div>
</div>
</article>
<div class="right-item phpcn-col-md2">
<ul>
<li><h3>Tutorial Navigation</h3>
<dl class="navigation">
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/course/list/1/type/3.html" target="_blank" title="Big front end">Big front end</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/course/list/1/type/3.html" title="HTML">HTML</a>
<a href="//m.sbmmt.com/course/list/1/type/3.html" title="CSS">CSS</a>
<a href="//m.sbmmt.com/course/list/1/type/3.html" title="HTML5">HTML5</a>
<a href="//m.sbmmt.com/course/list/1/type/3.html" title="CSS3">CSS3</a>
<a href="//m.sbmmt.com/course/list/1/type/3.html" title="JavaScript">JavaScript</a>
<a href="//m.sbmmt.com/course/list/1/type/3.html" title="jQuery">jQuery</a>
<a href="//m.sbmmt.com/course/list/1/type/3.html" title="Vue.js">Vue.js</a>
<a href="//m.sbmmt.com/course/list/1/type/3.html" title="React">React</a>
<a href="//m.sbmmt.com/course/list/1/type/3.html" title="AngularJS">AngularJS</a>
<a href="//m.sbmmt.com/course/list/1/type/3.html" title="Node.js">Node.js</a>
<a href="//m.sbmmt.com/course/list/1/type/3.html" title="AJAX">AJAX</a>
<a href="//m.sbmmt.com/course/list/1/type/3.html" title="Bootstrap">Bootstrap</a>
<a href="//m.sbmmt.com/course/list/1/type/3.html" title="Foundation">Foundation</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/course/list/2/type/3.html" target="_blank" title="JavaScript">JavaScript</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/course/list/2/type/3.html" title="Highcharts">Highcharts</a>
<a href="//m.sbmmt.com/course/list/2/type/3.html" title="Maps API">Maps API</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/course/list/3/type/3.html" target="_blank" title="Backend Development">Backend Development</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="PHP">PHP</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="ThinkPHP">ThinkPHP</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="Laravel">Laravel</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="Python">Python</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="Go">Go</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="Java">Java</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="C">C</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="C++">C++</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="C#">C#</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="JSP">JSP</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="Django">Django</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="ASP.NET">ASP.NET</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="ASP">ASP</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="XML">XML</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="Ruby">Ruby</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="Python3">Python3</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="Perl">Perl</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="Servlet">Servlet</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="Lua">Lua</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="Scala">Scala</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="AppML">AppML</a>
<a href="//m.sbmmt.com/course/list/3/type/3.html" title="VBScript">VBScript</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/course/list/4/type/3.html" target="_blank" title="database">database</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/course/list/4/type/3.html" title="MySQL">MySQL</a>
<a href="//m.sbmmt.com/course/list/4/type/3.html" title="Redis">Redis</a>
<a href="//m.sbmmt.com/course/list/4/type/3.html" title="Oracle">Oracle</a>
<a href="//m.sbmmt.com/course/list/4/type/3.html" title="MongoDB">MongoDB</a>
<a href="//m.sbmmt.com/course/list/4/type/3.html" title="Memcached">Memcached</a>
<a href="//m.sbmmt.com/course/list/4/type/3.html" title="SQL Server">SQL Server</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/course/list/5/type/3.html" target="_blank" title="Mobile terminal">Mobile terminal</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/course/list/5/type/3.html" title="Applets">Applets</a>
<a href="//m.sbmmt.com/course/list/5/type/3.html" title="uni-app">uni-app</a>
<a href="//m.sbmmt.com/course/list/5/type/3.html" title="Flutter">Flutter</a>
<a href="//m.sbmmt.com/course/list/5/type/3.html" title="Android">Android</a>
<a href="//m.sbmmt.com/course/list/5/type/3.html" title="iOS">iOS</a>
<a href="//m.sbmmt.com/course/list/5/type/3.html" title="Swift">Swift</a>
<a href="//m.sbmmt.com/course/list/5/type/3.html" title="other">other</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/course/list/9/type/3.html" target="_blank" title="Operation and maintenance development">Operation and maintenance development</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/course/list/9/type/3.html" title="Linux">Linux</a>
<a href="//m.sbmmt.com/course/list/9/type/3.html" title="Docker">Docker</a>
<a href="//m.sbmmt.com/course/list/9/type/3.html" title="PhpStudy">PhpStudy</a>
<a href="//m.sbmmt.com/course/list/9/type/3.html" title="Git">Git</a>
<a href="//m.sbmmt.com/course/list/9/type/3.html" title="Other tools">Other tools</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/course/list/7/type/3.html" target="_blank" title="UI design">UI design</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/course/list/7/type/3.html" title="Axure">Axure</a>
<a href="//m.sbmmt.com/course/list/7/type/3.html" title="MVC">MVC</a>
<a href="//m.sbmmt.com/course/list/7/type/3.html" title="Web Forms">Web Forms</a>
<a href="//m.sbmmt.com/course/list/7/type/3.html" title="PS">PS</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/course/list/10/type/3.html" target="_blank" title="Computer Basics">Computer Basics</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/course/list/10/type/3.html" title="Design Patterns">Design Patterns</a>
<a href="//m.sbmmt.com/course/list/10/type/3.html" title="regular expression">regular expression</a>
<a href="//m.sbmmt.com/course/list/10/type/3.html" title="HTTP">HTTP</a>
<a href="//m.sbmmt.com/course/list/10/type/3.html" title="Website Building Guide">Website Building Guide</a>
<a href="//m.sbmmt.com/course/list/10/type/3.html" title="Browser information">Browser information</a>
<a href="//m.sbmmt.com/course/list/10/type/3.html" title="website host">website host</a>
<a href="//m.sbmmt.com/course/list/10/type/3.html" title="TCP/IP">TCP/IP</a>
<a href="//m.sbmmt.com/course/list/10/type/3.html" title="W3C">W3C</a>
<a href="//m.sbmmt.com/course/list/10/type/3.html" title="CodeBasic">CodeBasic</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/course/list/6/type/3.html" target="_blank" title="XML">XML</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/course/list/6/type/3.html" title="DTD">DTD</a>
<a href="//m.sbmmt.com/course/list/6/type/3.html" title="XML DOM">XML DOM</a>
<a href="//m.sbmmt.com/course/list/6/type/3.html" title="XSLT">XSLT</a>
<a href="//m.sbmmt.com/course/list/6/type/3.html" title="XPath">XPath</a>
<a href="//m.sbmmt.com/course/list/6/type/3.html" title="XQuery">XQuery</a>
<a href="//m.sbmmt.com/course/list/6/type/3.html" title="XLink">XLink</a>
<a href="//m.sbmmt.com/course/list/6/type/3.html" title="XPointer">XPointer</a>
<a href="//m.sbmmt.com/course/list/6/type/3.html" title="XML Schema">XML Schema</a>
<a href="//m.sbmmt.com/course/list/6/type/3.html" title="XSL-FO">XSL-FO</a>
<a href="//m.sbmmt.com/course/list/6/type/3.html" title="SVG">SVG</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/course/list/8/type/3.html" target="_blank" title="Web Services">Web Services</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/course/list/8/type/3.html" title="Web Services">Web Services</a>
<a href="//m.sbmmt.com/course/list/8/type/3.html" title="WSDL">WSDL</a>
<a href="//m.sbmmt.com/course/list/8/type/3.html" title="SOAP">SOAP</a>
<a href="//m.sbmmt.com/course/list/8/type/3.html" title="RSS">RSS</a>
<a href="//m.sbmmt.com/course/list/8/type/3.html" title="RDF">RDF</a>
</div>
</dd>
</dl></li>
</ul>
</div>
</div>
<div id="codeMark"></div>
<div id="codeMain">
<div class="left">
<div id="codeEditor"></div>
<div class="editor-btn">
<div class="editor-btn-inner">
<a href="javascript:;" class="code-btn-submit r" id="J_Commit" title="submit">submit</a>
</div>
</div>
</div>
<div class="right">
<div id="codeResult"></div>
</div>
<div id="close"></div>
</div>
</body>
</html> 
