<a> 元素相关属性及方法

news/2024/5/24 11:13:24/

<a> 元素

<a>元素用来设置链接。除了网页元素的通用接口(Node接口、Element接口、HTMLElement接口),它还继承了HTMLAnchorElement接口和HTMLHyperlinkElementUtils接口。

目录
  • 属性
    • URL 相关属性
    • accessKey 属性
    • download 属性
    • hreflang 属性
    • referrerPolicy 属性
    • rel 属性
    • tabIndex 属性
    • target 属性
    • text 属性
    • type 属性
  • 方法

属性 #

URL 相关属性 #

<a>元素有一系列 URL 相关属性,可以用来操作链接地址。这些属性的含义,可以参见Location对象的实例属性。

  • hash:片段识别符(以#开头)
  • host:主机和端口(默认端口80和443会省略)
  • hostname:主机名
  • href:完整的 URL
  • origin:协议、域名和端口
  • password:主机名前的密码
  • pathname:路径(以/开头)
  • port:端口
  • protocol:协议(包含尾部的冒号:
  • search:查询字符串(以?开头)
  • username:主机名前的用户名
// HTML 代码如下
// <a id="test" href="http://user:passwd@example.com:8081/index.html?bar=1#foo">test</a>
var a = document.getElementById('test');
a.hash // "#foo"
a.host // "example.com:8081"
a.hostname // "example.com"
a.href // "http://user:passed@example.com:8081/index.html?bar=1#foo"
a.origin // "http://example.com:8081"
a.password // "passwd"
a.pathname // "/index.html"
a.port // "8081"
a.protocol // "http:"
a.search // "?bar=1"
a.username // "user"

除了origin属性是只读的,上面这些属性都是可读写的。

accessKey 属性 #

accessKey属性用来读写<a>元素的快捷键。

// HTML 代码如下
// <a id="test" href="http://example.com">test</a>
var a = document.getElementById('test');
a.accessKey = 'k';

上面代码设置<a>元素的快捷键为k,以后只要按下这个快捷键,浏览器就会跳转到example.com

注意,不同的浏览器在不同的操作系统下,唤起快捷键的功能键组合是不一样的。比如,Chrome 浏览器在 Linux 系统下,需要按下Alt + k,才会跳转到example.com

download 属性 #

download属性表示当前链接不是用来浏览,而是用来下载的。它的值是一个字符串,表示用户下载得到的文件名。

// HTML 代码如下
// <a id="test" href="foo.jpg">下载</a>
var a = document.getElementById('test');
a.download = 'bar.jpg';

上面代码中,<a>元素是一个图片链接,默认情况下,点击后图片会在当前窗口加载。设置了download属性以后,再点击这个链接,就会下载对话框,询问用户保存位置,而且下载的文件名为bar.jpg

hreflang 属性 #

hreflang属性用来读写<a>元素的 HTML 属性hreflang,表示链接指向的资源的语言,比如hreflang="en"

// HTML 代码如下
// <a id="test" href="https://example.com" hreflang="en">test</a>
var a = document.getElementById('test');
a.hreflang // "en"

referrerPolicy 属性 #

referrerPolicy属性用来读写<a>元素的 HTML 属性referrerPolicy,指定当用户点击链接时,如何发送 HTTP 头信息的referer字段。

HTTP 头信息的referer字段,表示当前请求是从哪里来的。它的格式可以由<a>元素的referrerPolicy属性指定,共有三个值可以选择。

  • no-referrer:不发送referer字段。
  • originreferer字段的值是<a>元素的origin属性,即协议 + 主机名 + 端口。
  • unsafe-urlreferer字段的值是origin属性再加上路径,但不包含#片段。这种格式提供的信息最详细,可能存在信息泄漏的风险。
// HTML 代码如下
// <a id="test" href="https://example.com" referrerpolicy="no-referrer">test</a>
var a = document.getElementById('test');
a.referrerPolicy // "no-referrer"

rel 属性 #

rel属性用来读写<a>元素的 HTML 属性rel,表示链接与当前文档的关系。

// HTML 代码如下
// <a id="test" href="https://example.com" rel="license">license.html</a>
var a = document.getElementById('test');
a.rel // "license"

tabIndex 属性 #

tabIndex属性的值是一个整数,用来读写当前<a>元素在文档里面的 Tab 键遍历顺序。

// HTML 代码如下
// <a id="test" href="https://example.com">test</a>
var a = document.getElementById('test');
a.tabIndex // 0

target 属性 #

target属性用来读写<a>元素的 HTML 属性target

// HTML 代码如下
// <a id="test" href="https://example.com" target="_blank">test</a>
var a = document.getElementById('test');
a.target // "_blank"

text 属性 #

text属性用来读写<a>元素的链接文本,等同于当前节点的textContent属性。

// HTML 代码如下
// <a id="test" href="https://example.com">test</a>
var a = document.getElementById('test');
a.text // "test"

type 属性 #

type属性用来读写<a>元素的 HTML 属性type,表示链接目标的 MIME 类型。

// HTML 代码如下
// <a id="test" type="video/mp4" href="example.mp4">video</a>
var a = document.getElementById('test');
a.type // "video/mp4"

方法 #

<a>元素的方法都是继承的,主要有以下三个。

  • blur():从当前元素移除键盘焦点,详见HTMLElement接口的介绍。
  • focus():当前元素得到键盘焦点,详见HTMLElement接口的介绍。
  • toString():返回当前<a>元素的 HTML 属性href

http://www.ppmy.cn/news/48139.html

相关文章

linux及openEuler破解root密码

第一步&#xff1a;开机的时候按键盘的字母 E 键&#xff0c; 进入引导模式 第二步&#xff1a;进入引导模式 &#xff1a;找到linux这一行&#xff0c;按键盘上的end 键&#xff0c;跳转到行尾&#xff0c;输入&#xff1a; init/bin/sh 修改完后&#xff0c;按键盘上的 ctr…

上海车展:比亚迪宋L概念车全球首发,这是要硬扛特斯拉?

纵观2023年的新能源汽车市场&#xff0c;特斯拉可以说当仁不让地成为了全球最为“吸睛”的车企之一。凭借一系列令无数人瞠目结舌的降价举措&#xff0c;特斯拉给全球汽车市场带来了强烈冲击。虽然特斯拉上海工厂已经接近满负荷运转&#xff0c;但是面对雪片般飞来的订单依然供…

python学习——缺失值、重复值处理、排序及替换

文章目录 1 缺失值处理1.1 查看缺失值 df.isnull()1.2 统计缺失值 df.isnull().sum()1.3 删除缺失值 df.drop()1.4 填充缺失值 df.fillna()1.4.1 固定值填充 df.fillna(value)1.4.2 线性插值填充 df.fillna(df.interpolate()) 2 重复值处理2.1 查看重复值 df.duplicated()2.2 筛…

docker简单教程(三)常用操作

docker简单教程&#xff08;三&#xff09;常用操作 文章目录 docker简单教程&#xff08;三&#xff09;常用操作1&#xff1a;查看所有容器列表&#xff1a;docker ps -a2&#xff1a;查看正在运行的容器列表&#xff1a;docker ps3&#xff1a;运行容器&#xff1a;docker r…

测牛学堂:2023软件测试linux和shell脚本入门系列(shell的运算符)

shell中的注释 以# 开头的就是shell中的注释&#xff0c;不会被执行&#xff0c;是给编程的人看的。 shell中的运算符 shell中有很多运算符。 按照分类&#xff0c;可以分为算术运算符&#xff0c;关系运算符&#xff0c;布尔运算符&#xff0c;字符串运算符&#xff0c;文件…

把树莓派改造成无线软路由器(2)-----无线路由器模式(独立无线路由器)

本文目录 1、准备工作2、安装无线AP和管理软件3、设置网络路由3.1、树莓派的无线网络接口IP配置3.2、启用路由和IP伪装3.3、为无线网络配置DHCP和DNS服务 4、确认无线配置5、配置 AP 软件6、运行wifi无线AP 树莓派可用作网络中的一个wifi无线路由器。让使用无线接入的计算机和设…

sqlserver用SQL脚本进行备份和还原操作

--1.1备份数据库脚本 USE [master] GO BACKUP DATABASE [Test] TO DISK D:\Test\Test_20230419.bak GO --1.2还原数据库,注意一定要用NORECOVERY还原备份 USE [master] GO RESTORE DATABASE [Test] FROM DISKND:\Test\Test_20230419.bak WITH FILE 1, MOVE NTest TO ND:\Test…

后缀数组的应用:最长公共子串

题目描述 假设 str1 长度为 N N N&#xff0c;str2 长度为 M M M&#xff0c;求 str1 和 str2 的最长公共子串。 思路分析 示例&#xff1a;str1 “12abcd456”, str2 “7abcd89”&#xff0c;则str1和str2的最长公共子串为 abcd。 注意&#xff0c;子串是连续的。 动…

C. Anna, Svyatoslav and Maps(floyd + 思维)

Problem - C - Codeforces 给你一个有n个顶点的无权图&#xff0c;以及由m个顶点的序列p1,p2,...,pm给出的路径&#xff08;该路径不一定简单&#xff09;&#xff1b;对于每个1≤i<m&#xff0c;有一个弧从pi到pi1。 如果v是p的子序列&#xff0c;v1p1&#xff0c;vkpm&a…

JavaScript有几种数据类型,分别是什么?

在JavaScript中&#xff0c;我们可以分成两种类型&#xff1a;基本类型 复杂类型&#xff08;引用类型&#xff09; 两种类型的区别是&#xff1a;存储位置不同 基本类型主要为以下六种&#xff1a; Number、String、Boolean、Undefined、Null、Symbol 复杂类型/引用类型统称为…

C++ const关键字

参考资料&#xff1a; 【C const的各种用法详解】【const用法深入浅出】 - COS - 博客园 (cnblogs.com) const的基本概念&#xff1a; const名叫常量限定符&#xff0c;用来限定特定变量&#xff0c;以通知编译器该变量是不可修改的。习惯性的使用const&#xff0c;可以避免在函…

PostgreSQL环境搭建和主备构建

目录 1 Windows 上安装 PostgreSQL2 docker安装PostgreSQL2.1 检索当前镜像2.2. 拉取当前镜像2.3 创建挂载文件夹2.4 启动镜像2.5 查看日志2.7 查看进程2.8 使用连接 3 postgresql主从主备搭建3.1 安装好网络源&#xff08;主1.11、从1.12&#xff09;3.2 安装postgresql&#…

Python OpenCV 3.x 示例:1~5

原文&#xff1a;OpenCV 3.x with Python By Example 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【ApacheCN 计算机视觉 译文集】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 当别人说你没有底线的时候&#xff0c;你最…

一定要会的算法复杂度分析

本文首发自「慕课网」&#xff0c;想了解更多IT干货内容&#xff0c;程序员圈内热闻&#xff0c;欢迎关注"慕课网"&#xff01; 原作者&#xff1a;s09g|慕课网讲师 我们知道面对同一道问题时可能有多种解决方案。自然地&#xff0c;我们会将多种方法进行比较。那么…

同样是测试,朋友到了30k,我才12K,这份测试面试8股文确实牛

程序猿在世人眼里已经成为高薪、为人忠诚的代名词。 然而&#xff0c;小编要说的是&#xff0c;不是所有的程序员工资都是一样的。 世人所不知的是同为程序猿&#xff0c;薪资的差别还是很大的。 众所周知&#xff0c;目前互联网行业是众多行业中薪资待遇最好的&#xff0c;…

Leetcode33.搜索旋转排列数组

搜索旋转排列数组 一、题目描述&#xff1a;二、解决思路和代码1. 解决思路2. 代码 一、题目描述&#xff1a; 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length…

【Unity VR开发】结合VRTK4.0:添加遮蔽追踪器

语录&#xff1a; 恋爱应该是双方扶持对方共同完成自己的目标&#xff0c;而不是虚幻的思想、肤浅的物质、和纸醉金迷的生活。 前言&#xff1a; 遮蔽追踪器&#xff08;Trackers.ObscuranceTracker&#xff09;是基于游戏对象存在或不可见之间切换对象的状态&#xff0c;从而遮…

Ajax超详解(新手入门指南)

文章目录 1. AJAX简介2. 前后端交互3. XHR3.1 XMLHttpRequest对象3.2 获取模拟的后端数据3.3 获取网络数据3.4 使用json-server模拟服务器3.4.1 安装node.js3.4.2 安装并使用json-server 3.5 常见的请求方式3.5.1 GET请求3.5.2 POST请求3.5.3 PUT请求3.5.4 PATCH请求3.5.5 DELE…

面试题30天打卡-day10

1、String 和 StringBuffer、StringBuilder 的区别是什么&#xff1f; String、StringBuffer、StringBuilder主要的区别在于执行效率和线程安全上。 String&#xff1a;String字符串常量&#xff0c;意味着它是不可变的&#xff0c;导致每次对String都会生成新的String对象&a…

网络工程师经常搞混的路由策略和策略路由,两者到底有啥区别?

当涉及到网络路由时&#xff0c;两个术语经常被混淆&#xff1a;策略路由和路由策略。虽然这些术语听起来很相似&#xff0c;但它们实际上有着不同的含义和用途。在本文中&#xff0c;我们将详细介绍这两个术语的区别和应用。 一、路由策略 路由策略是指一组规则&#xff0c;用…