为什么图像映射区域的getElementById不返回IE中的区域元素？

Question

我在网页上有一个带有以下HTML的图像映射：

<div class="container">
    <img src="image.png" usemap="#hotspots">
    <map name="#hotspots">
        <area id="seg-1" href="" shape="poly" coords="167,286,113,379,320,379,266,286,167,286"/>
        <area... />
        <area... />
        <area... />
        ...
    </map>
</div>

我正在尝试使用以下JavaScript获取对区域元素的引用：

var seg1 = document.getElementById("seg-1");

我成功地获得了参考：

• Safari 6（OS X）
• Chrome 26（OS X）
• Firefox 21（OS X）
• Chrome 27（XP）
• Chrome 27（W7）
• Chrome（W8）。

但不在：

• IE8（XP）
• IE9（W7）
• IE10（W8）
• Firefox 17（XP）
• Firefox 21（W7）
• Firefox 21（W8）。

当它工作时，我得到对HTML区域元素的引用，但是当它不起作用时，我得到对该文档的引用。以下是控制台日志消息：

工作：

HTMLAreaElement

不工作：

http://localhost/index.html

我知道如何解决这个问题，但我想知道为什么会这样？为什么getElementById不适用于图像映射区域元素？

感谢您的任何想法。

Answer 1

这似乎与这些浏览器中的area元素上的“toString”方法有关。无论出于何种原因，它都会打印href的派生值。然而，这就是印刷品。 getElementById的实际结果仍然是区域元素。

例如，如果您在这些浏览器中使用console.log(document.getElementById('seg-1').shape)，它仍会正确打印“poly”。