HTML DOM教程 15-HTML DOM Anchor 对象
HTML DOM教程 15-HTML DOM Anchor 对象
1：Anchor 对象
Anchor 对象代表一个 HTML 超链接。
在 HTML 文档中 <a> 标签每出现一次，Anchor 对象就会被创建。
锚可用于创建到另一个文档的链接（通过 href 属性），或者创建文档内的书签。
您可以通过搜索 Document 对象中的 anchors[] 数组来访问某个锚，或者使用 document.getElementById()。
2：Anchor 对象的属性
IE: Internet Explorer，F: Firefox，O: Opera，W3C: 万维网联盟 (Internet 标准)。
| 属性 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| accessKey | 设置或返回访问一个链接的快捷键。 | 5 | 1 | No | Yes |
| charset | 设置或返回被链接资源的字符集。 | 6 | 1 | 9 | Yes |
| coords | 设置或返回逗号分隔列表，其中包含了图像映射中一个链接的坐标。 | 6 | 1 | 9 | Yes |
| href | 设置或返回被链接资源的 URL。 | 5 | 1 | 9 | Yes |
| hreflang | 设置或返回被链接资源的语言代码。 | 6 | 1 | 9 | Yes |
| id | 设置或返回一个链接的 id。 | 4 | 1 | 9 | Yes |
| innerHTML | 设置或返回一个链接的内容。 | 4 | 1 | 9 | No |
| name | 设置或返回一个链接的名称。 | 4 | 1 | 9 | Yes |
| rel | 设置或返回当前文档与目标 URL 之间的关系。 | 5 | 1 | No | Yes |
| rev | 设置或返回目标 URL 与之间当前文档的关系。 | 5 | 1 | No | Yes |
| shape | 设置或返回图像映射中某个链接的形状。 | 6 | 1 | 9 | Yes |
| tabIndex | 设置或返回某个链接的 Tab 键控制次序。 | 6 | 1 | 9 | Yes |
| target | 设置或返回在何处打开链接。 | 5 | 1 | 9 | Yes |
| type | 设置或返回被链接资源的 MIME 类型。 | 6 | 1 | 9 | Yes |
3：标准属性
| Property | Description | IE | F | O | W3C |
|---|---|---|---|---|---|
| className | 设置或返回元素的 class 属性。 | 5 | 1 | 9 | Yes |
| dir | 设置或返回文本的方向。 | 5 | 1 | 9 | Yes |
| lang | 设置或返回元素的语言代码。 | 5 | 1 | 9 | Yes |
| title | 设置或返回元素的 title。 | 5 | 1 | 9 | Yes |
5：coords 属性
下面的例子可返回图像映射中一个链接的坐标：
<html>
<body>
<img src="planets.gif"
width="145" height="126"
usemap="#planetmap" />
<map name="planetmap">
<area id="venus" shape="circle"
coords="124,58,8"
alt="Venus"
href="venus.htm" />
</map>
<p>Venus coordinates:
<script type="text/javascript">
x=document.getElementById("venus");
document.write(x.coords);
</script>
</p>
</body>
</html>
6:blur() 方法
运行下面的代码，看看效果：
<html>
<head>
<style type="text/css">
a:active {color:green}
</style>
<script type="text/javascript">
function getfocus()
{document.getElementById('myAnchor').focus()}
function losefocus()
{document.getElementById('myAnchor').blur()}
</script>
</head>
<body>
<a id="myAnchor"
href="http://www.w3school.com.cn">Visit W3School.com.cn</a>
<br /><br/>
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
</body>
</html>
