HTML DOM Anchor 对象
HTML DOM Anchor 对象
展示 Anchor 对象的各种属性、事件和用法
开始探索
Anchor 对象介绍
HTML DOM Anchor 对象表示 HTML 文档中的 <a> 元素。它用于创建超链接，可以链接到其他页面、页面内的锚点、电子邮件地址或任何其他 URL。
Anchor 对象是 HTMLAnchorElement 接口的实例，继承自 HTMLElement，因此具有所有标准 HTML 元素的属性和方法。
// 获取 Anchor 对象的方法
const link1 = document.getElementById("myLink");
const link2 = document.querySelector("a");
const link3 = document.createElement("a"); // 创建新的 Anchor 对象
关键特性
- 创建可点击的链接
- 支持各种 URL 协议
- 丰富的属性和事件
- 与 CSS 和 JavaScript 完全兼容
Anchor 对象属性
Anchor 对象具有许多有用的属性，可以获取或设置链接的各种特性。
| 属性 |
描述 |
示例 |
| href |
设置或返回链接的 URL |
link.href = "https://example.com" |
| target |
设置或返回链接打开的目标窗口 |
link.target = "_blank" |
| download |
设置或返回下载文件的名称 |
link.download = "file.pdf" |
| rel |
设置或返回当前文档与链接文档的关系 |
link.rel = "noopener" |
| text |
设置或返回链接的文本内容 |
link.text = "点击这里" |
| type |
设置或返回链接的 MIME 类型 |
link.type = "text/html" |
| hreflang |
设置或返回链接文档的语言代码 |
link.hreflang = "en" |
Anchor 对象事件
Anchor 对象支持所有标准 DOM 事件，以下是一些常用的事件示例：
鼠标事件
- click - 点击链接时触发
- mouseover - 鼠标悬停时触发
- mouseout - 鼠标离开时触发
键盘和焦点事件
- focus - 链接获得焦点时触发
- blur - 链接失去焦点时触发
- keydown - 按键按下时触发
// 添加事件监听器示例
const link = document.getElementById("myLink");
link.addEventListener("click", function(event) {
console.log("链接被点击了!");
// event.preventDefault(); // 阻止默认行为
});
link.addEventListener("mouseover", function() {
this.style.backgroundColor = "yellow";
});
link.addEventListener("mouseout", function() {
this.style.backgroundColor = "";
});
Anchor 对象示例
动态创建链接
使用JavaScript动态创建Anchor对象并添加到页面中。