From d4dae3ab11f8ac9044e39e8c13f899e215917740 Mon Sep 17 00:00:00 2001 From: MDN Date: Fri, 23 Apr 2021 00:11:28 +0000 Subject: [CRON] sync translated content --- .../web/api/parentnode/replacechildren/index.html | 161 --------------------- 1 file changed, 161 deletions(-) delete mode 100644 files/zh-cn/web/api/parentnode/replacechildren/index.html (limited to 'files/zh-cn/web/api') diff --git a/files/zh-cn/web/api/parentnode/replacechildren/index.html b/files/zh-cn/web/api/parentnode/replacechildren/index.html deleted file mode 100644 index 4f1a67ac1b..0000000000 --- a/files/zh-cn/web/api/parentnode/replacechildren/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: ParentNode.replaceChildren() -slug: Web/API/ParentNode/replaceChildren -translation_of: Web/API/ParentNode/replaceChildren ---- -
{{APIRef("DOM")}}{{seecompattable}}
- -

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

- -

语法

- -
// [Throws, Unscopable]
-ParentNode.replaceChildren(...nodesOrDOMStrings) // 返回 undefined
-
- -

参数

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

异常

- - - -

例子

- -

清空一个节点

- -

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

- -
myNode.replaceChildren();
- -

在父节点之间转移节点

- -

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

- -
<h2>派对食物列表</h2>
-
-<main>
-  <div>
-    <label for="no">不，谢谢了！</label>
-
-    <select id="no" multiple size="10">
-      <option>苹果</option>
-      <option>橘子</option>
-      <option>葡萄</option>
-      <option>香蕉</option>
-      <option>奇异果</option>
-      <option>巧克力饼干</option>
-      <option>花生饼干</option>
-      <option>巧克力棒</option>
-      <option>火腿三明治</option>
-      <option>乳酪三明治</option>
-      <option>沙拉三明治</option>
-      <option>冰淇淋</option>
-      <option>果冻</option>
-      <option>胡萝卜和鹰嘴豆泥</option>
-      <option>玛格丽特披萨</option>
-      <option>腊肠比萨</option>
-      <option>素比萨</option>
-    </select>
-  </div>
-
-  <div class="buttons">
-    <button id="to-yes">转移到"是" --&gt;</button>
-    <button id="to-no">&lt;-- 转移到 "否"</button>
-  </div>
-
-  <div>
-    <label for="yes">是的，请！</label>
-
-    <select id="yes" multiple size="10">
-
-    </select>
-  </div>
-</main>
- -

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

- -
main {
-  display: flex;
-}
-
-div {
-  margin-right: 20px;
-}
-
-label, button {
-  display: block;
-}
-
-.buttons {
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-}
-
-select {
-  width: 200px;
-}
- -

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

- -

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

- -
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', () => {
-  const selectedTransferOptions = document.querySelectorAll('#no option:checked');
-  const existingYesOptions = document.querySelectorAll('#yes option');
-  yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions);
-});
-
-noBtn.addEventListener('click', () => {
-  const selectedTransferOptions = document.querySelectorAll('#yes option:checked');
-  const existingNoOptions = document.querySelectorAll('#no option');
-  noSelect.replaceChildren(...selectedTransferOptions, ...existingNoOptions);
-});
- -

最终结果如下：

- -

{{EmbedLiveSample('Transferring_nodes_between_parents', '100%', '350')}}

- -

规范

- - - - - - - - - - - - - - -
规范状态备注
{{SpecName('DOM WHATWG', '#dom-parentnode-replacechildren', 'ParentNode.replaceChildren()')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

浏览器兼容性

- - - -

{{Compat("api.ParentNode.replaceChildren")}}

- -

相关链接

- - -- cgit v1.2.3-54-g00ecf