From a6027062bc4889c5c93ec705c04234e21a406aac Mon Sep 17 00:00:00 2001 From: ikenk <93726321+ikenk@users.noreply.github.com> Date: Fri, 23 Aug 2024 09:24:29 +0800 Subject: [PATCH 01/41] [zh-cn] Add alt text to 'What does it look like' (#23187) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修改了"它看起来像是？"部分的图片的 alt --- .../express_nodejs/displaying_data/home_page/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md index 51b74bba023fd9..8c4586f03fcaf8 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.md @@ -126,7 +126,7 @@ block content 此处，我们应该已经创建了呈现 index 页面，所需要的每样东西。运行本地图书馆应用，并打开浏览器访问 `http://localhost:3000/`。如果每样东西都设定正确了，你的网站看起来应该像底下的截图。 -![Home page - Express Local Library site](locallibary_express_home.png) +![主页 - Express 教程：本地图书馆网站](locallibary_express_home.png) > [!NOTE] > 你将无法使用侧边栏链接，因为这些网页的网址，视图和模板尚未定义。例如，如果你尝试，取决于你点击的链接，你将获取“NOT IMPLEMENTED: Book list”等错误。在“控制器”文件中的不同控制器中，会指定这些字符串文字（将被合适的数据替换）。 From ce8c2d17230268f3d8567b98dc7c5f08f99a174b Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Fri, 23 Aug 2024 09:36:17 +0800 Subject: [PATCH 02/41] [zh-cn]: update the translation of Range `setStartBefore()` method (#23170) * [zh-cn]: update the translation of Range `setStartBefore()` method * Apply suggestions from code review --- .../web/api/range/setstartbefore/index.md | 36 +++++++++++-------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/files/zh-cn/web/api/range/setstartbefore/index.md b/files/zh-cn/web/api/range/setstartbefore/index.md index 769070f3dea29b..f7645d205541c7 100644 --- a/files/zh-cn/web/api/range/setstartbefore/index.md +++ b/files/zh-cn/web/api/range/setstartbefore/index.md @@ -1,40 +1,46 @@ --- -title: Range.setStartBefore() +title: Range：setStartBefore() 方法 slug: Web/API/Range/setStartBefore +l10n: + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- {{ApiRef("DOM")}} -**`Range.setStartBefore()`** 方法相对另一个 {{domxref("Node")}}来设置一个{{domxref("Range")}} 的开始位置。{{domxref("Range")}}的开始节点（focusNode）的父节点，和 `referenceNode`的父节点是同一个。 +**`Range.setStartBefore()`** 方法将 {{domxref("Range")}} 的起始位置设置在另一个 {{domxref("Node")}} 之前。{{domxref("Range")}} 起始位置的父 {{domxref("Node")}} 将与 `referenceNode` 的父节点相同。 -## Syntax +## 语法 -```plain -range.setStartBefore(referenceNode); +```js-nolint +setStartBefore(referenceNode) ``` -### Parameters +### 参数 + +- `referenceNode` + - : {{domxref("Range")}} 应该在其之前开始的 {{domxref("Node")}}。 + +### 返回值 -- _referenceNode_ - - : 一个{{domxref("Range")}}新的开始位置上的{{domxref("Node")}}. +无（{{jsxref("undefined")}}）。 -## Example +## 示例 ```js -var range = document.createRange(); -var referenceNode = document.getElementsByTagName("div").item(0); +const range = document.createRange(); +const referenceNode = document.getElementsByTagName("div").item(0); range.setStartBefore(referenceNode); ``` -## Specifications +## 规范 {{Specifications}} -## Browser compatibility +## 浏览器兼容性 {{Compat}} -## See also +## 参见 -- [The DOM interfaces index](/zh-CN/docs/DOM/DOM_Reference) +- [DOM 接口索引](/zh-CN/docs/Web/API/Document_Object_Model) From 45bf7fb948dea5403a3b501905a0a6219fbab96f Mon Sep 17 00:00:00 2001 From: Chunhui Fu Date: Fri, 23 Aug 2024 09:39:37 +0800 Subject: [PATCH 03/41] [zh-cn]: create docs for HTMLTrackElement (#23060) Co-authored-by: A1lo --- .../htmltrackelement/cuechange_event/index.md | 61 ++++++++++++++++ files/zh-cn/web/api/htmltrackelement/index.md | 71 +++++++++++++++++++ .../web/api/htmltrackelement/src/index.md | 33 +++++++++ 3 files changed, 165 insertions(+) create mode 100644 files/zh-cn/web/api/htmltrackelement/cuechange_event/index.md create mode 100644 files/zh-cn/web/api/htmltrackelement/index.md create mode 100644 files/zh-cn/web/api/htmltrackelement/src/index.md diff --git a/files/zh-cn/web/api/htmltrackelement/cuechange_event/index.md b/files/zh-cn/web/api/htmltrackelement/cuechange_event/index.md new file mode 100644 index 00000000000000..12482ef543f5d5 --- /dev/null +++ b/files/zh-cn/web/api/htmltrackelement/cuechange_event/index.md @@ -0,0 +1,61 @@ +--- +title: HTMLTrackElement：cuechange 事件 +slug: Web/API/HTMLTrackElement/cuechange_event +l10n: + sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3 +--- + +{{APIRef("WebVTT")}} + +**`cuechange`** 事件在 {{domxref("TextTrack")}} 更改当前显示提示（cue）时触发。此事件在 `TextTrack` 和显示它的 {{domxref("HTMLTrackElement")}}（如果有的话）上触发。 + +## 语法 + +在像 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 这样的方法中使用此事件名，或设置事件处理器属性。 + +```js +addEventListener("cuechange", (event) => {}); + +oncuechange = (event) => {}; +``` + +## 事件类型 + +没有添加属性的通用 {{DOMxRef("Event")}}。 + +## 示例 + +每当当前呈现的 cue 更改时，由 {{domxref("HTMLTrackElement.track", "track")}} 属性指示的底层 {{domxref("TextTrack")}} 会接收 `cuechange` 事件。即使轨道并未与媒体元素关联，也会发生。 + +如果轨道和媒体元素*是*关联的，使用 {{HTMLElement("track")}} 元素作为 {{HTMLElement("audio")}} 或 {{HTMLElement("video")}} 的子元素，`cuechange` 事件也发送给 {{domxref("HTMLTrackElement")}}。 + +```js +let textTrackElem = document.getElementById("texttrack"); + +textTrackElem.addEventListener("cuechange", (event) => { + let cues = event.target.track.activeCues; +}); +``` + +或者，你可以使用 `oncuechange` 事件处理器。 + +```js +let textTrackElem = document.getElementById("texttrack"); + +textTrackElem.oncuechange = (event) => { + let cues = event.target.track.activeCues; +}; +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{glossary("WebVTT")}} +- {{domxref("TextTrack")}} 上的同一事件：{{domxref("TextTrack.cuechange_event", "cuechange")}} diff --git a/files/zh-cn/web/api/htmltrackelement/index.md b/files/zh-cn/web/api/htmltrackelement/index.md new file mode 100644 index 00000000000000..ebc2d0da5c79da --- /dev/null +++ b/files/zh-cn/web/api/htmltrackelement/index.md @@ -0,0 +1,71 @@ +--- +title: HTMLTrackElement +slug: Web/API/HTMLTrackElement +l10n: + sourceCommit: 9d5c9fbe387ba7c143fdd7c73a265b209b7f6ec4 +--- + +{{APIRef("HTML DOM")}} + +**`HTMLTrackElement`** 接口表示 {{Glossary("DOM")}} 中的 {{Glossary("HTML")}} {{HTMLElement("track")}} 元素。此元素可以作为 {{HTMLElement("audio")}} 或 {{HTMLElement("video")}} 的子元素，以指定包含隐藏式字幕或标题等信息的文本轨道使用。 + +{{InheritanceDiagram}} + +## 实例属性 + +_从其父接口 {{domxref("HTMLElement")}} 继承属性。_ + +- {{domxref("HTMLTrackElement.kind")}} + - : 反映 [`kind`](/zh-CN/docs/Web/HTML/Element/track#kind) HTML 属性的字符串，指示如何使用文本轨道。可能的值有：`subtitles`、`captions`、`descriptions`、`chapters` 或 `metadata`。 +- {{domxref("HTMLTrackElement.src")}} + - : 反映 [`src`](/zh-CN/docs/Web/HTML/Element/track#src) HTML 属性的字符串，指示文本轨道数据的地址。 +- {{domxref("HTMLTrackElement.srclang")}} + - : 反映 [`srclang`](/zh-CN/docs/Web/HTML/Element/track#srclang) HTML 属性的字符串，指示文本轨道数据的语言。 +- {{domxref("HTMLTrackElement.label")}} + - : 反映 [`label`](/zh-CN/docs/Web/HTML/Element/track#label) HTML 属性的字符串，指示轨道的用户可读的标题。 +- {{domxref("HTMLTrackElement.default")}} + - : 反映 [`default`](/zh-CN/docs/Web/HTML/Element/track#default) 属性的布尔值，如果用户的偏好没有指示另一个轨道更合适，则指示要启用该轨道。 +- {{domxref("HTMLTrackElement.readyState")}} {{ReadOnlyInline}} + + - : 返回 `unsigned short` 显示轨道的准备状态： + + | 常量 | 值 | 描述 | + | --------- | --- | ----------------------------------------------------------------------------------------------------- | + | `NONE` | 0 | 表示尚未获得文本轨道的提示（cue）。 | + | `LOADING` | 1 | 表示正在加载文本轨道，到目前为止还没有遇到致命错误。解析器可能湘轨道中添加更多 cue。 | + | `LOADED` | 2 | 表示已加载文本轨道，没有出现致命错误。 | + | `ERROR` | 3 | 表示文本轨道已启用，但当用户代理尝试获取它时，以某种方式失败了。部分或全部 cue 可能丢失，且无法获得。 | + +- {{domxref("HTMLTrackElement.track")}} {{ReadOnlyInline}} + - : 返回 {{Domxref("TextTrack")}} 是轨道元素的文本轨道数据。 + +## 实例方法 + +_无特定方法；从其父接口 {{domxref("HTMLElement")}} 继承方法。_ + +## 事件 + +_从其父接口 {{domxref("HTMLElement")}} 继承事件。_ + +使用 {{domxref("EventTarget/addEventListener", "addEventListener()")}} 或为此接口的 `oneventname` 属性分配一个事件监听器来监听这些事件： + +- {{domxref("HTMLTrackElement.cuechange_event", "cuechange")}} + - : 当底层的 {{domxref("TextTrack")}} 更改了当前呈现的 cue 时发送事件。此事件始终发送到 `TextTrack`，但如果与轨道关联，则*也*会发送到 `HTMLTrackElement`。你可以使用 `oncuechange` 事件为此事件建立处理器。 + +## 使用说明 + +### 加载轨道的文本资源 + +如果轨道的 {{domxref("TextTrack.mode", "mode")}} 最初处于 `disabled` 状态，则描述文本轨道实际 cue 的 WebVTT 或 TTML 数据不加载。如果你需要在设置 `` 之后对轨道执行任何处理，你应该确保轨道的 `mode` 是 `hidden`（如果你不想让它呈现给用户）或 `showing`（初始时显示轨道）。你可以以后根据需要更改模式。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- 实现此接口的 HTML 元素：{{HTMLElement("track")}}。 diff --git a/files/zh-cn/web/api/htmltrackelement/src/index.md b/files/zh-cn/web/api/htmltrackelement/src/index.md new file mode 100644 index 00000000000000..3d017cfc3c2dd2 --- /dev/null +++ b/files/zh-cn/web/api/htmltrackelement/src/index.md @@ -0,0 +1,33 @@ +--- +title: HTMLTrackElement：src 属性 +slug: Web/API/HTMLTrackElement/src +l10n: + sourceCommit: bd15d43260b7e72b1066c04d9d9f3b79129c619c +--- + +{{APIRef("HTML DOM")}} + +**`HTMLTrackElement.src`** 属性反映 {{HTMLElement("track")}} 元素的 [`src`](/zh-CN/docs/Web/HTML/Element/track#src) 属性的值，其指示文本轨道数据的 URL。 + +## 值 + +一个包含文本轨道数据的 URL 字符串。 + +## 示例 + +```js +// 即将推出 +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLTrackElement")}}：用户定义 `HTMLTrackElement.src` 属性的接口。 +- {{HTMLElement("track")}} From 255cbbe45b9e849d66fe779a6cc1e7f1cef3b604 Mon Sep 17 00:00:00 2001 From: TSinChen Date: Fri, 23 Aug 2024 09:41:16 +0800 Subject: [PATCH 04/41] [zh-tw] unify translation of HT"ML" (#23151) --- files/zh-tw/glossary/css/index.md | 2 +- files/zh-tw/glossary/html/index.md | 2 +- .../learn/getting_started_with_the_web/html_basics/index.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/files/zh-tw/glossary/css/index.md b/files/zh-tw/glossary/css/index.md index 1e8f9bc1ed80f6..759d58c208890e 100644 --- a/files/zh-tw/glossary/css/index.md +++ b/files/zh-tw/glossary/css/index.md @@ -7,7 +7,7 @@ slug: Glossary/CSS **階層式樣式表**，或稱**層疊樣式表**（Cascading Style Sheets，**CSS**）是控制網頁的外觀，要在{{glossary("瀏覽器")}}裡面如何表現的陳述式語言。瀏覽器會套用 CSS 樣式宣告、以期被選中的元素能正確顯示之。樣式宣告包含了屬性（Property）與屬性值（Value）。它們會判斷網頁如何顯示。 -CSS 與 {{Glossary("HTML")}} 及 {{Glossary("JavaScript")}} 並列為網路三大核心技術。CSS 通常用作{{Glossary("Element"," HTML 元素")}}的樣式化，但它也能給其他像 {{Glossary("SVG")}} 或 {{Glossary("XML")}} 之類的標示語言樣式化。 +CSS 與 {{Glossary("HTML")}} 及 {{Glossary("JavaScript")}} 並列為網路三大核心技術。CSS 通常用作{{Glossary("Element"," HTML 元素")}}的樣式化，但它也能給其他像 {{Glossary("SVG")}} 或 {{Glossary("XML")}} 之類的標記語言樣式化。 CSS 的規則，是一個{{Glossary("CSS Property","屬性")}}配上一個{{Glossary("selector","選擇器")}}。以下的例子能把所有 HTML 的段落元素，變成黑底黃字： diff --git a/files/zh-tw/glossary/html/index.md b/files/zh-tw/glossary/html/index.md index 2cf40743217944..e26b90ca02b634 100644 --- a/files/zh-tw/glossary/html/index.md +++ b/files/zh-tw/glossary/html/index.md @@ -7,7 +7,7 @@ slug: Glossary/HTML {{QuickLinksWithSubpages("/zh-TW/docs/Glossary")}} -超文件標示語言（**HTML**，HyperText Markup Language）是用於指定網頁結構的描述性語言。 +超文件標記語言（**HTML**，HyperText Markup Language）是用於指定網頁結構的描述性語言。 ## 簡歷 diff --git a/files/zh-tw/learn/getting_started_with_the_web/html_basics/index.md b/files/zh-tw/learn/getting_started_with_the_web/html_basics/index.md index 3931535fb34f5b..16f1a6dc0a4dcc 100644 --- a/files/zh-tw/learn/getting_started_with_the_web/html_basics/index.md +++ b/files/zh-tw/learn/getting_started_with_the_web/html_basics/index.md @@ -5,7 +5,7 @@ slug: Learn/Getting_started_with_the_web/HTML_basics {{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}} -HTML（**H**ypertext **M**arkup **L**anguage），中文全名為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言。網頁內容的組成，可能包含了段落、清單、圖片或表格...等。透過這篇文章，希望能幫助大家對 HTML 及其功能有基本的認識。 +HTML（**H**ypertext **M**arkup **L**anguage），中文全名為「超文字標記語言」，是一種用來組織架構並呈現網頁內容的標記語言。網頁內容的組成，可能包含了段落、清單、圖片或表格...等。透過這篇文章，希望能幫助大家對 HTML 及其功能有基本的認識。 ## HTML 到底是什麼？ From 3606d364f743f51fd3e1a6de60d2b8b84f85010d Mon Sep 17 00:00:00 2001 From: xion <65892539+xionkq@users.noreply.github.com> Date: Fri, 23 Aug 2024 16:52:04 +0800 Subject: [PATCH 05/41] [zh-cn]: update reference link (#23204) --- files/zh-cn/web/api/setinterval/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/setinterval/index.md b/files/zh-cn/web/api/setinterval/index.md index 71fd4dab891a9f..b57bd6f59538ce 100644 --- a/files/zh-cn/web/api/setinterval/index.md +++ b/files/zh-cn/web/api/setinterval/index.md @@ -162,7 +162,7 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error 定时器是可以嵌套的；这意味着，`setInterval()` 的回调中可以嵌入对 `setInterval()` 的调用以创建另一个定时器，即使第一个定时器还在运行。为了减轻这对性能产生的潜在影响，一旦定时器嵌套超过 5 层深度，浏览器将自动强制设置定时器的最小时间间隔为 4 毫秒。如果尝试将深层嵌套中调用 `setInterval()` 的延迟设定为小于 4 毫秒的值，其将被固定为 4 毫秒。 -在某些情况下，浏览器可能会强制执行更严格的最小时间间隔限制，尽管这些情况是不常见的。另外，请注意每次调用回调函数之间经过的实际时间可能会比给定的 `delay` 长；有关的示例，请参见[实际延时比设定值更久的原因](/zh-CN/docs/Web/API/setTimeout#实际延时比设定值更久的原因：最小延迟时间)。 +在某些情况下，浏览器可能会强制执行更严格的最小时间间隔限制，尽管这些情况是不常见的。另外，请注意每次调用回调函数之间经过的实际时间可能会比给定的 `delay` 长；有关的示例，请参见[实际延时比设定值更久的原因](/zh-CN/docs/Web/API/setTimeout#延时比指定值更长的原因)。 ### 确保执行时间短于定时器时间间隔 From 5e735e09e2a04ea0e4ae6332200a2748d39e941f Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Fri, 23 Aug 2024 20:40:40 +0800 Subject: [PATCH 06/41] [zh-cn]: update the translation of `Event.srcElement` property (#23208) --- files/zh-cn/web/api/event/srcelement/index.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/files/zh-cn/web/api/event/srcelement/index.md b/files/zh-cn/web/api/event/srcelement/index.md index 9a83a87662c172..ada91343c46ae1 100644 --- a/files/zh-cn/web/api/event/srcelement/index.md +++ b/files/zh-cn/web/api/event/srcelement/index.md @@ -1,19 +1,17 @@ --- -title: Event.srcElement +title: Event：srcElement 属性 slug: Web/API/Event/srcElement +l10n: + sourceCommit: 15f0b5552bc9c2ea1f32b0cd5ee840a7d43c887e --- -{{ApiRef("DOM")}} +{{APIRef("DOM")}}{{deprecated_header}}{{AvailableInWorkers}} -{{ Non-standard_header() }} - -**`Event.srcElement`** 是标准的 {{domxref("Event.target")}} 属性的一个别名。它只对老版本的 IE 浏览器有效。 +已弃用的 **`Event.srcElement`** 是 {{domxref("Event.target")}} 属性的别名。请使用 {{domxref("Event.target")}} 代替。 ## 规范 -不属于任何规范 - -微软 **[在 MSDN 有一篇描述。]()** +{{Specifications}} ## 浏览器兼容性 From 5886186fc854d71ef710148fdf8dfb25442f0bc4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 19 Aug 2024 20:59:10 +0900 Subject: [PATCH 07/41] =?UTF-8?q?2024/07/25=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/mutationobserver/index.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/files/ja/web/api/mutationobserver/index.md b/files/ja/web/api/mutationobserver/index.md index 6cb4434396ba3b..6c5634da814e02 100644 --- a/files/ja/web/api/mutationobserver/index.md +++ b/files/ja/web/api/mutationobserver/index.md @@ -1,11 +1,13 @@ --- title: MutationObserver slug: Web/API/MutationObserver +l10n: + sourceCommit: 32305cc3cf274fbfdcc73a296bbd400a26f38296 --- {{APIRef("DOM WHATWG")}} -{{domxref("MutationObserver")}} インターフェイスは、 [DOM](/ja/docs/Web/API/Document_Object_Model) ツリーへ変更が加えられたことを監視することができる機能を提供します。これは DOM3 Events の仕様で定義されていた [Mutation Events](/ja/docs/Web/API/MutationEvent) 機能の置き換えとして設計されたものです。 +**`MutationObserver`** インターフェイスは、 [DOM](/ja/docs/Web/API/Document_Object_Model) ツリーへ変更が加えられたことを監視することができる機能を提供します。これは DOM3 Events の仕様で定義されていた [Mutation Events](/ja/docs/Web/API/MutationEvent) 機能の置き換えとして設計されたものです。 ## コンストラクター @@ -23,7 +25,7 @@ slug: Web/API/MutationObserver ## Mutation Observer と resize イベントリスナーのカスタマイズとデモ - + ## 例 @@ -37,13 +39,12 @@ const targetNode = document.getElementById("some-id"); const config = { attributes: true, childList: true, subtree: true }; // 変更が発見されたときに実行されるコールバック関数 -const callback = function (mutationsList, observer) { - // Use traditional 'for loops' for IE 11 - for (const mutation of mutationsList) { +const callback = (mutationList, observer) => { + for (const mutation of mutationList) { if (mutation.type === "childList") { - console.log("A child node has been added or removed."); + console.log("子ノードが追加または削除されました。"); } else if (mutation.type === "attributes") { - console.log("The " + mutation.attributeName + " attribute was modified."); + console.log(`${mutation.attributeName} 属性が変更されました。`); } } }; @@ -71,6 +72,6 @@ observer.disconnect(); - {{domxref('PerformanceObserver')}} - {{domxref('ResizeObserver')}} - {{domxref('IntersectionObserver')}} -- [A brief overview](https://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers) +- [A brief overview](https://developer.chrome.com/blog/detect-dom-changes-with-mutation-observers/) - [A more in-depth discussion](https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/) - [A screencast by Chromium developer Rafael Weinstein](https://www.youtube.com/watch?v=eRZ4pO0gVWw) From 4e825f89b80bb1c41538ece93b5565116f1cb610 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 19 Aug 2024 21:14:12 +0900 Subject: [PATCH 08/41] =?UTF-8?q?2023/11/11=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mutationobserver/index.md | 138 +++++++++++++----- 1 file changed, 100 insertions(+), 38 deletions(-) diff --git a/files/ja/web/api/mutationobserver/mutationobserver/index.md b/files/ja/web/api/mutationobserver/mutationobserver/index.md index 1d433100094e7d..8b00dbaaec054a 100644 --- a/files/ja/web/api/mutationobserver/mutationobserver/index.md +++ b/files/ja/web/api/mutationobserver/mutationobserver/index.md @@ -1,81 +1,143 @@ --- -title: MutationObserver.MutationObserver() +title: "MutationObserver: MutationObserver() コンストラクター" +short-title: MutationObserver() slug: Web/API/MutationObserver/MutationObserver +l10n: + sourceCommit: ca0ef1bb638a3fa4c2436796e8d85f5959996209 --- {{APIRef("DOM WHATWG")}} -**MutationObserver()** コンストラクタ ({{domxref("MutationObserver")}} インターフェースの一部) は、指定されたコールバックを DOM イベントが発生したときに実行するオブザーバを作成して返します。DOM の監視はすぐに開始されるわけではありません。最初に {{domxref("MutationObserver.observe", "observe()")}} メソッドを呼び出し、DOM のどの部分を監視し、どのような変更を監視するかを決めなければなりません。 +DOM の **`MutationObserver()`** コンストラクターは、{{domxref("MutationObserver")}} インターフェイスの一部で、指定されたコールバックを DOM イベントが発生したときに実行するオブザーバーを作成して返します。 + +DOM の監視はすぐに開始されるわけではありません。最初に {{domxref("MutationObserver.observe", "observe()")}} メソッドを呼び出し、DOM のどの部分を監視し、どのような変更を監視するかを決めなければなりません。 ## 構文 -``` -var observer = new MutationObserver(callback); +```js-nolint +new MutationObserver(callback) ``` ### 引数 - `callback` - - : 対象となるノードやサブツリー、および指定されたオプションの条件を満たす DOM の変更が起きるたびに呼び出される関数。このコールバック関数は、２つの引数を受け取ります。発生したそれぞれの変更を記述した {{domxref("MutationRecord")}} オブジェクトの配列、そしてコールバックを実行した {{domxref("MutationObserver")}} です。詳細については、以下の[例](#例)を参照してください。 -### 戻り値 + - : 対象となるノードやサブツリー、および指定されたオプションの条件を満たす DOM の変更が起きるたびに呼び出される関数です。 + + この `callback` 関数は、2 つの引数を受け取ります。 + + 1. 発生したそれぞれの変更を記述した {{domxref("MutationRecord")}} オブジェクトの配列。 + 2. `callback` を呼び出した {{domxref("MutationObserver")}} です。これは {{domxref("MutationObserver.disconnect()")}} を使用してオブザーバーを切断するときによく使われます。 + + 詳細については、以下の[例](#例)を参照してください。 + +### 返値 指定されたコールバックを DOM の変更が発生したときに呼び出すように設定された {{domxref("MutationObserver")}} オブジェクト。 ## 例 -この例では、ノードとそのすべての子において、ツリーへの要素の追加と削除、およびツリー内の要素の属性の変更を監視するように設定された MutationObserver を作成します。 - ### コールバック関数 -```js -function callback(mutationList, observer) { - mutationList.forEach((mutation) => { - switch (mutation.type) { - case "childList": - /* ツリーに１つ以上の子が追加されたか、ツリーから削除された。 - mutation.addedNodes と mutation.removedNodes を参照。 */ - break; - case "attributes": - /* Mutation.target の要素の属性値が変更された。 - 属性名は mutation.attributeName にあり、 - 以前の値は mutation.oldValue にある。 */ - break; - } - }); -} +この例には、リストに {{htmlelement("li")}} 要素を追加するボタンと、リストから最初の `
  • ` を除去するボタンがあります。 + +リストの変更を通知してもらうために、`MutationObserver` を使用します。コールバック内で、追加と除去をログ出力し、リストが空になったらすぐにオブザーバーを切断します。 + +「例をリセット」ボタンは、この例を元の状態にリセットします。 + +#### HTML + +```html + + + + +
      + +
      
 ```
 
-callback() 関数は、{{domxref("MutationObserver.observe", "observe()")}} を呼び出して DOM の監視を開始するときに指定された監視リクエストの設定と一致する変更をオブザーバが確認したときに実行されます。
+#### CSS
 
-発生した変更の種類 (子のリストの変更または属性の変更のいずれか) は、{{domxref("MutationRecord.type", "mutation.type")}} プロパティを調べることによって判明します。
+```css
+#container,
+#log {
+  height: 150px;
+  overflow: scroll;
+}
 
-### オブザーバの作成と開始
+#container li {
+  background-color: paleturquoise;
+  margin: 0.5rem;
+}
+```
 
-このコードでは、実際に監視プロセスを設定します。
+#### JavaScript
 
 ```js
-var targetNode = document.querySelector("#someElement");
-var observerOptions = {
+const add = document.querySelector("#add");
+const remove = document.querySelector("#remove");
+const reset = document.querySelector("#reset");
+const container = document.querySelector("#container");
+const log = document.querySelector("#log");
+
+let namePrefix = 0;
+
+add.addEventListener("click", () => {
+  const newItem = document.createElement("li");
+  newItem.textContent = `item ${namePrefix}`;
+  container.appendChild(newItem);
+  namePrefix++;
+});
+
+remove.addEventListener("click", () => {
+  const itemToRemove = document.querySelector("li");
+  if (itemToRemove) {
+    itemToRemove.parentNode.removeChild(itemToRemove);
+  }
+});
+
+reset.addEventListener("click", () => {
+  document.location.reload();
+});
+
+function logChanges(records, observer) {
+  for (const record of records) {
+    for (const addedNode of record.addedNodes) {
+      log.textContent = `追加: ${addedNode.textContent}\n${log.textContent}`;
+    }
+    for (const removedNode of record.removedNodes) {
+      log.textContent = `除去: ${removedNode.textContent}\n${log.textContent}`;
+    }
+    if (record.target.childNodes.length === 0) {
+      log.textContent = `切断しました\n${log.textContent}`;
+      observer.disconnect();
+    }
+    console.log(record.target.childNodes.length);
+  }
+}
+
+const observerOptions = {
   childList: true,
-  attributes: true,
-  subtree: true, // 省略するか、false に設定すると、親ノードへの変更のみを監視する。
+  subtree: true,
 };
 
-var observer = new MutationObserver(callback);
-observer.observe(targetNode, observerOptions);
+const observer = new MutationObserver(logChanges);
+observer.observe(container, observerOptions);
 ```
 
-目的のサブツリーは、ID が "someElement" の要素を検索することで見つかります。オブザーバのオプションのセットは、observerOptions のレコードで設定します。この中で、childList と attributes の両方に true の値を指定することで、目的の情報を得ることができます。
+#### 結果
+
+「子を追加」をクリックするとリストアイテムが追加され、「子を除去」をクリックするとリストアイテムが除去されます。 オブザーバーのコールバックは追加と除去をログ出力します。 リストが空になるとすぐに、オブザーバーは「切断」メッセージをログ出力し、オブザーバーを切断します。
 
-そして、callback() 関数を指定して observer をインスタンス化し、対象のノードとオプションのレコードを指定して observe() を呼び出すことで、対象の DOM ノードの監視を開始します。
+「例をリセット」ボタンを押すと、この例が再読み込みされるので、もう一度試すことができます。
 
-この時点から {{domxref("MutationObserver.disconnect", "disconnect()")}} が呼び出されるまで、targetNode をルートとする DOM ツリーに要素が追加されたり削除されたり、あるいは要素の属性が変更されるたびに `callback()` が呼び出されます。
+{{EmbedLiveSample("Observing child elements", 0, 400)}}
 
 ## 仕様書
 
 {{Specifications}}
 
-## 各ブラウザの対応状況
+## ブラウザーの互換性
 
 {{Compat}}

From 9299db9de0d9791be09307cbd45b6e3e2abc906f Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 19 Aug 2024 22:29:08 +0900
Subject: [PATCH 09/41] =?UTF-8?q?2024/08/12=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/api/mutationobserver/observe/index.md | 229 +++++++++++++++---
 1 file changed, 192 insertions(+), 37 deletions(-)

diff --git a/files/ja/web/api/mutationobserver/observe/index.md b/files/ja/web/api/mutationobserver/observe/index.md
index a3090345eb7fb8..a02ea8836a7cfb 100644
--- a/files/ja/web/api/mutationobserver/observe/index.md
+++ b/files/ja/web/api/mutationobserver/observe/index.md
@@ -1,82 +1,237 @@
 ---
-title: MutationObserver.observe()
+title: "MutationObserver: observe() メソッド"
+short-title: observe()
 slug: Web/API/MutationObserver/observe
+l10n:
+  sourceCommit: 3fe05682ce997e441f705bd8b74a498e0485db11
 ---
 
 {{APIRef("DOM WHATWG")}}
 
-{{domxref("MutationObserver")}} の **`observe()`** メソッドは、`MutationObserver` コールバックを設定し、与えられたオプションに適合する DOM への変更の通知の受信を開始します。設定によっては、オブザーバーは DOM ツリー内の単一の {{domxref("Node", "ノード")}} を監視したり、そのノードとその子孫ノードの一部またはすべてを監視したりします。
+{{domxref("MutationObserver")}} の **`observe()`** メソッドは、`MutationObserver` コールバックを設定し、与えられたオプションに適合する DOM への変更の通知の受信を開始します。
 
-`MutationObserver` を停止するには、{{domxref("MutationObserver.disconnect()")}} を呼び出してください。(これにより、そのコールバックはそれ以降発生しなくなります。)
+設定によっては、オブザーバーは DOM ツリー内の単一のノード ({{domxref("Node")}}) を監視したり、そのノードとその子孫ノードの一部またはすべてを監視したりします。
+同じノードは複数のオブザーバーによって監視することができ、同じ `MutationObserver` を複数回 `observe()` を呼び出すことで、DOMツリーのさまざまな部分の変更や、さまざまな型の変更を監視することができます。
+
+`MutationObserver` を停止するには、{{domxref("MutationObserver.disconnect()")}} を呼び出してください。（これにより、そのコールバックはそれ以降発生しなくなります。）
 
 ## 構文
 
-```
-mutationObserver.observe(target, options)
+```js-nolint
+observe(target, options)
 ```
 
 ### 引数
 
 - `target`
-  - : DOM ツリー内で変更を監視したり、監視するノードのサブツリーのルートになったりする DOM{{domxref("Node", "ノード")}} (あるいは、{{domxref("Element", "要素")}}である可能性もあります。)
+  - : DOM ツリー内で変更を監視したり、監視するノードのサブツリーのルートになったりする DOM ノード ({{domxref("Node")}})（あるいは要素 ({{domxref("Element")}}) である可能性もあります）。
 - `options`
-  - : どの DOM の変更を`mutationObserver`の`callback`に報告するかを記述するオプションを提供する、{{domxref("MutationObserverInit")}}オブジェクト。
-
-### 戻り値
 
-`undefined`
+  - : どの DOM の変更を `mutationObserver` の `callback` に報告するかを記述するオプションを提供するオブジェクト。
+    `observe()` を呼ぶ際には、`childList`、`attribute`、`characterData` のうちの少なくとも 1 つは `true` でなければなりません。
+    そうでない場合は、`TypeError` 例外が発生します。
+
+    オプションは次の通りです。
+
+    - `subtree` {{optional_inline}}
+      - : `true` に設定すると、`target` を基点とするノードのサブツリー全体に監視が拡張されます。
+        他のプロパティはすべて、`target` ノードだけに適用されるのではなく、サブツリーのすべてのノードに拡張されます。既定値は `false` です。 `target` の子孫が除去された場合、その子孫のサブツリーに対する変更は、その除去に関する通知が配信されるまで、引き続き監視されます。
+    - `childList` {{optional_inline}}
+      - : `true` に設定すると、対象とするノード（および `subtree` が `true` の場合はその子孫）に新しい子ノードが追加されたり、既存の子ノードが除去されたりしたかどうかを監視します。
+        既定値は `false` です。
+    - `attributes` {{optional_inline}}
+      - : `true` に設定すると、監視対象のノードまたはノードの属性値の変更を監視します。 `attributeFilter` または `attributeOldValue` のいずれかを指定した場合は、既定値は `true` です。それ以外の場合、既定値は `false` です。
+    - `attributeFilter` {{optional_inline}}
+      - : 監視対象とする具体的な属性名の配列です。
+        このプロパティが含まれていない場合、すべての属性に対する変更が変更通知を発生させます。
+    - `attributeOldValue` {{optional_inline}}
+      - : `true` に設定すると、ノードまたはノードの属性変更を監視している際に変更される属性の値を前回記録した値で置き換えます。
+        属性の変更を監視し、値を記録する例については、[属性値の監視](#属性値の監視)を参照してください。
+        既定値は `false` です。
+    - `characterData` {{optional_inline}}
+      - : `true` に設定すると、指定したターゲットノード（および `subtree` が `true` の場合はその子孫）を監視し、そのノードまたはノード群に格納されている文字データに変更があったかどうかを確認します。
+        既定では、`characterDataOldValue` を指定した場合は `true`、指定しない場合は `false` です。
+    - `characterDataOldValue` {{optional_inline}}
+      - : `true` に設定すると、監視対象のノードのテキストが変更されるたびに、そのノードのテキストの前回値が記録されます。
+        既定値は `false` です。
+
+### 返値
+
+なし ({{jsxref("undefined")}})。
 
 ### 例外
 
 - {{jsxref('TypeError')}}
 
-  - : 以下のいずれかの状況でスローされます。
+  - : 以下のいずれかの状況で発生します。
 
-    - 実際には何も監視されないように`options`が設定されている場合。
-      (例えば、 {{domxref("MutationObserverInit.childList")}}、 {{domxref("MutationObserverInit.attributes")}}、{{domxref("MutationObserverInit.characterData")}} が全て`false`の場合)
-    - `options.attributes` の値が `false` (これは属性の変更を監視しないことを示す)であるにも関わらず、`attributeOldValue` は `true` であるか、または、`attributeFilter` が存在する場合。
-    - {{domxref("MutaitonObserverInit.characterDataOldValue", "characterDataOldValue")}} は `true` であるにも関わらず、 {{domxref("MutationObserverInit.characterData")}} が `false` (これは、文字の変更を監視しないことを示す)である場合。
+    - `options` が、実際には何も監視しないように設定されている場合。
+      （例えば、`childList`、`attributes`、`characterData` がすべて `false` の場合。）
+    - `options.attributes` の値が `false` （これは属性の変更を監視しないことを示す）であるにもかかわらず、`attributeOldValue` は `true` であるか、または、`attributeFilter` が存在する場合。
+    - `characterDataOldValue` は `true` であるにもかかわらず、 `characterData` が `false`（これは、文字の変更を監視しないことを示す）である場合。
 
-## 使用における注意点
+## 例
 
-### MutationObserver の再利用
+### 基本的な使い方
 
-同一の `MutationObserver` で、`observe()` を複数回呼び出すことで、DOM ツリーの異なる部分や異なる種類の変更を監視することができます。ただし、注意すべき点がいくつかあります。
+この例では、**`observe()`** を {{domxref("MutationObserver")}} のインスタンスに対して呼び出し、設定した後、ターゲット要素とオプションオブジェクトを渡すとどうなるかを示します。
 
-- 同じ`MutationObserver`で既に監視されているノードで`observe()`を呼び出すと、新しいオブザーバーがアクティブになる前に、監視されているすべてのターゲットから既存のすべてのオブザーバーが自動的に削除されます。
-- 同じ`MutationObserver`がターゲットで使用されていない場合は、既存のオブザーバーを残して新しいオブザーバーを追加します。
+```js
+// `MutationObserver` の新しいインスタンスを `observer` という名前で作成し、
+// コールバック関数を渡す
+const observer = new MutationObserver(() => {
+  console.log("オブザーバーが検出を行ったときに実行されるコールバック");
+});
 
-### ノードの切り離しが行われた際の監視の追従
+// `observe()` を呼び出し、監視する要素とオプションオブジェクトを渡す
+observer.observe(document.querySelector("#element-to-observe"), {
+  subtree: true,
+  childList: true,
+});
+```
 
-MutationObserver は、ノード間の直接接続が切断されても、時間の経過とともに目的のノードセットを監視できるようにすることを目的としています。ノードのサブツリーの監視を開始し、そのサブツリーの一部が切り離されて DOM 内の別の場所に移動した場合、切り離されたノードのセグメントを監視し続け、元のサブツリーからノードが切り離される前と同じコールバックを受け取ります。
+### `subtree` を使用する際に子孫を除去
 
-つまり、監視しているサブツリーからノードが切り離されたことが通知されるまでは、切り離されたサブツリーとそのノードへの変更の通知を受けます。これにより、接続が切断された後、移動したノードやサブツリーの変更を監視し始める前に発生した変更を見逃してしまうことを防ぐことができます。
+`subtree` オプションを使用してノードを監視している場合、そのサブツリーの一部が除去された後でも、そのノードの子孫に対する変更の通知を受け続けることができます。 ただし、除去に関する通知が配信された後は、切り離されたサブツリーに対するそれ以上の変更は、オブザーバーが検出を行わなくなります。
 
-理論的には、発生した変更を記述した {{domxref("MutationRecord")}} オブジェクトを追跡していれば、変更を「元に戻す」ことができ、DOM を初期状態に戻すことができるはずです。
+これにより、接続が切断された後、移されたノードまたはサブツリーの詳細な変更監視を開始する前に発生する変更を見逃すことを防ぎます。理論的には、発生した変更を記述する {{domxref("MutationRecord")}} オブジェクトを追跡していれば、変更を「元に戻す」ことができ、DOM を初期状態に巻き戻すことができるはずです。
 
-## 例
+```html
+
      
+  
      
+
      
+```
+
+```js
+const target = document.getElementById("target");
+const child = document.getElementById("child");
+
+const observer = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
+    console.log(mutation.type, mutation.target.id, mutation.attributeName);
+
+    if (mutation.type === "childList" && mutation.target.id === "target") {
+      // 子要素が除去されたという通知を受け取った後、切り離されたサブツリーに対する
+      // さらなる変更については、オブザーバーが検出を行わなくなる
+      child.setAttribute("data-bar", "");
+    }
+  });
+});
+
+observer.observe(target, {
+  attributes: true,
+  childList: true,
+  subtree: true,
+});
+
+target.removeChild(child);
+// この変更は "childList" を対象とする通知が配信される前に発生するため、
+// これもオブザーバーが検出します。
+child.setAttribute("data-foo", "");
+
+// 出力:
+// childList target null
+// attributes child data-foo
+// "attributes child data-bar" の通知はありません。
+```
 
-この例では、{{domxref("MutationObserver")}} のインスタンス上で **`observe()`** メソッドを呼び出す方法を示します。一度設定したら、ターゲット要素と {{domxref("MutationObserverInit")}} オプションオブジェクトを渡します。
+### `attributeFilter` の使用
+
+この例では、変更オブザーバーを設定し、チャットルームのユーザーの名前を表示するサブツリー内の要素の `status` と `username` 属性の変更を監視します。これにより、例えば、ユーザーのニックネームの変更をコードに反映させたり、ユーザーがキーボードから離れている (AFK) またはオフラインであることをマークしたりすることができます。
 
 ```js
-// identify an element to observe
-const elementToObserve = document.querySelector("#targetElementId");
+function callback(mutationList) {
+  mutationList.forEach((mutation) => {
+    switch (mutation.type) {
+      case "attributes":
+        switch (mutation.attributeName) {
+          case "status":
+            userStatusChanged(mutation.target.username, mutation.target.status);
+            break;
+          case "username":
+            usernameChanged(mutation.oldValue, mutation.target.username);
+            break;
+        }
+        break;
+    }
+  });
+}
+
+const userListElement = document.querySelector("#userlist");
+
+const observer = new MutationObserver(callback);
+observer.observe(userListElement, {
+  attributeFilter: ["status", "username"],
+  attributeOldValue: true,
+  subtree: true,
+});
+```
+
+### 属性値の監視
+
+この例では、属性値の変更を監視する要素を観察し、その要素の [`dir`](/ja/docs/Web/HTML/Global_attributes/dir) 属性を `"ltr"` と `"rtl"` との間で切り替えるボタンを追加します。オブザーバーのコールバックの中で、属性の古い値をログ出力します。
+
+#### HTML
+
+```html
+
      
+
      
+  
+
      
+
      
+```
+
+#### CSS
 
-// create a new instance of `MutationObserver` named `observer`,
-// passing it a callback function
-const observer = new MutationObserver(function () {
-  console.log("callback that runs when observer is triggered");
+```css
+body {
+  background-color: paleturquoise;
+}
+
+button,
+input,
+pre {
+  margin: 0.5rem;
+}
+```
+
+#### JavaScript
+
+```js
+const toggle = document.querySelector("#toggle");
+const rhubarb = document.querySelector("#rhubarb");
+const observerTarget = document.querySelector("#container");
+const output = document.querySelector("#output");
+
+toggle.addEventListener("click", () => {
+  rhubarb.dir = rhubarb.dir === "ltr" ? "rtl" : "ltr";
 });
 
-// call `observe()` on that MutationObserver instance,
-// passing it the element to observe, and the options object
-observer.observe(elementToObserve, { subtree: true, childList: true });
+const config = {
+  subtree: true,
+  attributeOldValue: true,
+};
+
+const callback = (mutationList) => {
+  for (const mutation of mutationList) {
+    if (mutation.type === "attributes") {
+      output.textContent = `${mutation.attributeName} 属性は "${mutation.oldValue}" から変化しました。`;
+    }
+  }
+};
+
+const observer = new MutationObserver(callback);
+observer.observe(observerTarget, config);
 ```
 
-## 仕様
+#### 結果
+
+{{EmbedLiveSample("Monitoring attribute values")}}
+
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザ互換性
+## ブラウザーの互換性
 
 {{Compat}}

From 60c73c98867abf8aa53dc12ae1287e745a475d76 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 19 Aug 2024 21:18:31 +0900
Subject: [PATCH 10/41] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/mutationobserver/disconnect/index.md  | 34 +++++++++++--------
 .../api/mutationobserver/takerecords/index.md | 33 ++++++++++--------
 2 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/files/ja/web/api/mutationobserver/disconnect/index.md b/files/ja/web/api/mutationobserver/disconnect/index.md
index a2fabf57c6e74c..31f12cf39e7f66 100644
--- a/files/ja/web/api/mutationobserver/disconnect/index.md
+++ b/files/ja/web/api/mutationobserver/disconnect/index.md
@@ -1,36 +1,42 @@
 ---
-title: MutationObserver.disconnect()
+title: "MutationObserver: disconnect() メソッド"
+short-title: disconnect()
 slug: Web/API/MutationObserver/disconnect
+l10n:
+  sourceCommit: cfb7587e3e3122630ad6cbd94d834ecadbe0a746
 ---
 
 {{APIRef("DOM WHATWG")}}
 
-{{domxref("MutationObserver")}} の **`disconnect()`** メソッドは、オブザーバーに変更の監視を停止させます。 オブザーバーは、 {{domxref("MutationObserver.observe", "observe()")}} メソッドを再度呼び出すことで再利用できます。
+{{domxref("MutationObserver")}} の **`disconnect()`** メソッドは、オブザーバーに変更の監視を停止させます。
+
+オブザーバーは、{{domxref("MutationObserver.observe", "observe()")}} メソッドを再度呼び出すことで再利用できます。
 
 ## 構文
 
-```
-mutationObserver.disconnect()
+```js-nolint
+disconnect()
 ```
 
 ### 引数
 
-なし
+なし。
 
-### 戻り値
+### 返値
 
-`undefined`
+`undefined`。
 
 > [!NOTE]
-> すでに検知されているものの、まだオブザーバーに報告されていない変更の通知は、すべて破棄されます。
+> すでに検出されているが、まだオブザーバーに報告されていない変化の通知はすべて破棄されます。
+> 検出されているが未報告の変化を保持し、処理するには、{{domxref("MutationObserver.takeRecords()", "takeRecords()")}} メソッドを使用してください。
 
-## 使用における注意点
+## 使用上の注意
 
-監視されている要素が DOM から削除され、その後ブラウザのガベージコレクション機構によって解放された場合、`MutationObserver` も同様に削除されます。
+監視対象の要素が DOM から除去され、その後ブラウザーのガベージコレクション機構によって解放された場合、`MutationObserver` は除去された要素の監視を停止します。しかし、`MutationObserver` 自体は、他にも監視対象の要素が存在する場合には、その監視を続けることができます。
 
 ## 例
 
-この例では、オブザーバを作成してから切断し、再利用できるようにします。
+この例では、オブザーバーを作成してから切断し、再利用できるようにします。
 
 ```js
 const targetNode = document.querySelector("#someElement");
@@ -42,15 +48,15 @@ const observerOptions = {
 const observer = new MutationObserver(callback);
 observer.observe(targetNode, observerOptions);
 
-/* some time later... */
+/* some time later… */
 
 observer.disconnect();
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザ互換性
+## ブラウザーの互換性
 
 {{Compat}}
diff --git a/files/ja/web/api/mutationobserver/takerecords/index.md b/files/ja/web/api/mutationobserver/takerecords/index.md
index fcd5501ca313f1..08b37448706288 100644
--- a/files/ja/web/api/mutationobserver/takerecords/index.md
+++ b/files/ja/web/api/mutationobserver/takerecords/index.md
@@ -1,32 +1,37 @@
 ---
-title: MutationObserver.takeRecords()
+title: "MutationObserver: takeRecords() メソッド"
+short-title: takeRecords()
 slug: Web/API/MutationObserver/takeRecords
+l10n:
+  sourceCommit: cfb7587e3e3122630ad6cbd94d834ecadbe0a746
 ---
 
 {{APIRef("DOM WHATWG")}}
 
-{{domxref("MutationObserver")}} の **`takeRecords()`** メソッドは、検出されたがオブザーバのコールバック関数で処理されていない DOM の変更に一致するすべてのリストを返し、変更キューは空のままにします。 最も一般的な使用例は、オブザーバを切断する直前に保留中の変更記録をすべて取得し、オブザーバを停止する際に保留中の変更を処理できるようにすることです。
+{{domxref("MutationObserver")}} の **`takeRecords()`** メソッドは、検出されたがオブザーバーのコールバック関数で処理されていない DOM の変更に一致するすべてのリストを返し、変更キューは空のままにします。
+
+最も一般的な使用例は、オブザーバーを切断する直前に保留中の変更記録をすべて取得し、オブザーバーを停止する際に保留中の変更を処理できるようにすることです。
 
 ## 構文
 
-```
-const mutationRecords = mutationObserver.takeRecords()
+```js-nolint
+takeRecords()
 ```
 
 ### 引数
 
-なし
+なし。
 
-### 戻り値
+### 返値
 
-{{domxref("MutationRecord")}} オブジェクトの配列で、そのそれぞれがドキュメントの DOM ツリーの監視された部分に適用された変更を記述します。
+{{domxref("MutationRecord")}} オブジェクトの配列で、そのそれぞれが文書の DOM ツリーの監視された部分に適用された変更を記述します。
 
 > [!NOTE]
 > 発生したものの、オブザーバーのコールバックに伝えられなかった変更キューは、 `takeRecords()`をコールした後は空のままになります。
 
 ## 例
 
-この例では、オブザーバを切断する直前に `takeRecords()`を呼び出して、未伝達の{{domxref("MutationRecord")}}を処理する方法を示します。
+この例では、オブザーバーを切断する直前に `takeRecords()`を呼び出して、未伝達の{{domxref("MutationRecord")}}を処理する方法を示します。
 
 ```js
 const targetNode = document.querySelector("#someElement");
@@ -38,25 +43,25 @@ const observerOptions = {
 const observer = new MutationObserver(callback);
 observer.observe(targetNode, observerOptions);
 
-/* ...later, when it's time to stop observing... */
+/* 後で、監視を停止する時点になったら... */
 
-/* handle any still-pending mutations */
+/* 未処理のままのすべての変更を処理する */
 
 let mutations = observer.takeRecords();
 
 observer.disconnect();
 
-if (mutations) {
+if (mutations.length > 0) {
   callback(mutations);
 }
 ```
 
-12-17 行目のコードは、処理されていない変更の記録を取得し、その記録を処理できるようにコールバックを呼び出します。これは、{{domxref("MutationObserver.disconnect", "disconnect()")}} を呼び出して DOM の観測を停止する直前に行われます。
+このコードは、処理されていない変更の記録を取得し、その記録を処理できるようにコールバックを呼び出します。これは、{{domxref("MutationObserver.disconnect", "disconnect()")}} を呼び出して DOM の観測を停止する直前に行われます。
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザ互換性
+## ブラウザーの互換性
 
 {{Compat}}

From 4edf334ab9e841d24e886831d7c819baa31e9d5e Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 19 Aug 2024 22:55:26 +0900
Subject: [PATCH 11/41] =?UTF-8?q?2023/02/24=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?=
 =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index.md                                  | 127 ++++++++++++++++++
 1 file changed, 127 insertions(+)
 create mode 100644 files/ja/web/css/_doublecolon_file-selector-button/index.md

diff --git a/files/ja/web/css/_doublecolon_file-selector-button/index.md b/files/ja/web/css/_doublecolon_file-selector-button/index.md
new file mode 100644
index 00000000000000..366501d657373e
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_file-selector-button/index.md
@@ -0,0 +1,127 @@
+---
+title: "::file-selector-button"
+slug: Web/CSS/::file-selector-button
+l10n:
+  sourceCommit: 62c5c3f5655002f230bf0153fbdf8a883611014a
+---
+
+{{CSSRef}}
+
+**`::file-selector-button`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、{{HTMLElement("input") }} 要素の [`type="file"`](/ja/docs/Web/HTML/Element/input/file) のボタンを表します。
+
+{{EmbedInteractiveExample("pages/tabbed/pseudo-element-file-selector-button.html", "tabbed-shorter")}}
+
+## 構文
+
+```css
+selector::file-selector-button
+```
+
+## 例
+
+### 基本的な例
+
+#### HTML
+
+```html
+
      
+  
+  
+
      
+```
+
+#### CSS
+
+```css hidden
+form {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+}
+```
+
+```css
+input[type="file"]::file-selector-button {
+  border: 2px solid #6c5ce7;
+  padding: 0.2em 0.4em;
+  border-radius: 0.2em;
+  background-color: #a29bfe;
+  transition: 1s;
+}
+
+input[type="file"]::file-selector-button:hover {
+  background-color: #81ecec;
+  border: 2px solid #00cec9;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Basic_example", "100%", 150)}}
+
+`::file-selector-button` は要素全体であり、UA スタイルシートのルールと一致することを覚えておいてください。 特に、フォントや色は必ずしも `input` 要素から継承されるとは限りません。
+
+### 代替の例
+
+#### HTML
+
+```html
+
      
+  
+  
+
      
+```
+
+#### CSS
+
+```css hidden
+form {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+}
+```
+
+```css
+input[type="file"]::file-selector-button {
+  border: 2px solid #6c5ce7;
+  padding: 0.2em 0.4em;
+  border-radius: 0.2em;
+  background-color: #a29bfe;
+  transition: 1s;
+}
+
+input[type="file"]::-ms-browse:hover {
+  background-color: #81ecec;
+  border: 2px solid #00cec9;
+}
+
+input[type="file"]::-webkit-file-upload-button:hover {
+  background-color: #81ecec;
+  border: 2px solid #00cec9;
+}
+
+input[type="file"]::file-selector-button:hover {
+  background-color: #81ecec;
+  border: 2px solid #00cec9;
+}
+```
+
+#### 例
+
+{{EmbedLiveSample("Fallback_example", "100%", 150)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [WebKit の CSS 拡張](/ja/docs/Web/CSS/WebKit_Extensions)
+- [ファイルとディレクトリー項目 API](/ja/docs/Web/API/File_and_Directory_Entries_API)
+- [ファイルとディレクトリー項目 API の Firefox における対応](/ja/docs/Web/API/File_and_Directory_Entries_API/Firefox_support)
+- [``](/ja/docs/Web/HTML/Element/input/file)

From fb07789af04265bc6d3c0c8091d98aae5b7a7221 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 19 Aug 2024 23:31:14 +0900
Subject: [PATCH 12/41] =?UTF-8?q?2024/07/15=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../asynciterator/symbol.asynciterator/index.md          | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/asynciterator/symbol.asynciterator/index.md b/files/ja/web/javascript/reference/global_objects/asynciterator/symbol.asynciterator/index.md
index b37b95c98c5ec3..b08f2f2d07340b 100644
--- a/files/ja/web/javascript/reference/global_objects/asynciterator/symbol.asynciterator/index.md
+++ b/files/ja/web/javascript/reference/global_objects/asynciterator/symbol.asynciterator/index.md
@@ -1,14 +1,13 @@
 ---
-title: AsyncIterator.prototype[@@asyncIterator]()
+title: AsyncIterator.prototype[Symbol.asyncIterator]()
 slug: Web/JavaScript/Reference/Global_Objects/AsyncIterator/Symbol.asyncIterator
-original_slug: Web/JavaScript/Reference/Global_Objects/AsyncIterator/@@asyncIterator
 l10n:
-  sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
+  sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
 ---
 
 {{JSRef}}
 
-**`[@@asyncIterator]()`** は {{jsxref("AsyncIterator")}} インスタンスのメソッドで、[非同期反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#非同期イテレーターと非同期反復可能プロトコル)を実装し、組み込みの非同期イテレーターを、 [`for await...of`](/ja/docs/Web/JavaScript/Reference/Statements/for-await...of) ループのような非同期反復可能オブジェクトを期待するほとんどの構文で利用できるようにします。これは [`this`](/ja/docs/Web/JavaScript/Reference/Operators/this) の値を返しますが、これは非同期イテレーターオブジェクトそのものです。
+**`[Symbol.asyncIterator]()`** は {{jsxref("AsyncIterator")}} インスタンスのメソッドで、[非同期反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#非同期イテレーターと非同期反復可能プロトコル)を実装し、組み込みの非同期イテレーターを、 [`for await...of`](/ja/docs/Web/JavaScript/Reference/Statements/for-await...of) ループのような非同期反復可能オブジェクトを期待するほとんどの構文で利用できるようにします。これは [`this`](/ja/docs/Web/JavaScript/Reference/Operators/this) の値を返しますが、これは非同期イテレーターオブジェクトそのものです。
 
 {{EmbedInteractiveExample("pages/js/map-prototype-@@iterator.html")}}
 
@@ -30,7 +29,7 @@ asyncIterator[Symbol.asyncIterator]()
 
 ### for await...of ループを使用した反復処理
 
-このメソッドを直接呼び出す必要はほとんどないことに注意してください。 `@@asyncIterator` メソッドが存在することで、すべての組み込み非同期イテレーターを[非同期反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#非同期反復処理可能プロトコル)にすることができます、また、 `for await. ..of` ループなどの反復処理構文は、自動的にこのメソッドを呼び出し、ループ処理する非同期イテレーターを取得します。
+このメソッドを直接呼び出す必要はほとんどないことに注意してください。`[Symbol.asyncIterator]()` メソッドが存在することで、すべての組み込み非同期イテレーターを[非同期反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#非同期反復処理可能プロトコル)にすることができます、また、 `for await...of` ループなどの反復処理構文は、自動的にこのメソッドを呼び出し、ループ処理する非同期イテレーターを取得します。
 
 ```js
 const asyncIterator = (async function* () {

From cd596e98b060e0807d3010ebdd4899ca94f444d9 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 19 Aug 2024 23:24:59 +0900
Subject: [PATCH 13/41] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../arraybuffer/symbol.species/index.md       | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/arraybuffer/symbol.species/index.md b/files/ja/web/javascript/reference/global_objects/arraybuffer/symbol.species/index.md
index 767e48d8856797..72324ebb869410 100644
--- a/files/ja/web/javascript/reference/global_objects/arraybuffer/symbol.species/index.md
+++ b/files/ja/web/javascript/reference/global_objects/arraybuffer/symbol.species/index.md
@@ -1,30 +1,29 @@
 ---
-title: get ArrayBuffer[@@species]
+title: ArrayBuffer[Symbol.species]
 slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/Symbol.species
-original_slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species
 l10n:
-  sourceCommit: 194d3e00cb93a6e5ea44812548f4131cb17f0381
+  sourceCommit: 8421c0cd94fa5aa237c833ac6d24885edbc7d721
 ---
 
 {{JSRef}}
 
-**`ArrayBuffer[@@species]`** は静的アクセサープロパティで、配列バッファーメソッドから返値を作成するために使用されるコンストラクタを返します。
+**`ArrayBuffer[Symbol.species]`** は静的アクセサープロパティで、配列バッファーメソッドから返値を作成するために使用されるコンストラクターを返します。
 
-> **警告:** `@@species` が存在することで、任意のコードを実行することができ、セキュリティ上の脆弱性を⽣じる可能性があります。また、ある種の最適化もとても難しくなります。エンジンの実装者は[この機能を削除するかどうかを調査しています](https://github.com/tc39/proposal-rm-builtin-subclassing)。可能であれば、この機能に頼らないでください。
+> **警告:** `[Symbol.species]` が存在することで、任意のコードを実行することができ、セキュリティ上の脆弱性を⽣じる可能性があります。また、ある種の最適化もとても難しくなります。エンジンの実装者は[この機能を削除するかどうかを調査しています](https://github.com/tc39/proposal-rm-builtin-subclassing)。可能であれば、この機能に頼らないでください。
 
 ## 構文
 
-```js
-ArrayBuffer[Symbol.species];
+```js-nolint
+ArrayBuffer[Symbol.species]
 ```
 
 ### 返値
 
-`get @@species` が呼び出されたコンストラクター (`this`) の値です。この返値は、新しい配列バッファーを作成する配列バッファーのメソッドから返値を作成するために使用されます。
+`get [Symbol.species]` が呼び出されたコンストラクター (`this`) の値です。この返値は、新しい配列バッファーを作成する配列バッファーのメソッドから返値を作成するために使用されます。
 
 ## 解説
 
-`@@species` アクセサープロパティは、既定のコンストラクターである `ArrayBuffer` オブジェクトを返します。サブクラスのコンストラクターはコンストラクターに代入することで、これをオーバーライドできます。
+`[Symbol.species]` アクセサープロパティは、既定のコンストラクターである `ArrayBuffer` オブジェクトを返します。サブクラスのコンストラクターはコンストラクターに代入することで、これをオーバーライドできます。
 
 ```js
 // 説明のための仮想の基盤実装
@@ -35,14 +34,14 @@ class ArrayBuffer {
 }
 ```
 
-この 多態的な実装のために、派生したサブクラスの `@@species` も既定値ではコンストラクター自身を返すことになります。
+この 多態的な実装のために、派生したサブクラスの `[Symbol.species]` も既定値ではコンストラクター自身を返すことになります。
 
 ```js
 class SubArrayBuffer extends ArrayBuffer {}
 SubArrayBuffer[Symbol.species] === SubArrayBuffer; // true
 ```
 
-既存のオブジェクトを変異させず、新しい配列バッファーのインスタンスを返す配列バッファーのメソッド（例: [`slice()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice)) を呼び出す場合、オブジェクトの `constructor[@species]` にアクセスすることになります。返されたコンストラクターは、配列バッファーメソッドの返値を構成するために使用されます。
+既存のオブジェクトを変異させず、新しい配列バッファーのインスタンスを返す配列バッファーのメソッド（例: [`slice()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice)）を呼び出す場合、オブジェクトの `constructor[Symbol.species]` にアクセスすることになります。返されたコンストラクターは、配列バッファーメソッドの返値を構成するために使用されます。
 
 ## 例
 
@@ -60,7 +59,7 @@ ArrayBuffer[Symbol.species]; // ArrayBuffer() 関数
 
 ```js
 class MyArrayBuffer extends ArrayBuffer {
-  // MyArrayBuffer species を親である ArrayBuffer コンストラクタにオーバーライド。
+  // MyArrayBuffer species を親である ArrayBuffer コンストラクターにオーバーライド。
   static get [Symbol.species]() {
     return ArrayBuffer;
   }

From 56138475a9ef1db87a4ee2d737251f136d6794a8 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 19 Aug 2024 23:38:25 +0900
Subject: [PATCH 14/41] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../array/symbol.species/index.md             | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/array/symbol.species/index.md b/files/ja/web/javascript/reference/global_objects/array/symbol.species/index.md
index afc19416824bef..eb3faf1336c565 100644
--- a/files/ja/web/javascript/reference/global_objects/array/symbol.species/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/symbol.species/index.md
@@ -1,16 +1,15 @@
 ---
-title: Array[@@species]
+title: Array[Symbol.species]
 slug: Web/JavaScript/Reference/Global_Objects/Array/Symbol.species
-original_slug: Web/JavaScript/Reference/Global_Objects/Array/@@species
 l10n:
-  sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
+  sourceCommit: 8421c0cd94fa5aa237c833ac6d24885edbc7d721
 ---
 
 {{JSRef}}
 
-**`Array[@@species]`** 静的アクセサープロパティは、配列のメソッドからの返値を構築するのに使われたコンストラクターを返します。
+**`Array[Symbol.species]`** 静的アクセサープロパティは、配列のメソッドからの返値を構築するのに使われたコンストラクターを返します。
 
-> **警告:** `@@species` が存在することで、任意のコードを実行でき、セキュリティの脆弱性を生み出す可能性があります。また、ある種の最適化が非常に難しくなります。エンジンの実装者は[この機能を除去するかどうかを調査しています](https://github.com/tc39/proposal-rm-builtin-subclassing)。使用可能であれば、この機能に頼ることは避けてください。 {{jsxref("Array/toReversed", "toReversed()")}} のような現代の配列メソッドは `@@species` を使用せず、常に新しい `Array` 基本クラスのインスタンスを返します。
+> **警告:** `[Symbol.species]` が存在することで、任意のコードを実行でき、セキュリティの脆弱性を生み出す可能性があります。また、ある種の最適化が非常に難しくなります。エンジンの実装者は[この機能を除去するかどうかを調査しています](https://github.com/tc39/proposal-rm-builtin-subclassing)。使用可能であれば、この機能に頼ることは避けてください。 {{jsxref("Array/toReversed", "toReversed()")}} のような現代の配列メソッドは `[Symbol.species]` を使用せず、常に新しい `Array` 基本クラスのインスタンスを返します。
 
 ## 構文
 
@@ -20,11 +19,11 @@ Array[Symbol.species]
 
 ### 返値
 
-`get @@species` が呼び出されたコンストラクター (`this`) の値です。この返値は、新しい配列を作成する配列メソッドの返値を作成するために使用されます。
+`get Symbol.species` が呼び出されたコンストラクター (`this`) の値です。この返値は、新しい配列を作成する配列メソッドの返値を作成するために使用されます。
 
 ## 解説
 
-`@@species` アクセサープロパティは、 `Array` オブジェクトの既定のコンストラクターを返します。サブクラスのコンストラクターはコンストラクターに代入することで、これをオーバーライドすることができます。既定の実装は基本的に次の通りです。
+`[Symbol.species]` アクセサープロパティは、 `Array` オブジェクトの既定のコンストラクターを返します。サブクラスのコンストラクターはコンストラクターに代入することで、これをオーバーライドすることができます。既定の実装は基本的に次の通りです。
 
 ```js
 // 説明のための仮説的な実装
@@ -35,14 +34,14 @@ class Array {
 }
 ```
 
-この多相的な実装のために、派生したサブクラスの `@@species` も既定値でコンストラクター自身を返すことになります。
+この多相的な実装のために、派生したサブクラスの `[Symbol.species]` も既定値でコンストラクター自身を返すことになります。
 
 ```js
 class SubArray extends Array {}
 SubArray[Symbol.species] === SubArray; // true
 ```
 
-既存の配列を変更せずに新しい配列インスタンスを返す配列メソッド（例えば `filter` や `map` ）を呼び出す場合、配列の `constructor[@@species]` にアクセスすることになります。返されたコンストラクターは、配列メソッドの返値を作成するために使用されます。これにより、配列メソッドが配列とは無関係のオブジェクトを返すようにすることが技術的に可能になります。
+既存の配列を変更せずに新しい配列インスタンスを返す配列メソッド（例えば[`filter()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) や [`map()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)）を呼び出す場合、配列の `constructor[Symbol.species]` にアクセスすることになります。返されたコンストラクターは、配列メソッドの返値を作成するために使用されます。これにより、配列メソッドが配列とは無関係のオブジェクトを返すようにすることが技術的に可能になります。
 
 ```js
 class NotAnArray {
@@ -62,7 +61,7 @@ arr.concat([1, 2]); // NotAnArray { '0': 0, '1': 1, '2': 2, '3': 1, '4': 2, leng
 
 ### 通常のオブジェクトの species
 
-`@@species` プロパティは、`Array` オブジェクトの既定のコンストラクター関数である `Array` コンストラクターを返します。
+`[Symbol.species]` プロパティは、`Array` オブジェクトの既定のコンストラクター関数である `Array` コンストラクターを返します。
 
 ```js
 Array[Symbol.species]; // [Function: Array]
@@ -74,7 +73,7 @@ Array[Symbol.species]; // [Function: Array]
 
 ```js
 class MyArray extends Array {
-  // MyArray species を親である ArrayBuffer コンストラクタにオーバーライド。
+  // MyArray species を親である Array コンストラクターにオーバーライド。
   static get [Symbol.species]() {
     return Array;
   }
@@ -91,7 +90,7 @@ class MyArray extends Array {
 
 ## 関連情報
 
-- [`Array[@@species]` のポリフィルと、影響を受けるすべての `Array` メソッドでの `@@species` の対応 (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array)
+- [`Array[Symbol.species]` のポリフィルと、影響を受けるすべての `Array` メソッドでの `[Symbol.species]` の対応 (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array)
 - [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)ガイド
 - {{jsxref("Array")}}
 - {{jsxref("Symbol.species")}}

From a02d1cae8455a49537c9462d0d490a97554617c0 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 19 Aug 2024 23:40:23 +0900
Subject: [PATCH 15/41] =?UTF-8?q?2024/07/15=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../array/symbol.iterator/index.md              | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/array/symbol.iterator/index.md b/files/ja/web/javascript/reference/global_objects/array/symbol.iterator/index.md
index d5afb1f859e60c..b19ab0c8b3d1ad 100644
--- a/files/ja/web/javascript/reference/global_objects/array/symbol.iterator/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/symbol.iterator/index.md
@@ -1,14 +1,13 @@
 ---
-title: Array.prototype[@@iterator]()
+title: Array.prototype[Symbol.iterator]()
 slug: Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator
-original_slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
 l10n:
-  sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a
+  sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
 ---
 
 {{JSRef}}
 
-**`[@@iterator]()`** は {{jsxref("Array")}} インスタンスのメソッドで、[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) を実装しており、[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax) や {{jsxref("Statements/for...of", "for...of")}} ループのような反復可能オブジェクトを期待するほとんどの構文で配列を利用することができます。配列の各インデックスの値を返す[配列イテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)を返します。
+**`[Symbol.iterator]()`** は {{jsxref("Array")}} インスタンスのメソッドで、[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)を実装しており、[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)や {{jsxref("Statements/for...of", "for...of")}} ループのような反復可能オブジェクトを期待するほとんどの構文で配列を利用することができます。配列の各インデックスの値を返す[配列イテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)を返します。
 
 このプロパティの初期値は {{jsxref("Array.prototype.values")}} プロパティの初期値と同じ関数オブジェクトです。
 
@@ -32,7 +31,7 @@ array[Symbol.iterator]()
 
 ### for...of ループを用いた反復処理
 
-このメソッドを直接呼び出す必要はほとんどないことに注意してください。 `@@iterator` メソッドが存在することで、配列を[反復処理可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)にすることができ、 `for...of` ループのような反復処理構文では、自動的にこのメソッドを呼び出して、ループするイテレーターを取得します。
+このメソッドを直接呼び出す必要はほとんどないことに注意してください。 `[Symbol.iterator]() メソッドが存在することで、配列を[反復処理可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)にすることができ、 `for...of` ループのような反復処理構文では、自動的にこのメソッドを呼び出して、ループするイテレーターを取得します。
 
 #### HTML
 
@@ -72,7 +71,7 @@ console.log(arrIter.next().value); // e
 
 ### 文字列と文字列配列を同じ関数で処理
 
-[文字列](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator)と配列はどちらもイテレータープロトコルを実装しているので、汎用関数は両方の入力を同じ方法で処理するように設計することができます。これは、 {{jsxref("Array.prototype.values()")}} を直接呼び出すよりも優れており、入力が配列であるか、少なくともそのようなメソッドを持つオブジェクトであることを要求されます。
+[文字列](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/Symbol.iterator)と配列はどちらもイテレータープロトコルを実装しているので、汎用関数は両方の入力を同じ方法で処理するように設計することができます。これは、 {{jsxref("Array.prototype.values()")}} を直接呼び出すよりも優れており、入力が配列であるか、少なくともそのようなメソッドを持つオブジェクトであることを要求されます。
 
 ```js
 function logIterable(it) {
@@ -112,13 +111,13 @@ logIterable(123);
 
 ## 関連情報
 
-- [`Array.prototype[@@iterator]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array)
+- [`Array.prototype[Symbol.iterator]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array)
 - [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)ガイド
 - {{jsxref("Array")}}
 - {{jsxref("Array.prototype.keys()")}}
 - {{jsxref("Array.prototype.entries()")}}
 - {{jsxref("Array.prototype.values()")}}
-- [`TypedArray.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator)
-- [`String.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator)
+- [`TypedArray.prototype[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/Symbol.iterator)
+- [`String.prototype[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/Symbol.iterator)
 - {{jsxref("Symbol.iterator")}}
 - [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)

From d96f818a037d086d82f474f067b4d55f9f578f45 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 19 Aug 2024 23:47:45 +0900
Subject: [PATCH 16/41] =?UTF-8?q?2024/07/15=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../array/symbol.unscopables/index.md         | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/files/ja/web/javascript/reference/global_objects/array/symbol.unscopables/index.md b/files/ja/web/javascript/reference/global_objects/array/symbol.unscopables/index.md
index de93e8a6945c9e..6c25f6f612384b 100644
--- a/files/ja/web/javascript/reference/global_objects/array/symbol.unscopables/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/symbol.unscopables/index.md
@@ -1,14 +1,13 @@
 ---
-title: Array.prototype[@@unscopables]
+title: Array.prototype[Symbol.unscopables]
 slug: Web/JavaScript/Reference/Global_Objects/Array/Symbol.unscopables
-original_slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
 l10n:
-  sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
+  sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
 ---
 
 {{JSRef}}
 
-**`@@unscopables`** は `Array.prototype` のデータプロパティで、すべての {{jsxref("Array")}} インスタンスで共有されます。 ES2015 以前の ECMAScript 標準には含まれておらず、 [`with`](/ja/docs/Web/JavaScript/Reference/Statements/with) 文のバインディングの目的では無視されるプロパティ名を含んでいます。
+**`[Symbol.unscopables]`** は `Array.prototype` のデータプロパティで、すべての {{jsxref("Array")}} インスタンスで共有されます。 ES2015 以前の ECMAScript 標準には含まれておらず、 [`with`](/ja/docs/Web/JavaScript/Reference/Statements/with) 文のバインドの目的では無視されるプロパティ名を含んでいます。
 
 ## 値
 
@@ -37,25 +36,25 @@ l10n:
 - [`toSpliced()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced)
 - [`values()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/values)
 
-`Array.prototype[@@unscopables]` は、上記のプロパティ名をすべて `true` の値で持つ、空のオブジェクトです。この[プロトタイプは `null`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects) なので、 `Object.prototype` のプロパティ、例えば [`toString`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) は偶然にスコープ付けできなくなることはなく、 `with` 文の中の `toString()` は引き続き配列の中で呼び出すことができます。
+`Array.prototype[Symbol.unscopables]` は、上記のプロパティ名をすべて `true` の値で持つ、空のオブジェクトです。この[プロトタイプは `null`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects) なので、 `Object.prototype` のプロパティ、例えば [`toString`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) は偶然にスコープ付けできなくなることはなく、 `with` 文の中の `toString()` は引き続き配列の中で呼び出すことができます。
 
 自作オブジェクトに `unscopables` を設定する方法については、 {{jsxref("Symbol.unscopables")}} を見てください。
 
 ## 例
 
-ECMAScript 2015 以前に書かれた以下のコードで `keys.push('something')` を呼び出すことを考えてみてください。
+ECMAScript 2015 以前に書かれた以下のコードで `values.push('something')` を呼び出すことを考えてみてください。
 
 ```js
-var keys = [];
+var values = [];
 
-with (Array.prototype) {
-  keys.push("something");
+with (values) {
+  values.push("something");
 }
 ```
 
-ECMAScript 2015 で {{jsxref("Array.prototype.keys()")}} メソッドが導入されたとき、もし `@unscopables` データプロパティも導入されていなければ、 `keys.push('something')` の呼び出しは壊れていました。 JavaScript ランタイムが `keys` を {{jsxref("Array.prototype.keys()")}} メソッドであると解釈し、この例のコードで定義された配列 `keys` とは解釈しませんでした。
+ECMAScript 2015 が {{jsxref("Array.prototype.values()")}} メソッドを導入したとき、上記のコードの `with` 文は、外部の変数 `values` ではなく、配列メソッドの `values.values` として値を解釈し始めました。`values.push('something')` が呼び出されると、これで `values.values` メソッドの `push` にアクセスすることになるため、エラーが発生します。これにより、Firefox にバグが報告されました（[Firefox バグ 883914](https://bugzil.la/883914)）。
 
-すなわち、 `@unscopables` データプロパティが `Array.prototype` にあるのは、 ECMAScript 2015 で導入された `Array` プロパティを `with` 文のバインドの目的では無視するようにし、 ECMAScript 2015 以前に書かれたコードを壊さず、期待どおりに動作し続けられるようにするものです。
+そのため、`Array.prototype` の `[Symbol.unscopables]` データプロパティは、`with` 文のバインドの目的で ECMAScript 2015 で導入された配列プロパティを無視させることになりました。これにより、ECMAScript 2015 より前に書かれたコードは、動作しなくなるのではなく、期待通りに動作し続けることができます。
 
 ## 仕様書
 
@@ -67,7 +66,7 @@ ECMAScript 2015 で {{jsxref("Array.prototype.keys()")}} メソッドが導入
 
 ## 関連情報
 
-- [`Array.prototype[@@unscopables]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array)
+- [`Array.prototype[Symbol.unscopables]` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#ecmascript-array)
 - [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections)ガイド
 - {{jsxref("Array")}}
 - {{jsxref("Statements/with", "with")}}

From a92466121e7d735379f6a42ac99bee05b8075b9f Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Fri, 23 Aug 2024 23:05:47 +0800
Subject: [PATCH 17/41] fr: update Glossary/Buffer (#22958)

feat: update translation

Co-authored-by: SphinxKnight 
---
 files/fr/glossary/buffer/index.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/files/fr/glossary/buffer/index.md b/files/fr/glossary/buffer/index.md
index e23710ae12760f..3780c88ab94e34 100644
--- a/files/fr/glossary/buffer/index.md
+++ b/files/fr/glossary/buffer/index.md
@@ -1,14 +1,14 @@
 ---
 title: Tampon
 slug: Glossary/Buffer
+l10n:
+  sourceCommit: 7a551aaa034fbada3eb99e6fc924a0313b78307f
 ---
 
 {{GlossarySidebar}}
 
-Un tampon est un stockage dans la mémoire physique utilisé pour stocker temporairement des données pendant leur transfert d'un endroit à un autre.
+Un **tampon** (buffer en anglais) est un emplacement dans la mémoire physique utilisé pour stocker temporairement des données pendant leur transfert d'un endroit à un autre.
 
 ## Voir aussi
 
-### Culture générale
-
 - [Mémoire tampon](https://fr.wikipedia.org/wiki/Mémoire_tampon) sur Wikipédia

From 18acdf5e25288df40d38790d36fe945476c78768 Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sat, 24 Aug 2024 00:04:49 +0800
Subject: [PATCH 18/41] fr: update Glossary/CalDAV (#22959)

feat: update translation

Co-authored-by: SphinxKnight 
---
 files/fr/glossary/caldav/index.md | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/files/fr/glossary/caldav/index.md b/files/fr/glossary/caldav/index.md
index 6a83019fab68ec..e3fb95d6009954 100644
--- a/files/fr/glossary/caldav/index.md
+++ b/files/fr/glossary/caldav/index.md
@@ -5,15 +5,10 @@ slug: Glossary/CalDAV
 
 {{GlossarySidebar}}
 
-CalDAV (extensions de gestion de calendrier pour {{Glossary("WebDAV")}}) est un {{glossary("protocol","protocole")}} normalisé par l'IETF utilisé pour accéder à distance à des données d'agendas stockées sur un {{glossary("server","serveur")}}.
+**CalDAV** (extensions de gestion de calendrier pour [WebDAV](/fr/docs/Glossary/WebDAV) est [un protocole](/fr/docs/Glossary/Protocol) normalisé par [l'IETF](/fr/docs/Glossary/IETF) et utilisé pour accéder à distance à des données d'agendas stockées sur [un serveur](/fr/docs/Glossary/Server).
 
-## Pour en savoir plus
-
-### Culture générale
+## Voir aussi
 
 - [CalDAV](https://fr.wikipedia.org/wiki/CalDAV) sur Wikipédia
-
-### Référence technique
-
-- [RFC 4791: Calendaring extensions to WebDAV (CalDAV)](http://tools.ietf.org/html/rfc4791)
-- [RFC 6638: Scheduling Extensions to CalDAV](http://tools.ietf.org/html/rfc6638)
+- [La RFC 4791 qui spécifie ce protocole (en anglais)](https://datatracker.ietf.org/doc/html/rfc4791)
+- [La RFC 6638 qui spécifie les extensions au protocole CalDAV (en anglais)](https://datatracker.ietf.org/doc/html/rfc6638)

From 854c556b3777ae87484638309892e8d06d020624 Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sat, 24 Aug 2024 00:15:09 +0800
Subject: [PATCH 19/41] fr: update Glossary/Block_cipher_mode_of_operation
 (#22957)

feat: update translation

Co-authored-by: SphinxKnight 
---
 files/fr/glossary/block_cipher_mode_of_operation/index.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/files/fr/glossary/block_cipher_mode_of_operation/index.md b/files/fr/glossary/block_cipher_mode_of_operation/index.md
index 5265bcd5860137..733979d813ce9d 100644
--- a/files/fr/glossary/block_cipher_mode_of_operation/index.md
+++ b/files/fr/glossary/block_cipher_mode_of_operation/index.md
@@ -1,10 +1,12 @@
 ---
-title: Block cipher mode of operation
+title: Mode de fonctionnement de chiffrement par bloc
 slug: Glossary/Block_cipher_mode_of_operation
+l10n:
+  sourceCommit: 7a551aaa034fbada3eb99e6fc924a0313b78307f
 ---
 
 {{GlossarySidebar}}
 
-Un mode de fonctionnement de chiffrement par bloc, généralement appelé simplement "mode" dans le contexte, spécifie comment un chiffrement par bloc doit être utilisé pour chiffrer ou déchiffrer les messages qui sont plus longs que la taille du bloc.
+Un **mode de fonctionnement de chiffrement par bloc**, généralement appelé simplement « mode » dans le contexte, spécifie comment un chiffrement par bloc doit être utilisé pour chiffrer ou déchiffrer les messages qui sont plus longs que la taille du bloc.
 
-La plupart des algorithmes à clé symétrique actuellement utilisés sont des chiffrements par blocs: cela signifie qu'ils chiffrent les données un bloc à la fois. La taille de chaque bloc est fixe et déterminée par l'algorithme : par exemple [AES](/fr/docs/Glossary/AES) utilise des blocs de 16 octets. Les chiffrements de bloc sont toujours utilisés avec un mode, qui spécifie comment chiffrer en toute sécurité les messages plus longs que la taille du bloc. Par exemple, AES est un chiffrement, tandis que CTR, CBC et GCM sont tous des modes. L'utilisation d'un mode inapproprié ou une utilisation incorrecte d'un mode peut compromettre complètement la sécurité fournie par le chiffrement sous-jacent.
+La plupart des algorithmes à clé symétrique actuellement utilisés sont des chiffrements par bloc : cela signifie qu'ils chiffrent les données un bloc à la fois. La taille de chaque bloc est fixe et déterminée par l'algorithme : par exemple, AES utilise des blocs de 16 octets. Les chiffrements de bloc sont toujours utilisés avec un mode, qui spécifie comment chiffrer en toute sécurité les messages plus longs que la taille du bloc. Par exemple, AES est un chiffrement, tandis que CTR, CBC et GCM sont tous des modes. L'utilisation d'un mode inapproprié ou une utilisation incorrecte d'un mode peut compromettre complètement la sécurité fournie par le chiffrement sous-jacent.

From d7dc1b9cde44ef89cb0c8689769ec6474ddeb486 Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sat, 24 Aug 2024 00:16:13 +0800
Subject: [PATCH 20/41] fr: update Glossary/Block/Scripting (#22956)

feat: update translation

Co-authored-by: SphinxKnight 
---
 files/fr/glossary/block/scripting/index.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/files/fr/glossary/block/scripting/index.md b/files/fr/glossary/block/scripting/index.md
index d4d3e9043102f6..55b112e767a431 100644
--- a/files/fr/glossary/block/scripting/index.md
+++ b/files/fr/glossary/block/scripting/index.md
@@ -1,14 +1,14 @@
 ---
 title: Bloc (script)
 slug: Glossary/Block/Scripting
+l10n:
+  sourceCommit: 7a551aaa034fbada3eb99e6fc924a0313b78307f
 ---
 
 {{GlossarySidebar}}
 
-En {{glossary("JavaScript")}}, un bloc est un ensemble d'{{glossary("statement","instructions")}} entouré d'accolades ("{}"). Par exemple, vous pouvez placer un bloc d'instructions après {{jsxref("Statements/if...else","if (condition)")}} pour indiquer à l'interpréteur d'ignorer la totalité du bloc si la condition est fausse.
+En [JavaScript](/fr/docs/Glossary/JavaScript), un **bloc** est un ensemble d'[instructions](/fr/docs/Glossary/Statement) entouré d'accolades (`{}`). Par exemple, vous pouvez placer un bloc d'instructions après un bloc conditionnel [`if`](/fr/docs/Web/JavaScript/Reference/Statements/if...else) pour indiquer au moteur JavaScript d'ignorer la totalité du bloc si la condition est fausse.
 
-## Pour en savoir plus
+## Voir aussi
 
-### Apprendre à ce sujet
-
-- [Bloc d'instructions en JavaScript](/fr/docs/Web/JavaScript/Reference/Instructions/bloc)
+- [Bloc d'instructions en JavaScript](/fr/docs/Web/JavaScript/Reference/Statements/block)

From 4dd34db703a62c20dfbb21567e8c7e1dd8182ef9 Mon Sep 17 00:00:00 2001
From: seeker 
Date: Fri, 23 Aug 2024 12:19:14 -0400
Subject: [PATCH 21/41] [es] Web/JavaScript/Reference/Global_Objects/Map/get
 (#23210)

* [es] translate map get
---
 .../reference/global_objects/map/get/index.md | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 files/es/web/javascript/reference/global_objects/map/get/index.md

diff --git a/files/es/web/javascript/reference/global_objects/map/get/index.md b/files/es/web/javascript/reference/global_objects/map/get/index.md
new file mode 100644
index 00000000000000..1e807a12308c06
--- /dev/null
+++ b/files/es/web/javascript/reference/global_objects/map/get/index.md
@@ -0,0 +1,68 @@
+---
+title: Map.prototype.get()
+slug: Web/JavaScript/Reference/Global_Objects/Map/get
+l10n:
+  sourceCommit: 3cfd663738e9963157d90f359789d675a6662ec2
+---
+
+{{JSRef}}
+
+El método **`get()`** de las instancias de {{jsxref("Map")}} regresa un elemento específico de este _map_. Si el valor que esta asociado a la llave pasada como parámetro es un objeto, entonces obtendras una referencia a dicho objeto y cualquier cambio hecho a ese objeto, lo modificará también dentro del objeto `Map`.
+
+{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}
+
+## Sintaxis
+
+```js-nolint
+get(key)
+```
+
+### Parámetros
+
+- `key`
+  - : La llave del elemento que se quiere obtener del objeto `Mqp`.
+
+### Valor devuelto
+
+El elemento asociado a la llave pasada como parámetro, o {{jsxref("undefined")}} si la llave no se encuentra en el objeto `Map`.
+
+## Ejemplos
+
+### Usando get()
+
+```js
+const myMap = new Map();
+myMap.set("bar", "foo");
+
+console.log(myMap.get("bar")); // Regresa "foo"
+console.log(myMap.get("baz")); // Regresa undefined
+```
+
+### Usando get() para recuperar una referencia a un objeto
+
+```js
+const arr = [];
+const myMap = new Map();
+myMap.set("bar", arr);
+
+myMap.get("bar").push("foo");
+
+console.log(arr); // ["foo"]
+console.log(myMap.get("bar")); // ["foo"]
+```
+
+Note que el _map_ mantiene una referencia al objeto original, esto significa que el objeto no puede ser reclamado por el recolector de basura, lo que puede llevar a errores de memoria inesperados. Si deseas que el objeto guardado en el _map_ tenga el mismo tiempo de vida que el objeto original, considera usar un {{jsxref("WeakMap")}}.
+
+## Especificaciones
+
+{{Specifications}}
+
+## Compatibilidad con navegadores
+
+{{Compat}}
+
+## Véase también
+
+- {{jsxref("Map")}}
+- {{jsxref("Map.prototype.set()")}}
+- {{jsxref("Map.prototype.has()")}}

From 57595e609f085888177ca443f244fe31d0b017fc Mon Sep 17 00:00:00 2001
From: seeker 
Date: Fri, 23 Aug 2024 12:22:26 -0400
Subject: [PATCH 22/41] [es] Web/JavaScript/Reference/Global_Objects/Map/values
 (#23201)

[es] translate map values
---
 .../global_objects/map/values/index.md        | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 files/es/web/javascript/reference/global_objects/map/values/index.md

diff --git a/files/es/web/javascript/reference/global_objects/map/values/index.md b/files/es/web/javascript/reference/global_objects/map/values/index.md
new file mode 100644
index 00000000000000..3eae6bc0d3487e
--- /dev/null
+++ b/files/es/web/javascript/reference/global_objects/map/values/index.md
@@ -0,0 +1,56 @@
+---
+title: Map.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Map/values
+l10n:
+  sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
+---
+
+{{JSRef}}
+
+El método **`values()`** de las instancias {{jsxref("Map")}} regresa un nuevo objeto _[iterator de mapa](/es/docs/Web/JavaScript/Reference/Global_Objects/Iterator)_ que contiene los valores de cada elemento en este _map_ en orden de inserción.
+
+{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}
+
+## Sintaxis
+
+```js-nolint
+values()
+```
+
+### Parámetros
+
+Ningúno.
+
+### Valor devuelto
+
+Un nuevo [objeto de tipo iterator iterable](/es/docs/Web/JavaScript/Reference/Global_Objects/Iterator).
+
+## Ejemplos
+
+### Usando values()
+
+```js
+const myMap = new Map();
+myMap.set("0", "foo");
+myMap.set(1, "bar");
+myMap.set({}, "baz");
+
+const mapIter = myMap.values();
+
+console.log(mapIter.next().value); // "foo"
+console.log(mapIter.next().value); // "bar"
+console.log(mapIter.next().value); // "baz"
+```
+
+## Especificaciones
+
+{{Specifications}}
+
+## Compatibilidad con navegadores
+
+{{Compat}}
+
+## Véase también
+
+- {{jsxref("Map.prototype.entries()")}}
+- {{jsxref("Map.prototype.keys()")}}

From 34292dcad92b085192c59bceb883574876731b72 Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sat, 24 Aug 2024 00:23:12 +0800
Subject: [PATCH 23/41] fr: update Glossary/Baseline/Typography (#22955)

feat: update translation

Co-authored-by: SphinxKnight 
---
 files/fr/glossary/baseline/typography/index.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/files/fr/glossary/baseline/typography/index.md b/files/fr/glossary/baseline/typography/index.md
index f2bbfb8108bd6c..b7cf47ada576ab 100644
--- a/files/fr/glossary/baseline/typography/index.md
+++ b/files/fr/glossary/baseline/typography/index.md
@@ -2,16 +2,16 @@
 title: Ligne de base (typographie)
 slug: Glossary/Baseline/Typography
 l10n:
-  sourceCommit: 36527a8af0f396e8b84de3cda578d9e0fe1860f4
+  sourceCommit: 7a551aaa034fbada3eb99e6fc924a0313b78307f
 ---
 
 {{GlossarySidebar}}
 
-La **ligne de base** est une notion utilisée en typographie qui représente la ligne imaginaire sur laquelle repose les différents caractères d'un texte.
+La **ligne de base** est une notion utilisée en typographie qui représente la ligne imaginaire sur laquelle reposent les différents caractères d'un texte.
 
-{{GlossaryDisambiguation}}
+Les écritures d'Asie orientale n'ont pas de ligne de base. Chaque glyphe s'inscrit dans une boîte carrée, sans jambage ni hampe. Lors que des caractères d'Asie orientale sont mélangés avec des écritures ayant une ligne de base basse, le bas du caractère asiatique se situe entre la ligne de base et la hauteur du jambage.
 
 ## Voir aussi
 
-- [La page Wikipédia sur la ligne de base]()
 - [Alignement des boîtes CSS](/fr/docs/Web/CSS/CSS_box_alignment#types_dalignement)
+- [La page Wikipédia sur la ligne de base]()

From 577b62eb35376296154bb109cceb097242f075fa Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sat, 24 Aug 2024 00:24:04 +0800
Subject: [PATCH 24/41] fr: update Glossary/Adobe_Flash (#22953)

feat: update translation

Co-authored-by: SphinxKnight 
---
 files/fr/glossary/adobe_flash/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/fr/glossary/adobe_flash/index.md b/files/fr/glossary/adobe_flash/index.md
index e38c91b01fbf4d..d4f348d16e9eac 100644
--- a/files/fr/glossary/adobe_flash/index.md
+++ b/files/fr/glossary/adobe_flash/index.md
@@ -2,12 +2,12 @@
 title: Adobe Flash
 slug: Glossary/Adobe_Flash
 l10n:
-  sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff
+  sourceCommit: 7a551aaa034fbada3eb99e6fc924a0313b78307f
 ---
 
 {{GlossarySidebar}}
 
-[Adobe Flash](https://fr.wikipedia.org/wiki/Adobe_Flash) est une technologie obsolète, développée par Adobe Systems, qui permet de créer des applications internet riches, des graphiques vectoriels et des applications multimédias.
+[**Flash**](https://fr.wikipedia.org/wiki/Adobe_Flash) est une technologie obsolète, développée par Adobe, qui permet de créer des applications web riches, du contenu multimédia et de diffuser des médias.
 
 Depuis 2021, Flash n'est plus pris en charge par Adobe ni par aucun des principaux navigateurs web.
 

From 48760efa5b3c19a27f7761bf374e9827060acc4d Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sat, 24 Aug 2024 00:25:59 +0800
Subject: [PATCH 25/41] fr: update Glossary/Accessibility (#22952)

feat: update translation

Co-authored-by: SphinxKnight 
---
 files/fr/glossary/accessibility/index.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/files/fr/glossary/accessibility/index.md b/files/fr/glossary/accessibility/index.md
index 7bc57fa9c60ddf..4bea6aee9f0c97 100644
--- a/files/fr/glossary/accessibility/index.md
+++ b/files/fr/glossary/accessibility/index.md
@@ -2,19 +2,19 @@
 title: Accessibilité
 slug: Glossary/Accessibility
 l10n:
-  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+  sourceCommit: 7a551aaa034fbada3eb99e6fc924a0313b78307f
 ---
 
 {{GlossarySidebar}}
 
-_L'Accessibilité du web_ (**A11Y**) correspond aux bonnes pratiques assurant qu'un site web reste utilisable indépendamment des conditions de navigation et possibles handicaps de l'utilisateur. L'accessibilité du web est définie formellement et discutée au [W3C](/fr/docs/Glossary/W3C) au travers de [l'initiative pour l'accessibilité du web](/fr/docs/Glossary/WAI) (WAI).
+**L'accessibilité** (parfois abrégée en **A11Y** pour accessibility en anglais) correspond aux bonnes pratiques assurant qu'un site web reste utilisable indépendamment des conditions de navigation et possibles handicaps de la personne. L'accessibilité du web est définie formellement et discutée au [W3C](/fr/docs/Glossary/W3C) au travers de [l'initiative pour l'accessibilité du Web (WAI)](/fr/docs/Glossary/WAI).
 
 ## Voir aussi
 
-- [Ressources sur l'accessibilité sur le MDN](/fr/docs/Accessibility)
-- [Le guide sur l'accessibilité sur le MDN](/fr/docs/Learn/Accessibility)
-- [La Documentation ARIA sur le MDN](/fr/docs/Web/Accessibility/ARIA)
-- [La recommandation WAI-ARIA](http://www.w3.org/TR/wai-aria/) sur le site du W3C (en anglais)
+- [Ressources sur l'accessibilité](/fr/docs/Web/Accessibility)
+- [Le guide sur l'accessibilité](/fr/docs/Learn/Accessibility)
+- [La documentation ARIA](/fr/docs/Web/Accessibility/ARIA)
+- [La recommandation WAI-ARIA](https://www.w3.org/TR/wai-aria/) sur le site du W3C (en anglais)
 - [Accessibilité du web](https://fr.wikipedia.org/wiki/Accessibilité_du_web) sur Wikipédia
-- [La page d'accueil de l'institut Web Accessibility in Mind](https://webaim.org/) (en anglais)
-- [La page d'accueil du W3C de la Web Accessibility Initiative](https://www.w3.org/WAI/) (en anglais)
+- [La page d'accueil du W3C de la Web Accessibility Initiative](https://www.w3.org/WAI/) (en anglais)
+- [La page d'accueil de l'institut Web Accessibility in Mind](https://webaim.org/) (en anglais)

From 334128caa21fa16b40f99921401c793571faa9df Mon Sep 17 00:00:00 2001
From: Hoarfroster 
Date: Sat, 24 Aug 2024 00:27:39 +0800
Subject: [PATCH 26/41] fr: update Glossary/Abstraction (#22951)

* feat: update translation

Co-authored-by: SphinxKnight 

* feat

---------

Co-authored-by: SphinxKnight 
---
 files/fr/glossary/abstraction/index.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/files/fr/glossary/abstraction/index.md b/files/fr/glossary/abstraction/index.md
index d654054f0dfdff..93276d683c1990 100644
--- a/files/fr/glossary/abstraction/index.md
+++ b/files/fr/glossary/abstraction/index.md
@@ -2,19 +2,19 @@
 title: Abstraction
 slug: Glossary/Abstraction
 l10n:
-  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+  sourceCommit: 7a551aaa034fbada3eb99e6fc924a0313b78307f
 ---
 
 {{GlossarySidebar}}
 
-L'_abstraction_ dans le domaine de la [programmation informatique](/fr/docs/Glossary/Computer_Programming) permet de réduire la complexité et d'obtenir une conception et une implémentation plus efficaces dans les systèmes logiciels complexes. Elle dissimule les complexités techniques des systèmes derrière des [API](/fr/docs/Glossary/API) plus simples à manipuler.
+L'**abstraction** dans le domaine de la [programmation informatique](/fr/docs/Glossary/Computer_Programming) permet de réduire la complexité et d'obtenir une conception et une implémentation plus efficaces dans les systèmes logiciels complexes. Elle dissimule les complexités techniques des systèmes derrière des [API](/fr/docs/Glossary/API) plus simples à manipuler.
 
 ## Avantages de l'abstraction de données
 
-- Aider l'utilisatrice ou l'utilisateur à éviter d'écrire du code de bas niveau.
+- Éviter d'écrire du code de bas niveau.
 - Éviter la duplication de code et augmenter la réutilisabilité.
-- Pouvoir modifier l'implémentation interne de la classe indépendamment sans affecter l'utilisatrice ou l'utilisateur.
-- Aider à augmenter la sécurité d'une application ou d'un programme car seuls les détails importants sont fournis à l'utilisatrice ou l'utilisateur.
+- Pouvoir modifier l'implémentation interne d'une classe objet, sans affecter les personnes ou codes qui l'utilisent.
+- Améliorer la sécurité d'une application ou d'un programme en exposant uniquement les détails importants pour l'usage.
 
 ## Exemple
 
@@ -41,4 +41,4 @@ obj.display();
 
 ## Voir aussi
 
-- [Abstraction]() sur Wikipédia.
+- [Abstraction]() sur Wikipédia

From 706cf99f9da54ee3b51751f0ec081ca67a22f9c1 Mon Sep 17 00:00:00 2001
From: Chunhui Fu 
Date: Sat, 24 Aug 2024 08:44:31 +0800
Subject: [PATCH 27/41] [zh-cn]: create docs for HTMLEmbedElement (#23080)

Co-authored-by: A1lo 
---
 .../web/api/htmlembedelement/height/index.md  | 42 ++++++++++++++++
 files/zh-cn/web/api/htmlembedelement/index.md | 48 +++++++++++++++++++
 .../web/api/htmlembedelement/src/index.md     | 39 +++++++++++++++
 .../web/api/htmlembedelement/width/index.md   | 42 ++++++++++++++++
 4 files changed, 171 insertions(+)
 create mode 100644 files/zh-cn/web/api/htmlembedelement/height/index.md
 create mode 100644 files/zh-cn/web/api/htmlembedelement/index.md
 create mode 100644 files/zh-cn/web/api/htmlembedelement/src/index.md
 create mode 100644 files/zh-cn/web/api/htmlembedelement/width/index.md

diff --git a/files/zh-cn/web/api/htmlembedelement/height/index.md b/files/zh-cn/web/api/htmlembedelement/height/index.md
new file mode 100644
index 00000000000000..48b7310de9dd63
--- /dev/null
+++ b/files/zh-cn/web/api/htmlembedelement/height/index.md
@@ -0,0 +1,42 @@
+---
+title: HTMLEmbedElement：height 属性
+slug: Web/API/HTMLEmbedElement/height
+l10n:
+  sourceCommit: d8a52569d8d465eb626af3d33600c8c638a7a322
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("HTMLEmbedElement")}} 接口的 **`height`** 属性返回一个反映 {{HTMLElement("embed")}} 元素的 `height` 属性的字符串，其以 CSS 像素为单位指示资源的显示高度。
+
+## 值
+
+一个字符串，以 CSS 像素为单位指示资源的显示高度。
+
+## 示例
+
+```html
+
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.height); // 输出：“600”
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLCanvasElement.height")}}
+- {{domxref("HTMLIFrameElement.height")}}
+- {{domxref("HTMLImageElement.height")}}
+- {{domxref("HTMLObjectElement.height")}}
+- {{domxref("HTMLSourceElement.height")}}
+- {{domxref("HTMLVideoElement.height")}}
diff --git a/files/zh-cn/web/api/htmlembedelement/index.md b/files/zh-cn/web/api/htmlembedelement/index.md
new file mode 100644
index 00000000000000..042bd5f5c9d061
--- /dev/null
+++ b/files/zh-cn/web/api/htmlembedelement/index.md
@@ -0,0 +1,48 @@
+---
+title: HTMLEmbedElement
+slug: Web/API/HTMLEmbedElement
+l10n:
+  sourceCommit: e9e2ec643ac69c132f31427a0b586ab2cf83ed58
+---
+
+{{APIRef("HTML DOM")}}
+
+**`HTMLEmbedElement`** 接口提供了用于操作 {{HTMLElement("embed")}} 元素的特殊属性（除了常规 {{domxref("HTMLElement")}} 接口之外，它还可以通过继承来使用）。
+
+> [!NOTE]
+> 本主题描述标准定义中的 `HTMLEmbedElement` 接口。它没有解决早期非标准化版本的接口问题。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+_从其父接口 {{domxref("HTMLElement")}} 继承属性。_
+
+- {{domxref("HTMLEmbedElement.align")}} {{deprecated_inline}}
+  - : 表示枚举属性的字符串，指示元素内容相对于周围上下文的对齐方式。可能的值有：`"left"`、`"right"`、`"center"` 和 `"justify"`。
+- {{domxref("HTMLEmbedElement.height")}}
+  - : 一个反映 [`height`](/zh-CN/docs/Web/HTML/Element/embed#height) HTML 属性的字符串，包含资源显示的高度。
+- {{domxref("HTMLEmbedElement.name")}} {{deprecated_inline}}
+  - : 一个表示嵌入对象名字的字符串。
+- {{domxref("HTMLEmbedElement.src")}}
+  - : 一个反映 [`src`](/zh-CN/docs/Web/HTML/Element/embed#src) HTML 属性的字符串，包含资源地址。
+- {{domxref("HTMLEmbedElement.type")}}
+  - : 一个反映 [`type`](/zh-CN/docs/Web/HTML/Element/embed#type) HTML 属性的字符串，包含资源类型。
+- {{domxref("HTMLEmbedElement.width")}}
+  - : 一个反映 [`width`](/zh-CN/docs/Web/HTML/Element/embed#width) HTML 属性的字符串，包含资源的显示宽度。
+
+## 实例方法
+
+_无特定方法；从其父接口 {{domxref("HTMLElement")}} 继承方法。_
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 实现此接口的 HTML 元素：{{HTMLElement("embed")}}。
diff --git a/files/zh-cn/web/api/htmlembedelement/src/index.md b/files/zh-cn/web/api/htmlembedelement/src/index.md
new file mode 100644
index 00000000000000..16b716ae9a1f17
--- /dev/null
+++ b/files/zh-cn/web/api/htmlembedelement/src/index.md
@@ -0,0 +1,39 @@
+---
+title: HTMLEmbedElement：src 属性
+slug: Web/API/HTMLEmbedElement/src
+l10n:
+  sourceCommit: a0460b9c26f5ad9b8bbc9cc569f4fdd8058aec8f
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("HTMLEmbedElement")}} 接口的 **`src`** 属性返回一个指示嵌入资源的 URL 字符串。它反映 {{HTMLElement("embed")}} 元素的 `src` 属性。
+
+## 值
+
+一个字符串。
+
+## 示例
+
+```html
+
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.src); // 输出：“movie.mov”
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/htmlembedelement/width/index.md b/files/zh-cn/web/api/htmlembedelement/width/index.md
new file mode 100644
index 00000000000000..6c570b29867866
--- /dev/null
+++ b/files/zh-cn/web/api/htmlembedelement/width/index.md
@@ -0,0 +1,42 @@
+---
+title: HTMLEmbedElement：width 属性
+slug: Web/API/HTMLEmbedElement/width
+l10n:
+  sourceCommit: d8a52569d8d465eb626af3d33600c8c638a7a322
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("HTMLEmbedElement")}} 接口的 **`width`** 属性返回一个反映 {{HTMLElement("embed")}} 元素的 `width` 属性的字符串，其以 CSS 像素为单位指示资源的显示宽度。
+
+## 值
+
+一个字符串，以 CSS 像素为单位指示资源的显示宽度。
+
+## 示例
+
+```html
+
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.width); // 输出：“800”
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLCanvasElement.width")}}
+- {{domxref("HTMLIFrameElement.width")}}
+- {{domxref("HTMLImageElement.width")}}
+- {{domxref("HTMLObjectElement.width")}}
+- {{domxref("HTMLSourceElement.width")}}
+- {{domxref("HTMLVideoElement.width")}}

From 9e735d40376ddac5e7d549243e6cbb6e29c7b73d Mon Sep 17 00:00:00 2001
From: A1lo 
Date: Sat, 24 Aug 2024 09:18:34 +0800
Subject: [PATCH 28/41] zh-cn: update the translation of `Element.prefix`
 (#23199)

---
 files/zh-cn/web/api/element/prefix/index.md | 30 +++++++++------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/files/zh-cn/web/api/element/prefix/index.md b/files/zh-cn/web/api/element/prefix/index.md
index e9063c3233899c..ec1b8a91d0c2cc 100644
--- a/files/zh-cn/web/api/element/prefix/index.md
+++ b/files/zh-cn/web/api/element/prefix/index.md
@@ -1,44 +1,40 @@
 ---
-title: Element.prefix
+title: Element：prefix 属性
 slug: Web/API/Element/prefix
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
 ---
 
 {{APIRef("DOM")}}
 
-**`Element.prefix`** 只读属性返回指定元素的命名空间前缀，如果未指定前缀，则返回 null。
+**`Element.prefix`** 只读属性返回指定元素的命名空间前缀，如果未指定前缀，则返回 `null`。
 
-> [!NOTE]
-> 在 DOM4 之前，该 API 是在 {{domxref("Node")}} interface 中定义的。
+## 值
 
-## Syntax
+字符串。
 
-```
-string = element.prefix
-```
-
-## Examples
+## 示例
 
-The following logs "x" to the console.
+以下代码在控制台中打印“x”。
 
 ```xml
 
 ```
 
-## Notes
+## 备注
 
-This will only work when a namespace-aware parser is used, i.e. when a document is served with an XML MIME type. This will not work for HTML documents.
+仅当使用可感知命名空间的解析器时（即，当文档以 XML MIME 类型提供时），此属性才有效。对于 HTML 文档，此属性无效。
 
-## Specifications
+## 规范
 
 {{Specifications}}
 
-## Browser compatibility
+## 浏览器兼容性
 
 {{Compat}}
 
-## See also
+## 参见
 
 - {{domxref("Element.namespaceURI")}}
 - {{domxref("Element.localName")}}
 - {{domxref("Attr.prefix")}}
-- {{domxref("Node.prefix")}}

From 617f3888d666244640ddc44d77d6188d1be4ae8a Mon Sep 17 00:00:00 2001
From: 720 <71604450+T34-active@users.noreply.github.com>
Date: Sat, 24 Aug 2024 09:19:12 +0800
Subject: [PATCH 29/41] [zh-cn]: update the translation of Range `endOffset`
 property (#23177)

Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 files/zh-cn/web/api/range/endoffset/index.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/files/zh-cn/web/api/range/endoffset/index.md b/files/zh-cn/web/api/range/endoffset/index.md
index 28695a916f895e..62f8cd70ea85a4 100644
--- a/files/zh-cn/web/api/range/endoffset/index.md
+++ b/files/zh-cn/web/api/range/endoffset/index.md
@@ -1,24 +1,24 @@
 ---
-title: Range.endOffset
+title: Range：endOffset 属性
 slug: Web/API/Range/endOffset
+l10n:
+  sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e
 ---
 
 {{ApiRef("DOM")}}
 
-只读属性 **`Range.endOffset`** 返回代表 `Range` 结束位置在 {{domxref("Range.endContainer")}} 中的偏移值的数字。
+**`Range.endOffset`** 只读属性返回一个数字，表示 {{domxref("Range.endContainer")}} 在 {{domxref("Range")}} 中的结束位置。
 
-如果 `endContainer` 的 {{domxref("Node")}} 类型为 {{domxref("Text")}}, {{domxref("Comment")}}，或 {{domxref("CDATASection")}}，偏移值是 `endContainer` 节点开头到 {{domxref("Range")}} 末尾的总字符个数。对其他类型的 {{domxref("Node")}} ， `endOffset` 指 `endContainer` 开头到 {{domxref("Range")}} 末尾的总 {{domxref("Node")}} 个数。如需修改 `endOffset` 的值，使用 {{domxref("Range.setEnd")}} 方法。
+如果 `endContainer` 是 {{domxref("Text")}}、{{domxref("Comment")}} 或 {{domxref("CDATASection")}} 类型的 {{domxref("Node")}}，那么偏移量是从 `endContainer` 的起始位置到 {{domxref("Range")}} 边界点之间的字符数。对于其他的 {{domxref("Node")}} 类型，`endOffset` 是从 `endContainer` 的起始位置到 {{domxref("Range")}} 边界点之间的子节点数。此属性为只读。要更改 {{domxref("Range")}} 的 `endOffset` 值，请使用 {{domxref("Range.setEnd")}} 方法。
 
-## 语法
+## 值
 
-```
-endRangeOffset = range.endOffset;
-```
+数字。
 
 ## 示例
 
 ```js
-var range = document.createRange();
+const range = document.createRange();
 
 range.setStart(startNode, startOffset);
 range.setEnd(endNode, endOffset);
@@ -35,4 +35,4 @@ endRangeOffset = range.endOffset;
 
 ## 参见
 
-- [The DOM interfaces index](/zh-CN/docs/DOM/DOM_Reference)
+- [DOM 接口索引](/zh-CN/docs/Web/API/Document_Object_Model)

From 9926fca50ab49e8f19acf5eb3a3e5fcee34ea607 Mon Sep 17 00:00:00 2001
From: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
Date: Sat, 24 Aug 2024 09:23:43 +0800
Subject: [PATCH 30/41] [zh-cn] update 'how to structure a web form' (#23200)

Co-authored-by: A1lo 
---
 .../how_to_structure_a_web_form/index.md      | 318 ++++++++++++------
 1 file changed, 208 insertions(+), 110 deletions(-)

diff --git a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md
index 63637e6ae03df7..e68af116a104af 100644
--- a/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md
+++ b/files/zh-cn/learn/forms/how_to_structure_a_web_form/index.md
@@ -1,52 +1,52 @@
 ---
-title: 如何构造 HTML 表单
+title: 如何构建 HTML 表单
 slug: Learn/Forms/How_to_structure_a_web_form
+l10n:
+  sourceCommit: b76266228bd0900aa1256902c7858971156a58c9
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}
 
-有了基础知识，我们现在更详细地了解了用于为表单的不同部分提供结构和意义的元素。
+在介绍了基本知识后，我们现在来详细了解用于为表单的不同部分提供结构和意义的元素。
 
-
+
      
   
     
      
       前提：
       
-        基本的计算机能力，和基本的
-        对 HTML 的理解对 HTML 的基本理解。
       
     
      
     
      
       目标：
       
-        要理解如何构造 HTML 表单并赋予它们语义，以便它们是可用的和可访问的。
+        了解如何构建 HTML 表单并赋予其语义，使其可用且具有无障碍性。
       
     
      
         
 
      
 
-HTML 表单的灵活性使它们成为 HTML 中最复杂的结构之一;你可以使用专用的表单元素和属性构建任何类型的基本表单。在构建 HTML 表单时使用正确的结构将有助于确保表单可用性和无障碍。
+表单的灵活性使它们成为 [HTML](/zh-CN/docs/Learn/HTML) 中最复杂的结构之一。你可以使用专用的表单元素和属性构建任何类型的基本表单。在构建 HTML 表单时使用正确的结构将有助于确保表单可用性和[无障碍性](/zh-CN/docs/Learn/Accessibility)。
 
 ## \
       元素
 
-{{HTMLElement("form")}} 元素按照一定的格式定义了表单和确定表单行为的属性。当你想要创建一个 HTML 表单时，都必须从这个元素开始，然后把所有内容都放在里面。许多辅助技术或浏览器插件可以发现{{HTMLElement("form")}}元素并实现特殊的钩子，使它们更易于使用。
+{{HTMLElement("form")}} 元素按照一定的格式定义了表单和确定表单行为的属性。每次创建 HTML 表单时，都必须使用该元素，并将所有内容嵌套在表单中。许多辅助技术和浏览器插件都能发现 {{HTMLElement("form")}} 元素，并实施特殊钩子使其更易于使用。
 
 我们早在之前的文章中就遇见过它了。
 
-> [!NOTE]
-> 严格禁止在一个表单内嵌套另一个表单。嵌套会使表单的行为不可预知，而这取决于正在使用的浏览器。
+> [!WARNING]
+> 严禁在一个表单内嵌套另一个表单。嵌套会导致表单出现不可预测的行为。
 
-请注意，在{{HTMLElement("form")}}元素之外使用表单小部件是可以的，但是如果你这样做了，那么表单小部件与任何表单都没有任何关系。这样的小部件可以在表单之外使用，但是你应该对于这些小部件有特别的计划，因为它们自己什么也不做。你将不得不使用 JavaScript 定制他们的行为。
+在 {{HTMLElement("form")}} 元素之外也可以使用表单控件，但是如果你这样做了，那么除非使用 [`form`](/zh-CN/docs/Web/HTML/Element/input#form) 属性将其与表单关联，否则该控件与任何表单都没有任何关系。引入该特性是为了显式地将控件与表单绑定，即使控件没有嵌套在表单中。
 
-> [!NOTE]
-> HTML5 在 HTML 表单元素中引入`form`属性。它让你显式地将元素与表单绑定在一起，即使元素不在{{ HTMLElement("form") }}中。不幸的是，就目前而言，跨浏览器对这个特性的实现还不足以使用。
+下面我们来介绍一下嵌套在表单中的结构元素。
 
 ## \
       和 \ 元素
 
-{{HTMLElement("fieldset")}}元素是一种方便的用于创建具有相同目的的小部件组的方式，出于样式和语义目的。你可以在`
      `开口标签后加上一个 {{HTMLElement("legend")}}元素来给{{HTMLElement("fieldset")}} 标上标签。 {{HTMLElement("legend")}}的文本内容正式地描述了{{HTMLElement("fieldset")}}里所含有部件的用途。
+{{HTMLElement("fieldset")}} 元素是一种方便的用于创建具有相同目的（出于样式和语义目的）的微件组的方式。你可以在 {{HTMLElement("fieldset")}} 起始标签后加上一个 {{HTMLElement("legend")}} 元素，来给 {{HTMLElement("fieldset")}} 做标签。{{HTMLElement("legend")}} 的文本内容形式地描述了 {{HTMLElement("fieldset")}} 里所含有微件的用途。
 
-许多辅助技术将使用{{HTMLElement("legend")}} 元素，就好像它是相应的 {{HTMLElement("fieldset")}} 元素里每个部件的标签的一部分。例如，在说出每个小部件的标签之前，像[Jaws](http://www.freedomscientific.com/products/fs/jaws-product-page.asp)或[NVDA](http://www.nvda-project.org/)这样的屏幕阅读器会朗读出 legend 的内容。
+许多辅助技术在使用 {{HTMLElement("legend")}} 元素时，会将其视为相应 {{HTMLElement("fieldset")}} 元素中每个控件标签的一部分。例如，[Jaws](https://www.freedomscientific.com/products/software/jaws/) 和 [NVDA](https://www.nvaccess.org/) 等屏幕阅读器会在说出每个控件的标签之前先说出图例的内容。
 
 这里有一个小例子：
 
@@ -71,27 +71,25 @@ HTML 表单的灵活性使它们成为 HTML 中最复杂的结构之一;你可
 ```
 
 > [!NOTE]
-> 你可以在 [fieldset-legend.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/fieldset-legend.html) (你也可以看[预览版](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)) 看到该例。
+> 你可以在 [fieldset-legend.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/fieldset-legend.html)（[也可以查看在线示例](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)）中看到该例。
 
-当阅读上述表格时，屏幕阅读器将会读第一个小部件“Fruit juice size small”，“Fruit juice size medium”为第二个，“Fruit juice size large”为第三个。
+当阅读上述表格时，屏幕阅读器将会为第一个微件读出“Fruit juice size small”，“Fruit juice size medium”为第二个，“Fruit juice size large”为第三个。
 
-本例中的用例是最重要的。每当你有一组单选按钮时，你应该将它们嵌套在{{HTMLElement("fieldset")}}元素中。还有其他用例，一般来说，{{HTMLElement("fieldset")}}元素也可以用来对表单进行分段。理想情况下，长表单应该在拆分为多个页面，但是如果表单很长，却必须在单个页面上，那么将以不同的关联关系划分的分段，分别放在不同的 fieldset 里，可以提高可用性。
+本例中的用例是最重要的。每当使用一组单选按钮时，都应该将它们嵌套在 {{HTMLElement("fieldset")}} 元素中。还有其他用例，一般来说，{{HTMLElement("fieldset")}} 元素也可以用来对表单进行分段。理想情况下，长表单应该在拆分为多个页面，但是如果表单很长，却必须在单个页面上，那么将以不同的关联关系划分的分段，分别放在不同的 fieldset 里，可以提高可用性。
 
-因为它对辅助技术的影响， {{HTMLElement("fieldset")}} 元素是构建可访问表单的关键元素之一。无论如何，你有责任不去滥用它。如果可能，每次构建表单时，尝试侦听[屏幕阅读器](https://www.nvaccess.org/download/)如何解释它。如果听起来很奇怪，试着改进表单结构。
+因为它对辅助技术的影响， {{HTMLElement("fieldset")}} 元素是构建无障碍表单的关键元素之一。无论如何，你有责任不去滥用它。如果可能，每次构建表单时，请尝试[听一听屏幕阅读器](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#屏幕阅读器)如何解释它。如果听起来很奇怪，请尝试改进表单结构。
 
 ## \