为什么图像地图区域的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）
• 铬26（OS X）
• 火狐21（OS X）
• 铬27（XP）
• 铬27（W7）
• 铬（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

看来这只是与这些浏览器中的区域元素上的“toString”方法有关。无论出于何种原因，它都会打印href的派生值。但是，这正是打印的内容。 getElementById的实际结果仍然是区域元素。

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