From 98937ae20273dd330ddfbc82fbfa408404699539 Mon Sep 17 00:00:00 2001
From: 720 <71604450+T34-active@users.noreply.github.com>
Date: Tue, 20 Aug 2024 21:46:50 +0800
Subject: [PATCH] [zh-cn]: update the translation of Node `removeChild()`
method (#23171)
---
files/zh-cn/web/api/node/removechild/index.md | 134 +++++++++++-------
1 file changed, 80 insertions(+), 54 deletions(-)
diff --git a/files/zh-cn/web/api/node/removechild/index.md b/files/zh-cn/web/api/node/removechild/index.md
index 424033844531de..75b2e501bcdcbb 100644
--- a/files/zh-cn/web/api/node/removechild/index.md
+++ b/files/zh-cn/web/api/node/removechild/index.md
@@ -1,97 +1,123 @@
---
-title: Node.removeChild
+title: Node:removeChild() 方法
slug: Web/API/Node/removeChild
+l10n:
+ sourceCommit: aa8fa82a902746b0bd97839180fc2b5397088140
---
{{APIRef("DOM")}}
-**Node.removeChild()** 方法从 DOM 中删除一个子节点。返回删除的节点。
+{{domxref("Node")}} 接口的 **`removeChild()`** 方法会从 DOM 中移除一个子节点,并返回移除的节点。
-## 语法
+> [!NOTE]
+> 只要对被移除的子节点保持引用,它仍然存在于内存中,但不再是 DOM 的一部分。在以后的代码中仍可重复使用。
+>
+> 如果不存储 `removeChild()` 的返回值,也不保留其他引用,该节点将在短时间内在内存中[自动删除](/zh-CN/docs/Web/JavaScript/Memory_management)。
-```plain
-let oldChild = node.removeChild(child);
+与 {{domxref("Node.cloneNode()")}} 不同,返回值保留了与其关联的 `EventListener` 对象。
-//OR
+## 语法
-element.removeChild(child);
+```js-nolint
+removeChild(child)
```
-- `child` 是要移除的那个子节点。
-- `node` 是`child`的父节点。
-- oldChild 保存对删除的子节点的引用。`oldChild` === `child`.
+### 参数
-被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的 DOM 树中,因此,你还可以把这个节点重新添加回文档中,当然,实现要用另外一个变量比如`上例中的 oldChild`来保存这个节点的引用。如果使用上述语法中的第二种方法,即没有使用 oldChild 来保存对这个节点的引用,则认为被移除的节点已经是无用的,在短时间内将会被[内存管理](/zh-CN/docs/Web/JavaScript/Memory_management)回收。
+- `child`
+ - : {{domxref("Node")}},即要从 DOM 中删除的子节点。
-如果上例中的`child 节点`不是`node`节点的子节点,则该方法会抛出异常。
+### 异常
+
+- `NotFoundError` {{domxref("DOMException")}}
+ - : 如果 `child` 不是该节点的子节点,则抛出此异常。
+- {{jsxref("TypeError")}}
+ - : 如果 `child` 为 `null`,则抛出此异常。
## 示例
-```plain
-
-
+### 简单的示例
-
+给定以下 HTML:
-
-
-
+```html
+
-
-
```
-```plain
-
-
-
-```
+在已知其父节点时移除指定元素:
```js
-// 先定位父节点,然后删除其子节点
-var d = document.getElementById("top");
-var d_nested = document.getElementById("nested");
-var throwawayNode = d.removeChild(d_nested);
+const parent = document.getElementById("parent");
+const child = document.getElementById("child");
+const throwawayNode = parent.removeChild(child);
```
+在不需要指定其父节点的情况下移除指定元素:
+
```js
-// 无须定位父节点,通过 parentNode 属性直接删除自身
-var node = document.getElementById("nested");
+const node = document.getElementById("child");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
```
+从元素中移除所有子元素:
+
```js
-// 移除一个元素节点的所有子节点
-var element = document.getElementById("top");
+const element = document.getElementById("idOfParent");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
```
+### 引发 TypeError
+
+```html
+
+
+```
+
+```js
+const parent = document.getElementById("parent");
+const child = document.getElementById("child");
+
+// 抛出未捕获的 TypeError
+const garbage = parent.removeChild(child);
+```
+
+### 引发 NotFoundError
+
+```html
+
+
+```
+
+```js
+const parent = document.getElementById("parent");
+const child = document.getElementById("child");
+
+// 第一次调用正确并移除了该节点。
+const garbage = parent.removeChild(child);
+
+// 抛出 NotFoundError
+garbage = parent.removeChild(child);
+```
+
## 规范
-- [DOM Level 1 Core: removeChild](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild)
-- [DOM Level 2 Core: removeChild](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066)
-- [DOM Level 3 Core: removeChild](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066)
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
-## 相关链接
+## 参见
-- {{domxref("Node.replaceChild")}}
+- {{domxref("Node.replaceChild()")}}
- {{domxref("Node.parentNode")}}
-- {{domxref("ChildNode.remove")}}
+- {{domxref("Element.remove()")}}
+- {{domxref("Node.cloneNode()")}}