HTML DOM教程 15-HTML DOM Anchor 对象

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pricks/archive/2009/05/04/1448931.html

文章标签：

#javascript #ViewUI

本文详细介绍了HTML DOM中的Anchor对象，包括其基本概念、属性、方法等，并通过实例展示了如何使用这些属性和方法来操作HTML中的超链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

　　4：Anchor 对象的方法

Method	Description	IE	F	O	W3C
blur()	把焦点从链接上移开	5	1	9	Yes
focus()	给链接应用焦点	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" οnclick="getfocus()" value="Get focus">
<input type="button" οnclick="losefocus()" value="Lose focus">
</body>

</html>