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>