1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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>
|
