files/zh-cn/web/api/parentnode/replacechildren/index.html


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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

---
title: ParentNode.replaceChildren()
slug: Web/API/ParentNode/replaceChildren
translation_of: Web/API/ParentNode/replaceChildren
---
<div>{{APIRef("DOM")}}{{seecompattable}}</div>

<p><strong><code>ParentNode.replaceChildren()</code></strong> 方法将一个 {{domxref("Node")}} 的后代替换为指定的后代集合。这些新的后代可以为 {{domxref("DOMString")}} 或 {{domxref("Node")}} 对象。</p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox notranslate">// [Throws, Unscopable]
ParentNode.replaceChildren(...<var>nodesOrDOMStrings</var>) // 返回 undefined
</pre>

<h3 id="参数">参数</h3>

<dl>
 <dt><code><var>nodesOrDOMStrings</var></code></dt>
 <dd>一组用于替换 <code>ParentNode</code> 现有后代的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。若没有指定替代对象时，<code>ParentNode</code> 的所有后代都将被清空。</dd>
</dl>

<h3 id="异常">异常</h3>

<ul>
 <li>{{domxref("HierarchyRequestError")}}: 当违反了<a href="https://dom.spec.whatwg.org/#concept-node-tree">节点树的约束条件</a>时抛出。</li>
</ul>

<h2 id="例子">例子</h2>

<h3 id="清空一个节点">清空一个节点</h3>

<p><code>replaceChildren()</code> 为清空一个节点的后代提供了非常方便的机制，您只需在父节点不指定任何实参调用该方法即可。</p>

<pre class="brush: js notranslate">myNode.replaceChildren();</pre>

<h3 id="在父节点之间转移节点">在父节点之间转移节点</h3>

<p><code>replaceChildren()</code> 允许您更轻松地在父节点之间转移节点，而无需依赖冗余的循环代码。例如，有一个简单的应用程序让您选择您派对上的食物。它的 HTML 可能如下：</p>

<pre class="brush: html notranslate">&lt;h2&gt;派对食物列表&lt;/h2&gt;

&lt;main&gt;
  &lt;div&gt;
    &lt;label for="no"&gt;不，谢谢了！&lt;/label&gt;

    &lt;select id="no" multiple size="10"&gt;
      &lt;option&gt;苹果&lt;/option&gt;
      &lt;option&gt;橘子&lt;/option&gt;
      &lt;option&gt;葡萄&lt;/option&gt;
      &lt;option&gt;香蕉&lt;/option&gt;
      &lt;option&gt;奇异果&lt;/option&gt;
      &lt;option&gt;巧克力饼干&lt;/option&gt;
      &lt;option&gt;花生饼干&lt;/option&gt;
      &lt;option&gt;巧克力棒&lt;/option&gt;
      &lt;option&gt;火腿三明治&lt;/option&gt;
      &lt;option&gt;乳酪三明治&lt;/option&gt;
      &lt;option&gt;沙拉三明治&lt;/option&gt;
      &lt;option&gt;冰淇淋&lt;/option&gt;
      &lt;option&gt;果冻&lt;/option&gt;
      &lt;option&gt;胡萝卜和鹰嘴豆泥&lt;/option&gt;
      &lt;option&gt;玛格丽特披萨&lt;/option&gt;
      &lt;option&gt;腊肠比萨&lt;/option&gt;
      &lt;option&gt;素比萨&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;

  &lt;div class="buttons"&gt;
    &lt;button id="to-yes"&gt;转移到"是" --&amp;gt;&lt;/button&gt;
    &lt;button id="to-no"&gt;&amp;lt;-- 转移到 "否"&lt;/button&gt;
  &lt;/div&gt;

  &lt;div&gt;
    &lt;label for="yes"&gt;是的，请！&lt;/label&gt;

    &lt;select id="yes" multiple size="10"&gt;

    &lt;/select&gt;
  &lt;/div&gt;
&lt;/main&gt;</pre>

<p>使用一些简单的 CSS 将两个选择列表排成一行，并将控制按钮放置在它们之间是很有意义的：</p>

<pre class="brush: css notranslate">main {
  display: flex;
}

div {
  margin-right: 20px;
}

label, button {
  display: block;
}

.buttons {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

select {
  width: 200px;
}</pre>

<p>我们要做的是，当按下 “是” 按钮时，将 “否” 列表中的所有选定选项都转移到 “是” 列表中，然后当按下“否”按钮时，将 “是” 列表中的所有选定选项都转移到 “否” 列表中。</p>

<p>为此，我们为每个按钮提供一个 click 事件处理句柄，该事件句柄将所选选项赋值到第一个常量中，将要转移到的列表中的现有的选项赋值到第二个常量中。然后，它会调用列表的 <code>replaceChildren()</code> 方法，使用延展运算符传入两个常量，进而将两个常量中包含的所有选项转移到目标列表。</p>

<pre class="brush: js notranslate">const noSelect = document.getElementById('no');
const yesSelect = document.getElementById('yes');
const noBtn = document.getElementById('to-no');
const yesBtn = document.getElementById('to-yes');

yesBtn.addEventListener('click', () =&gt; {
  const selectedTransferOptions = document.querySelectorAll('#no option:checked');
  const existingYesOptions = document.querySelectorAll('#yes option');
  yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions);
});

noBtn.addEventListener('click', () =&gt; {
  const selectedTransferOptions = document.querySelectorAll('#yes option:checked');
  const existingNoOptions = document.querySelectorAll('#no option');
  noSelect.replaceChildren(...selectedTransferOptions, ...existingNoOptions);
});</pre>

<p>最终结果如下：</p>

<p>{{EmbedLiveSample('Transferring_nodes_between_parents', '100%', '350')}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-replacechildren', 'ParentNode.replaceChildren()')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>


<p>{{Compat("api.ParentNode.replaceChildren")}}</p>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li>
 <li>{{domxref("ParentNode.prepend()")}}</li>
 <li>{{domxref("ParentNode.append()")}}</li>
 <li>{{domxref("NodeList")}}</li>
</ul>