HTML 中的 <a> 标签用于创建超链接,用户点击后可以跳转到另一个页面或指定的位置。在 JavaScript 中,我们可以通过 DOM 操作来获取和修改 <a> 标签的属性。
获取 <a> 标签对象
要获取 <a> 标签对象,我们可以使用 document.querySelector() 或 document.getElementById() 方法。
// 通过类名获取第一个 <a> 标签对象
const link = document.querySelector('a');
// 通过 id 获取 <a> 标签对象
const linkById = document.getElementById('linkId');获取和设置 <a> 标签的属性
我们可以通过获取 <a> 标签对象的属性来修改其内容、链接地址等属性。
-- -------------------- ---- ------- -- -- --- --- ---- -- ----- ---- - -------------------------- -- -- --- --- ---- -- ------------------------- --------------------------- -- -- --- ------- ----- ---- - --------------- -- -- --- ------- -------------- - ------ ----
监听 <a> 标签的点击事件
我们可以为 <a> 标签添加点击事件监听器,以便在用户点击时执行特定的操作。
link.addEventListener('click', function() {
alert('You clicked the link!');
});| 属性 | 描述 | W3C |
|---|---|---|
| charset | 设置或返回被链接资源的字符集。 | Yes |
| href | 设置或返回被链接资源的 URL。 | Yes |
| hreflang | 设置或返回被链接资源的语言代码。 | Yes |
| name | 设置或返回一个链接的名称。 | Yes |
| rel | 设置或返回当前文档与目标 URL 之间的关系。 | Yes |
| rev | 设置或返回目标 URL 与之间当前文档的关系。 | Yes |
| target | 设置或返回在何处打开链接。 | Yes |
| type | 设置或返回被链接资源的 MIME 类型。 | Yes |