HTML | DOM 链接对象(1)

📌 相关文章

📜 HTML | DOM 链接对象(1)

📅 最后修改于: 2023-12-03 15:01:14.319000 🧑 作者: Mango

HTML | DOM 链接对象

简介

HTML DOM Link 对象表示 HTML 中 <a> 元素，也就是链接。

可以使用如下方式创建 Link 对象：

let link = document.querySelector('a');

Link 对象可以用于获取、设置 HTML 元素的属性、样式和事件。

属性

以下是 Link 对象常用的属性：

href

获取或设置链接的 URL。用法如下：

let href = link.href;  // 获取链接的 URL
link.href = 'https://www.example.com';  // 设置链接的 URL

target

获取或设置链接的打开方式。用法如下：

let target = link.target;  // 获取链接的打开方式
link.target = '_blank';  // 设置链接在新标签页中打开

text

获取或设置链接的文本内容。用法如下：

let text = link.text;  // 获取链接的文本内容
link.text = '新文本内容';  // 设置链接的文本内容

方法

以下是 Link 对象常用的方法：

click()

模拟用户点击链接，触发链接的跳转事件。用法如下：

link.click();  // 模拟用户点击该链接

事件

以下是 Link 对象常用的事件：

click

链接被点击时触发该事件。用法如下：

link.addEventListener('click', function() {
  // 处理链接被点击时的事件
});

示例

以下是一个 Link 对象的示例。当链接被点击时，会在控制台中输出链接的 URL。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Link Object Example</title>
</head>
<body>
  <a href="https://www.example.com" target="_blank" id="my-link">点击跳转到 example.com</a>

  <script>
    let link = document.getElementById('my-link');
    link.addEventListener('click', function() {
      console.log(link.href);
    });
  </script>
</body>
</html>