HTML | DOM Map 区域集合

HTML提供了一个使用区域集合定义图像映射，通过Map标签结合Area标签可以实现对一个图像进行区域分割并赋予不同的超链接。同时，使用DOM操作也可以对这些区域进行动态修改、添加监听事件等操作。

Map标签

Map标签定义了一个图像映射，其语法如下：

<map name="mapname">
  <area shape="shape" coords="coords" href="url">
</map>
<img src="imageurl" usemap="#mapname">

其中，name为映射名称；Area标签包含三个主要属性：shape表示形状（rect矩形、circle圆形、poly多边形），coords为区域坐标，href则为超链接地址，指向某个网页。

Map标签一般和img标签结合使用，img的usemap属性指向该映射名称。这样，点击图片上的区域就会跳转到指定页面。

DOM操作

DOM提供了对map标签和area标签的操作方式，通过获取DOM元素，可以对映射和区域进行修改、添加监听事件等操作。

获取Map对象

可以使用document对象的querySelect方法来获取Map对象，如下：

var map = document.querySelector('map');

获取Area对象

获取Area对象则可以通过Map对象的querySelectorAll、getElementsByTagName等方法来获取，如下：

var areaArr = map.querySelectorAll('area');

以上代码获取了map元素下所有的area子元素并保存到一个数组areaArr中。

修改Area参数

获取到Area对象后，可以通过修改其属性来修改区域参数。如下代码将第一个area的href属性改为google.com：

areaArr[0].href = 'https://www.google.com/'

添加监听事件

可以使用addEventListener方法来为Area元素添加监听事件，例如监听点击事件并弹出提示框：

areaArr[0].addEventListener('click', function() {
  alert('你点击了第一个区域！');
})

总结

通过Map标签和DOM操作，可以实现对图像映射区域的定义、修改和事件监听等操作。对于需要对图像进行具体区域划分的网站，这种方式非常实用。