爲什麼圖像地圖區域的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」。