diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/node/removechild | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/node/removechild')
-rw-r--r-- | files/zh-cn/web/api/node/removechild/index.html | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/node/removechild/index.html b/files/zh-cn/web/api/node/removechild/index.html new file mode 100644 index 0000000000..77766b3fe4 --- /dev/null +++ b/files/zh-cn/web/api/node/removechild/index.html @@ -0,0 +1,97 @@ +--- +title: Node.removeChild +slug: Web/API/Node/removeChild +tags: + - Node.removeChild() +translation_of: Web/API/Node/removeChild +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong>Node.removeChild() </strong>方法从DOM中删除一个子节点。返回删除的节点。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>let oldChild</em> = node.removeChild(<em>child</em>); + +<strong>//OR +</strong> +<em>element</em>.removeChild(<em>child</em>);</pre> + +<ul> + <li><code>child</code> 是要移除的那个子节点.</li> + <li><code>node</code> 是<code>child</code>的父节点.</li> + <li>oldChild保存对删除的子节点的引用. <code>oldChild</code> === <code>child</code>.</li> +</ul> + +<p>被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中,因此,你还可以把这个节点重新添加回文档中,当然,实现要用另外一个变量比如<code>上例中的oldChild</code>来保存这个节点的引用. 如果使用上述语法中的第二种方法, 即没有使用 oldChild 来保存对这个节点的引用, 则认为被移除的节点已经是无用的, 在短时间内将会被<a href="/zh-CN/docs/Web/JavaScript/Memory_Management">内存管理</a>回收.</p> + +<p>如果上例中的<code>child节点</code>不是<code>node</code>节点的子节点,则该方法会抛出异常.</p> + +<h2 id="Example" name="Example">示例</h2> + +<pre><code><!--Sample HTML code--> +<div id="top" align="center"> </div> + +<script type="text/javascript"> + var top = document.getElementById("top"); + var nested = document.getElementById("nested"); + var garbage = top.removeChild(nested); + //Test Case 2: the method throws the exception (2) +</script> + +<!--Sample HTML code--> +<div id="top" align="center"> + <div id="nested"></div> +</div> + +<script type="text/javascript"> + var top = document.getElementById("top"); + var nested = document.getElementById("nested"); + var garbage = top.removeChild(nested); + // This first call remove correctly the node + garbage = top.removeChild(nested); + // Test Case 1: the method in the second call here, throws the exception (1) +</script></code></pre> + +<pre><!--示例HTML代码--> + +<div id="top" align="center"> + <div id="nested"></div> +</div> +</pre> + +<pre class="brush:js">// 先定位父节点,然后删除其子节点 +var d = document.getElementById("top"); +var d_nested = document.getElementById("nested"); +var throwawayNode = d.removeChild(d_nested); +</pre> + +<pre class="brush:js">// 无须定位父节点,通过parentNode属性直接删除自身 +var node = document.getElementById("nested"); +if (node.parentNode) { + node.parentNode.removeChild(node); +} +</pre> + +<pre class="brush:js">// 移除一个元素节点的所有子节点 +var element = document.getElementById("top"); +while (element.firstChild) { + element.removeChild(element.firstChild); +} +</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li> +</ul> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li>{{domxref("Node.replaceChild")}}</li> + <li>{{domxref("Node.parentNode")}}</li> + <li>{{domxref("ChildNode.remove")}}</li> +</ul> |