<a> 元素相关属性及方法
<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
字段。origin
:referer
字段的值是<a>
元素的origin
属性,即协议 + 主机名 + 端口。unsafe-url
:referer
字段的值是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.taodudu.cc/news/show-6887622.html
相关文章:
- html的a元素
- HTML5:<a>元素
- [开发框架]-Spring
- 开源框架专栏-spring(2)
- 初识Spring框架一
- 开发框架-Spring
- 框架--SpringWeb
- Java_Spring框架
- 开发框架-SpringMVC
- JavaWeb开发框架——SpringMVC
- 开源框架专栏-spring(1)
- 零基础学JavaWeb开发(二十)之 spring框架(3)
- Spring框架:Java领域的瑰宝
- JAVA开发(springBoot之HikariDataSource)
- Java小记-Spring框架(超级无敌认真好用,万字收藏篇!!!!)
- 一、初识 Spring 框架
- 【开发】后端框架——SpringMVC
- JAVA开发(Spring框架详解)
- 【愚公系列】2023年04月 Java教学课程 135-Spring MVC框架的概念和基本使用
- 计算机网络技术学什么?
- 计算机网络工程的目的是什么,网络工程专业的培养目标与专业特色是什么?
- 什么是电子计算机网络,计算机网络技术是什么
- 网络安全毕业生,请问2023年IT方向?
- 2022年it学什么专业好就业
- 不是IT相关专业的同学,可以转行做网络安全工程师吗?
- 高中毕业:网络安全是一个好的专业吗?
- 网络时代如何学习IT专业技能?
- 非计算机专业进入IT行业的三个方法,你是哪一个?
- 网络安全是一个好专业吗?
- 计算机专业还有前景吗?IT互联网企业要的是什么样的人才?
<a> 元素相关属性及方法相关推荐
- php点击后增加html元素,如何动态生成html元素以及为元素追加属性的方法介绍(附代码)...
本篇文章给大家分享的是关于如何动态生成html元素以及为元素追加属性的方法介绍(附代码),内容很不错,有需要的朋友可以参考一下,希望可以帮助到大家. 动态生成HTML元素的方法有三种: 第一种:doc ...
- jq追加html属性,jQuery 操作 HTML 元素和属性的方法
jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容: text().html() 以及 val()方法 My Test JQuery $( ...
- JavaScript 中BOM及window的相关属性及方法
概述:BOM (全称bowser object model) 浏览器对象模型,他是用于操作浏览器相关的内容.BOM是一个缺乏规范的东西,为了保证他的规范性产生了一系列的共用对象来解决这个问题.沿用至今 ...
- Java使用Jsoup爬虫获取网站内容(三)获取元素内容属性的方法
介绍 我们可以通过Jsoup来获取一个Document对象,然后通过对Document对象进行解析来获取元素对象,最后通过元素对象的一些方法来获取元素的属性名称,属性值以及文本内容. 代码 附上获取方 ...
- [js高手之路]原型对象(prototype)与原型链相关属性与方法详解
一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...
- java设计汽车为父类_JAVA设计一个汽车类作为父类,包含汽车的相关属性和方法。电动汽车,普通汽车,混合汽车,...
展开全部 亲手撸代码(建议也要多打打代码),觉得对就采纳: public class Car {//汽车父类 private int price;//价格 private String brand; ...
- VBA 打印设置相关属性及方法
打印设置说明,以下均为默认值.With ActiveSheet.PageSetup.PrintTitleRows = "" '工作表打印标题:顶端标题行(R).PrintTitle ...
- JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问 ...
- html元素自己属性代码,jQuery如何操作HTML的元素和属性?(代码详解例)
本篇文章给大家带来的内容是介绍jQuery如何操作HTML的元素和属性?(代码详解例),让大家了解jQuery操作元素和属性的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 1 ...
最新文章
- [云炬python3玩转机器学习笔记] 3-8Numpy中的聚合运算
- stl clocklist 查找元素_剑指信奥 C++ 之 STL 迭代器(上)
- 慎用window.showModalDialog()
- 前端学习(1315):路由
- h5微信本地调试 vue_vueh5中使用微信sdk
- Essential Grouping高性能的数据分组引擎介绍及下载
- 复星旅文冲刺港交所:上半年营收66亿 核心收入来自度假村
- 快速掌握粒子编辑器 —— onebyonedesign网页版
- opencv 基于haar特征的级联分类器实现图象识别原理
- 数据仓库开发之路之三--时间维度的创建
- 局域网内,两台电脑时间同步
- 简体中文与繁体中文互转
- iOS 聊天表情键盘
- 请开启微信或者手机定位服务器,微信在哪里设置定位(微信开启定位功能设置)...
- python编写判断素数的函数并找出前五个摩尼森数_五十八、如何对一个数进行分解质因数...
- MySQL——in和exists优化
- 【总结】DeepCTR如何构建模型
- Windows系统命令行安装软件的几种方式
- webpack设置不打包文件
- Python Tkinter颜色参考程序