[zh-cn]: create docs for HTMLMapElement (#23048)

Co-authored-by: A1lo <[email protected]>

files/zh-cn/web/api/htmlmapelement/areas/index.md

@@ -0,0 +1,59 @@
+---
+title: HTMLMapElement：areas 属性
+slug: Web/API/HTMLMapElement/areas
+l10n:
+  sourceCommit: da6219d9480147488eda1f9120359384ee652b92
+---
+
+{{ApiRef("HTML DOM")}}
+
+{{domxref("HTMLMapElement")}} 接口的 **`areas`** 只读属性返回关联 {{HTMLElement("map")}} 元素的 {{HTMLElement("area")}} 元素集合。
+
+## 值
+
+一个包含 {{domxref("HTMLAreaElement")}} 元素的 {{domxref("HTMLCollection")}} 对象。
+
+## 示例
+
+```html
+<map id="image-map">
+  <area shape="circle" coords="50,50,35" alt="左箭头" />
+  <area shape="circle" coords="150,50,35" alt="右箭头" />
+</map>
+<img usemap="#image-map" src="left-right-arrow.png" alt="左右箭头图片" />
+<output></output>
+```
+
+```css hidden
+output {
+  display: block;
+}
+```
+
+```js
+const mapElement = document.getElementById("image-map");
+const outputElement = document.querySelector("output");
+
+for (const area of mapElement.areas) {
+  area.addEventListener("click", (event) => {
+    outputElement.textContent = `你点击了${area.alt}区域。\n\n`;
+  });
+}
+```
+
+### 结果
+
+{{EmbedLiveSample("示例",100,150)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLAreaElement")}}
+- {{domxref("HTMLImageElement.useMap")}}

files/zh-cn/web/api/htmlmapelement/index.md

@@ -0,0 +1,37 @@
+---
+title: HTMLMapElement
+slug: Web/API/HTMLMapElement
+l10n:
+  sourceCommit: 387d0d4d8690c0d2c9db1b85eae28ffea0f3ac1f
+---
+
+{{ APIRef("HTML DOM") }}
+
+**`HTMLMapElement`** 接口提供特定的属性和方法（除了常规 {{domxref("HTMLElement")}} 接口之外，它还可以通过继承来使用），用于操作 map 元素的布局和展现。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+_从其父接口 {{domxref("HTMLElement")}} 继承属性。_
+
+- {{domxref("HTMLMapElement.name")}}
+  - : 一个表示 {{HTMLElement("map")}} 元素的字符串，用于在其他上下文中引用它。如果设置了 `id` 属性，则该属性必须具有相同的值；且它不能为 `null` 或者空。
+- {{domxref("HTMLMapElement.areas")}} {{ReadOnlyInline}}
+  - : 一个动态的 {{domxref("HTMLCollection")}}，表示与 {{HTMLElement("map")}} 关联的 {{HTMLElement("area")}} 元素。
+
+## 实例方法
+
+_无特定方法；从其父接口 {{domxref("HTMLElement")}} 继承方法。_
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 实现该接口的 HTML 元素：{{ HTMLElement("map") }}。

files/zh-cn/web/api/htmlmapelement/name/index.md

@@ -0,0 +1,42 @@
+---
+title: HTMLMapElement：name 属性
+slug: Web/API/HTMLMapElement/name
+l10n:
+  sourceCommit: c2441279b7956925d28373345838436b1fa2c78c
+---
+
+{{ApiRef("HTML DOM")}}
+
+{{domxref("HTMLMapElement")}} 的 **`name`** 属性表示 `<map>` 元素的唯一名称。它的值可以与 {{HTMLElement("img")}} 元素的 `useMap` 属性一起使用，以引用 `<map>` 元素。
+
+如果 {{HTMLElement("map")}} 元素设置了 `id` 属性，则 `name` 属性应该与其 `id` 属性相同。
+
+## 值
+
+一个没有空格的非空字符串。
+
+## 示例
+
+```html
+<map name="image-map">
+  <area shape="circle" coords="15,15,5" />
+</map>
+```
+
+```js
+const mapElement = document.getElementsByName("image-map")[0];
+console.log(mapElement.name); // 输出：“image-map”
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLImageElement.useMap")}} 属性
+- {{domxref("HTMLAreaElement")}} 元素