---
title: HTMLAreaElement
slug: Web/API/HTMLAreaElement
translation_of: Web/API/HTMLAreaElement
---
<div>
<div>{{APIRef("HTML DOM")}}</div>
</div>

<p><strong><code>HTMLAreaElement</code></strong> 接口提供了一些属性和方法 (除了常见的对象{{domxref("HTMLElement")}} 接口提供的属性和方法通过继承也能获取到) 用来控制一个area元素的布局和展现。</p>

<h2 id="属性">属性</h2>

<p><em>从它的父对象{{domxref("HTMLElement")}}继承的，还有从{{domxref("URLUtils")}}继承的。</em></p>

<dl>
 <dt>{{domxref("HTMLAreaElement.accessKey")}}</dt>
 <dd>值为一个 {{domxref("DOMString")}} 类型，包含了一个简单的字符代表键盘上的一个按键，相当于快捷键。</dd>
 <dt>{{domxref("HTMLAreaElement.alt")}}</dt>
 <dd>值为一个{{domxref("DOMString")}} 类型，代表了 {{ htmlattrxref("alt", "area") }} HTML 属性,，包含一个area对象显示异常的情况下显示的备用文本字符串。</dd>
 <dt>{{domxref("HTMLAreaElement.coords")}}</dt>
 <dd>值为一个 {{domxref("DOMString")}} 类型，代表了 {{ htmlattrxref("coords", "area") }} HTML 属性, 包含了定义热区相关的坐标。</dd>
 <dt>{{domxref("HTMLAreaElement.download")}} {{experimental_inline}}</dt>
 <dd>值为一个 {{domxref("DOMString")}} 类型，表明此资源是将要被下载的资源而不是显示在浏览器页面中。值为下载保存文件的推荐文件名。如果名字在操作系统里不是一个合格的文件名格式，浏览器将会做相应的修改。</dd>
 <dt>{{domxref("URLUtils.hash")}}</dt>
 <dd>Is a {{domxref("DOMString")}} containing the fragment identifier (including the leading hash mark (#)), if any, in the referenced URL.</dd>
 <dt>{{domxref("URLUtils.host")}}</dt>
 <dd>Is a {{domxref("DOMString")}} containing the hostname and port (if it's not the default port) in the referenced URL.</dd>
 <dt>{{domxref("URLUtils.hostname")}}</dt>
 <dd>Is a {{domxref("DOMString")}} containing the hostname in the referenced URL.</dd>
 <dt>{{domxref("URLUtils.href")}}</dt>
 <dd>Is a {{domxref("DOMString")}} containing that reflects the {{ htmlattrxref("href", "area") }} HTML attribute, containing a valid URL of a linked resource.</dd>
 <dt>{{domxref("HTMLAreaElement.hreflang")}}</dt>
 <dd>Is a {{domxref("DOMString")}} containing that reflects the {{ htmlattrxref("hreflang", "area") }} HTML attribute, indicating the language of the linked resource.</dd>
 <dt>{{domxref("HTMLAreaElement.media")}}</dt>
 <dd>Is a {{domxref("DOMString")}} containing that reflects the {{ htmlattrxref("media", "area") }} HTML attribute, indicating target media of the linked resource.</dd>
 <dt>{{domxref("HTMLAreaElement.noHref")}} {{obsolete_inline}}</dt>
 <dd>Is a {{domxref("Boolean")}} flag indicating if the area is inactive (<code>true</code>) or active (<code>false</code>).</dd>
 <dt>{{domxref("URLUtils.password")}}</dt>
 <dd>Is a {{domxref("DOMString")}} containing the password specified before the domain name.</dd>
 <dt>{{domxref("URLUtils.origin")}} {{readonlyInline}}</dt>
 <dd>Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.</dd>
 <dt>{{domxref("URLUtils.pathname")}}</dt>
 <dd>Is a {{domxref("DOMString")}} containing the path name component, if any, of the referenced URL.</dd>
 <dt>{{domxref("URLUtils.port")}}</dt>
 <dd>Is a {{domxref("DOMString")}} containing the port component, if any, of the referenced URL.</dd>
 <dt>{{domxref("URLUtils.protocol")}}</dt>
 <dd>Is a {{domxref("DOMString")}} containing the protocol component (including trailing colon <code>':'</code>), of the referenced URL.</dd>
 <dt>{{domxref("HTMLAreaElement.rel")}}</dt>
 <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("rel", "area") }} HTML attribute, indicating relationships of the current document to the linked resource.</dd>
 <dt>{{domxref("HTMLAreaElement.relList")}} {{readOnlyInline}}</dt>
 <dd>Returns a {{domxref("DOMTokenList")}} that reflects the {{ htmlattrxref("rel", "area") }} HTML attribute, indicating relationships of the current document to the linked resource, as a list of tokens.</dd>
 <dt>{{domxref("HTMLAreaElement.search")}}</dt>
 <dd>Is a {{domxref("DOMString")}} containing the search element (including leading question mark <code>'?'</code>), if any, of the referenced URL.</dd>
 <dt>{{domxref("HTMLAreaElement.shape")}}</dt>
 <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("shape", "area") }} HTML attribute, indicating the shape of the hot-spot, limited to known values.</dd>
 <dt>{{domxref("HTMLAreaElement.tabIndex")}}</dt>
 <dd>Is a <code>long</code> containing the element's position in the tabbing order.</dd>
 <dt>{{domxref("HTMLAreaElement.target")}}</dt>
 <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("target", "area") }} HTML attribute, indicating the browsing context in which to open the linked resource.</dd>
 <dt>{{domxref("HTMLAreaElement.type")}}</dt>
 <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("type", "area") }} HTML attribute, indicating the MIME type of the linked resource.</dd>
 <dt>{{domxref("URLUtils.username")}}</dt>
 <dd>Is a {{domxref("DOMString")}} containing the username specified before the domain name.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}} and  implement those from {{domxref("URLUtils")}}.</em></p>

<dl>
 <dt>{{domxref("URLUtils.toString()")}}</dt>
 <dd>Returns a {{domxref("DOMString")}} containing the whole URL of the script executed in the {{domxref("Worker")}}. It is a synonym for {{domxref("URLUtils.href")}}.</dd>
</dl>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "the-map-element.html#the-area-element", "HTMLAreaElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>The following property has been added: <code>download</code>.<br>
    Technically, the URL-related properties, <code>media</code>, <code>host</code>, <code>hostname</code>, <code>pathname</code>, <code>port</code>, <code>protocol</code>, <code>search</code>, and <code>hash</code>, have been moving to the {{domxref("URLUtils")}} interface, and <code>HTMLAreaElement</code> implements this interface.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-area-element", "HTMLAreaElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Technically, the properties <code>tabindex</code> and <code>accesskey</code> are now defined on {{domxref("HTMLElement")}}.<br>
    The following property is now obsolete:  <code>nohref</code>.<br>
    The following properties have been added: <code>rel</code>, <code>relList</code>, <code>media</code>, <code>hreflang</code>, <code>type</code>, <code>host</code>, <code>hostname</code>, <code>pathname</code>, <code>port</code>, <code>protocol</code>, <code>search</code>, and <code>hash</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-26019118', 'HTMLAreaElement')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>No change from {{SpecName("DOM1")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-26019118', 'HTMLAreaElement')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>download</code> {{experimental_inline}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("26.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>download</code> {{experimental_inline}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("26.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>HTML element implementing this interface: {{ HTMLElement("area") }}.</li>
</ul>