Skip to content

11-网页元素接口

附录 网页元素接口

统计信息：字数 21385 阅读43分钟

2021-11-21 2023-04-10

<a\>

A元素表示链接，继承了Node、element 元素的API，同时具有 AnchorElement，HTMLHyperlinkElementUtils

下面是主要的属性和方法

1、URL

类似于Location对象的属性

// <a id="test" href="http://user:passwd@example.com:8081/index.html?bar=1#foo">test</a>
let a = document.getElementById('test');

a.hash

a.host

a.hostname

a.href

a.origin

a.pathname

a.port

a.prototol

a.search

2、属性

  • AccessKey 快捷键 a.accessKey = 'k'; // 按下快捷键会跳转到这个链接(浏览器兼容性)

  • download a.download = 'test.png'; 如果一个链接是一个图片或者是文件，那么设置这个属性后，点击链接会下载文件（弹出另存为对话框提示用户保存，这里设置的是下载的文件名）

  • hreflang = 'en' 设置跳转到目标网页的语言

  • referrerPolicy 可以设置点击链接后，设置HTTP请求头的referer字段（这个字段表示从什么地方来的）可以设置三个值：表示不发送referer字段，发送origin，发送origin+path(不包括井号片段，可能信息泄露) a.refererPolicy = 'no-referer' 'origin' 'unsafe-url';

  • rel 表示链接和当前文档的关系 a.rel = 'license';

  • tabIndex 表示使用Tab键遍历的顺序（数值） a.tabIndex = 3;

  • a.target = '_blank' 可以读写target属性（打开新的窗口）

  • text 属性，表示 textContent a.text

  • type 设置链接的mime属性 a.type = 'video/'

3、方法

a.blur()

a.focus()

a.toString()

<img\>

构造函数创建对象

let img = new Image(100, 200);
img.src = 'pic.png';
document.body.appendChild(img);

通过其他方法获取

document.images[0] instanceof HTMLImageElement

let img = document.getElementById('photo');
img instanceof HTMLImageElement

let img = document.createElement('img');
img instanceof HTMLImageElement

属性

  • img.src 获取图像的完整网址
  • currentSrc 返回当前正在显示的图片的网址（JS和CSS的媒体查询可能改变当前显示图片的src）
  • alt 返回文字说明
  • isMap 图像是否是服务器端图像映射的一部分

  • useMap 设置当前图像对应的MAP元素

  • img.width img.height 如果没有设置宽高，返回值是图片的原始宽高；如果图片没有加载，返回值是0.

  • img.naturalWidth img.naturalHeight 获取图片原始的高度
  • img.complete 表示图片是否加载完成（如果没有src属性，这个返回的也是true）
  • img.crossOrigin 表示跨域请求是否要求用户身份：'anonymous' 'use-credentials' 默认前者不要求身份
  • img.referrerPolicy 这里类似a标签：表示请求图像资源时，如何处理 HTTP 请求的referrer字段。
  • img.x img.y 返回图像距离左上角的XY坐标

事件

<img onload="loadImg()" onerror="loadError()"/>

图片响应式加载

img.srcset
img.sizes

var img = document.getElementById('myImg');
console.log(img.srcset)
// "example-320w.jpg 320w,
//  example-480w.jpg 480w,
//  example-800w.jpg 800w"
// 根据下面的尺寸，显示最接近计算值的图片

console.log(img.sizes)
// "(max-width: 320px) 280px,
//  (max-width: 480px) 440px,
//  800px"
// 如果屏幕小于320px, 图片显示 280px;屏幕在 320-480 显示图片 440px，以此类推

<form\>

let form = document.getElementById('form');
let f = document.createElement('form');
document.body.appendChild(f);
f.action = '/test/test.php';
f.method = 'GET';
f.submit();
  • form.elements 返回伪数组，是表单的所有控件
  • form.length 表单控件的数量
  • form.name
  • form.method === 'POST'
  • form.target 服务器返回后，数据显示的位置
  • form.action 表单提交数据的URL
  • form.enctype form.encoding 表单的编码方法 'application/x-www-form-urlencoded`、multipart/form-data和text/plain'
  • form.acceptCharset 返回服务器可以接受的字符编码
  • form.autocomplete 浏览器是否对input控件自动补全
  • form.noValidate 是否关闭表单的自动校验
  • form.submit(); 不会触发表单的submit事件和自动校验。
  • form.reset();
  • form.checkValidity(); 自动校验，如果是false，触发invalid事件

<input\>

input 组件继承了 HTMLInputElement 组件的API，input种类很多，所以属性不同

基本属性

input.name
input.type
input.disabled
input.autofocus
input.value
input.required 是否为必填项
input.validity 只读，返回input的校验情况，返回一个对象
input.validationMessage 只读，表示校验失败后用户看到的信息
input.willValidate 只读，表示表单提交时，这个输入框是否被校验

表单属性

input.form 返回input所在的form节点
formAction 改变表单元素的action属性
formEnctype 返回表单的编码方式
formMethod 
formValidate
formTarget

文本输入框属性

input type='text'

autocomplete = 'off' 'on' 是否可以被自动补全
maxLength 表示最大输入的字符串数
size 表示input节点的显示长度（或者字符个数）
pattern input的值需要符合正则表达式
placeholder(不能包括回车和换行)
readOnly
min max 表示这个输入框的最大最小数值和日期
selectionStart selectionEnd 表示选中文本的开始或者结束位置
selectionDirection 表示选中文本的方向（正向反向）

选择框属性

checkbox 复选框 radio 单选框

checked 表示是否被选中
defaultChecked 表示是否默认选中
indeterminate 表示该<input>元素是否还没有确定的状态。一旦用户点击过一次，该属性就会变成false，表示用户已经给出确定的状态了。该属性可读写。(这个单词意思：不确定的)

图像属性

input type='image' 属性 alt height src width

文件上传属性

input type='file' accept='text/plain' files 可以获取上传的文件对象伪数组

其他属性

defaultValue
dirName 文字方向
accessKey 字符串，表示让input获得焦点的快捷键
list 返回一个datalist
multiple 是否选择多个值
labels 返回一个节点List 表示当前input的label元素
step 表示在一个区间内（min-max）每次增减的数值或者时间
valueAsDate 设置指定的日期（input元素）
valueAsNumber 设置指定的数值

方法

  • focus()：当前<input>元素获得焦点。
  • blur()：移除<input>元素的焦点。
  • select()：选中<input>元素内部的所有文本。最好先用focus()方法聚焦，再用这个方法获取内部文本
  • click()：模拟鼠标点击当前的<input>元素。
  • setSelectionRange()：选中<input>元素内部的一段文本，但不会将焦点转移到选中的文本。该方法接受三个参数，第一个参数是开始的位置（从0开始），第二个参数是结束的位置（不包括该位置），第三个参数是可选的，表示选择的方向，有三个可能的值（forward、backward和默认值none）。
  • setRangeText()：新文本替换选中的文本。该方法接受四个参数，第一个参数是新文本，第二个参数是替换的开始位置，第三个参数是结束位置，第四个参数表示替换后的行为（可选），有四个可能的值：select（选中新插入的文本）、start（选中的开始位置移到插入的文本之前）、end（选中的文本移到插入的文本之后）、preserve（保留原先选中的位置，默认值）。
  • setCustomValidity()：该方法用于自定义校验失败时的报错信息。它的参数就是报错的提示信息。注意，一旦设置了自定义报错信息，该字段就不会校验通过了，因此用户重新输入时，必须将自定义报错信息设为空字符串，请看下面的例子。
  • checkValidity()：返回一个布尔值，表示当前节点的校验结果。如果返回false，表示不满足校验要求，否则就是校验成功或不必校验。
  • stepDown()：将当前<input>节点的值减少一个步长。该方法可以接受一个整数n作为参数，表示一次性减少n个步长，默认是1。有几种情况会抛错：当前<input>节点不适合递减或递增、当前节点没有step属性、<input>节点的值不能转为数字、递减之后的值小于min属性或大于max属性。
  • stepUp()：将当前<input>节点的值增加一个步长。其他与stepDown()方法相同。

下面是setSelectionRange()方法的一个例子。

/* HTML 代码如下
  <p><input type="text" id="mytextbox" size="20" value="HelloWorld"/></p>
  <p><button onclick="SelectText()">选择文本</button></p>
*/

function SelectText() {
  var input = document.getElementById('mytextbox');
  input.focus();
  input.setSelectionRange(2, 5);
}

上面代码中，点击按钮以后，会选中llo三个字符。

下面是setCustomValidity()的例子。

/* HTML 代码如下
  <form id="form">
    <input id="field" type="text" pattern="[a-f,0-9]{4}" autocomplete=off>
  </form>
*/

const form   = document.querySelector('#form');
const field  = document.querySelector('#field');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // 防止这个例子发出 POST 请求
});

field.oninvalid = (event) => {
  event.target.setCustomValidity('必须是一个 4 位十六进制数');
}

field.oninput = (event) => {
  event.target.setCustomValidity('');
}

上面代码中，输入框必须输入一个4位的十六进制数。如果不满足条件（比如输入xxx），按下回车键以后，就会提示自定义的报错信息。一旦自定义了报错信息，输入框就会一直处于校验失败状态，因此重新输入时，必须把自定义报错信息设为空字符串。另外，为了避免自动补全提示框遮住报错信息，必须将输入框的autocomplete属性关闭。

<button>

<button>元素继承了HTMLButtonElement接口。属性：

button.accessKey
button.autofocus
button.disabled
button.form
button.formAction
button.formEnctype 'application/x-www-form-urlencoded' 'multipart/form-data' 'text/plain'
button.formMethod
button.formNoValidate 表示点击按钮提交表单时，是否要跳过表单校验的步骤
button.formTarget
button.labels
button.name
button.tabIndex
button.type 'submit' 'reset' 'button'
button.validationMessage
button.validity
button.value
button.willValidate

<option>

<option>元素表示下拉框（<select>，<optgroup>或<datalist>）里面的一个选项。主要属性

option.disabled
option.defaultSelected
option.form
option.index
option.selected
option.text
option.value

浏览器原生提供Option()构造函数，用来生成 HTMLOptionElement 实例。

new Option(text, value, defaultSelected, selected);
let newOption = new Option('hello','10', true, false);

它接受四个参数，都是可选的。

  • text：字符串，表示该选项的文本内容。如果省略，返回空字符串。
  • value：字符串，表示该选项的值。如果省略，默认返回text属性的值。
  • defaultSelected：布尔值，表示该项是否默认选中，默认为false。注意，即使设为true，也不代表该项的selected属性为true。
  • selected：布尔值，表示该项是否选中，默认为false。

<video><audio>

概述

<video>元素用来加载视频，是HTMLVideoElement对象的实例。

<audio>元素用来加载音频，是HTMLAudioElement对象的实例。

而HTMLVideoElement和HTMLAudioElement都继承了HTMLMediaElement，所以这两个 HTML 元素有许多共同的属性和方法，可以放在一起介绍。

理论上，这两个 HTML 元素直接用src属性指定媒体文件，就可以使用了。

<audio src="background_music.mp3" controls="true"/>
<video src="news.mov" width=320 height=240 controls="true"/>

注意，<video>元素有width属性和height属性，可以指定宽和高。<audio>元素没有这两个属性，因为它的播放器外形是浏览器给定的，不能指定。

实际上，不同的浏览器支持不同的媒体格式，我们不得不用<source>元素指定同一个媒体文件的不同格式，浏览器遇到支持的格式，就会忽略后面的格式。这里可以解决兼容性。

<audio id="music">
  <source src="music.mp3" type="audio/mpeg">  
  <source src="music.ogg" type='audio/ogg; codec="vorbis"'>
</audio>

Media公共API

HTMLMediaElement并没有对应的 HTML 元素，而是作为<video>和<audio>的基类，定义一些它们共同的属性和方法。

属性

  • HTMLMediaElement.audioTracks：返回一个类似数组的对象，表示媒体文件包含的音轨。
  • HTMLMediaElement.autoplay：布尔值，表示媒体文件是否自动播放，对应 HTML 属性autoplay。
  • HTMLMediaElement.buffered：返回一个 TimeRanges 对象，表示浏览器缓冲的内容。该对象的length属性返回缓存里面有多少段内容，start(rangeId)方法返回指定的某段内容（从0开始）开始的时间点，end()返回指定的某段内容结束的时间点。该属性只读。
  • HTMLMediaElement.controls：布尔值，表示是否显示媒体文件的控制栏，对应 HTML 属性controls。
  • HTMLMediaElement.controlsList：返回一个类似数组的对象，表示是否显示控制栏的某些控件。该对象包含三个可能的值：nodownload、nofullscreen和noremoteplayback。该属性只读。
  • HTMLMediaElement.crossOrigin：字符串，表示跨域请求时是否附带用户信息（比如 Cookie），对应 HTML 属性crossorigin。该属性只有两个可能的值：anonymous和use-credentials。
  • HTMLMediaElement.currentSrc：字符串，表示当前正在播放的媒体文件的绝对路径。该属性只读。
  • HTMLMediaElement.currentTime：浮点数，表示当前播放的时间点。
  • HTMLMediaElement.defaultMuted：布尔值，表示默认是否关闭音量，对应 HTML 属性muted。
  • HTMLMediaElement.defaultPlaybackRate：浮点数，表示默认的播放速率，默认是1.0。
  • HTMLMediaElement.disableRemotePlayback：布尔值，是否允许远程回放，即远程回放的时候是否会有工具栏。
  • HTMLMediaElement.duration：浮点数，表示媒体文件的时间长度（单位秒）。如果当前没有媒体文件，该属性返回0。该属性只读。
  • HTMLMediaElement.ended：布尔值，表示当前媒体文件是否已经播放结束。该属性只读。
  • HTMLMediaElement.error：返回最近一次报错的错误对象，如果没有报错，返回null。
  • HTMLMediaElement.loop：布尔值，表示媒体文件是否会循环播放，对应 HTML 属性loop。
  • HTMLMediaElement.muted：布尔值，表示音量是否关闭。
  • HTMLMediaElement.networkState：当前网络状态，共有四个可能的值。0表示没有数据；1表示媒体元素处在激活状态，但是还没开始下载；2表示下载中；3表示没有找到媒体文件。
  • HTMLMediaElement.paused：布尔值，表示媒体文件是否处在暂停状态。该属性只读。
  • HTMLMediaElement.playbackRate：浮点数，表示媒体文件的播放速度，1.0是正常速度。如果是负数，表示向后播放。
  • HTMLMediaElement.played：返回一个 TimeRanges 对象，表示播放的媒体内容。该属性只读。
  • HTMLMediaElement.preload：字符串，表示应该预加载哪些内容，可能的值为none、metadata和auto。
  • HTMLMediaElement.readyState：整数，表示媒体文件的准备状态，可能的值为0（没有任何数据）、1（已获取元数据）、2（可播放当前帧，但不足以播放多个帧）、3（可以播放多帧，至少为两帧）、4（可以流畅播放）。该属性只读。
  • HTMLMediaElement.seekable：返回一个 TimeRanges 对象，表示一个用户可以搜索的媒体内容范围。该属性只读。
  • HTMLMediaElement.seeking：布尔值，表示媒体文件是否正在寻找新位置。该属性只读。
  • HTMLMediaElement.src：布尔值，表示媒体文件的 URL，对应 HTML 属性src。
  • HTMLMediaElement.srcObject：返回src属性对应的媒体文件资源，可能是MediaStream、MediaSource、Blob或File对象。直接指定这个属性，就可以播放媒体文件。
  • HTMLMediaElement.textTracks：返回一个类似数组的对象，包含所有文本轨道。该属性只读。
  • HTMLMediaElement.videoTracks：返回一个类似数组的对象，包含多有视频轨道。该属性只读。
  • HTMLMediaElement.volume：浮点数，表示音量。0.0 表示静音，1.0 表示最大音量。

方法

  • HTMLMediaElement.addTextTrack()：添加文本轨道（比如字幕）到媒体文件。
  • HTMLMediaElement.captureStream()：返回一个 MediaStream 对象，用来捕获当前媒体文件的流内容。
  • HTMLMediaElement.canPlayType()：该方法接受一个 MIME 字符串作为参数，用来判断这种类型的媒体文件是否可以播放。该反复返回一个字符串，有三种可能的值，probably表示似乎可播放，maybe表示无法在不播放的情况下判断是否可播放，空字符串表示无法播放。
  • HTMLMediaElement.fastSeek()：该方法接受一个浮点数作为参数，表示指定的时间（单位秒）。该方法将媒体文件移动到指定时间。
  • HTMLMediaElement.load()：重新加载媒体文件。
  • HTMLMediaElement.pause()：暂停播放。该方法没有返回值。
  • HTMLMediaElement.play()：开始播放。该方法返回一个 Promise 对象。

下面是play()方法的一个例子。

let myVideo = docuement.getElementById('video-me');

myVideo.play().then(() => {
  console.log('playing')
}).catch((e) => {
  console.log(e);
});

Video API

HTMLVideoElement接口代表了<video>元素。这个接口继承了HTMLMediaElement接口，并且有一些自己的属性

  • height：字符串，表示视频播放区域的高度（单位像素），对应 HTML 属性height。
  • width：字符串，表示视频播放区域的宽度（单位像素），对应 HTML 属性width。
  • videoHeight：该属性只读，返回一个整数，表示视频文件自身的高度（单位像素）。
  • videoWidth：该属性只读，返回一个整数，表示视频文件自身的宽度（单位像素）。
  • poster：字符串，表示一个图像文件的 URL，用来在无法获取视频文件时替代显示，对应 HTML 属性poster。
  • getVideoPlaybackQuality()：返回一个对象，包含了当前视频回访的一些数据。

Audio API

HTMLAudioElement接口代表了<audio>元素。

该接口继承了HTMLMediaElement，但是没有定义自己的属性和方法。浏览器原生提供一个Audio()构造函数，返回的就是HTMLAudioElement实例。

var song = new Audio([URLString]);

Audio()构造函数接受一个字符串作为参数，表示媒体文件的 URL。如果省略这个参数，可以稍后通过src属性指定。

生成HTMLAudioElement实例以后，不用插入 DOM，可以直接用play()方法在背景播放。

var a = new Audio();
if (a.canPlayType('audio/wav')) {
  a.src = 'soundeffect.wav';
  a.play();
}

公共事件

<video>和<audio>元素有以下事件。

  • loadstart：开始加载媒体文件时触发。
  • progress：媒体文件加载过程中触发，大概是每秒触发2到8次。
  • loadedmetadata：媒体文件元数据加载成功时触发。
  • loadeddata：当前播放位置加载成功后触发。
  • canplay：已经加载了足够的数据，可以开始播放时触发，后面可能还会请求数据。
  • canplaythrough：已经加载了足够的数据，可以一直播放时触发，后面不需要继续请求数据。
  • suspend：已经缓冲了足够的数据，暂时停止下载时触发。
  • stalled：尝试加载数据，但是没有数据返回时触发。
  • play：调用play()方法时或自动播放启动时触发。如果已经加载了足够的数据，这个事件后面会紧跟playing事件，否则会触发waiting事件。
  • waiting：由于没有足够的缓存数据，无法播放或播放停止时触发。一旦缓冲数据足够开始播放，后面就会紧跟playing事件。
  • playing：媒体开始播放时触发。
  • timeupdate：currentTime属性变化时触发，每秒可能触发4到60次。
  • pause：调用pause()方法、播放暂停时触发。
  • seeking：脚本或者用户要求播放某个没有缓冲的位置，播放停止开始加载数据时触发。此时，seeking属性返回true。
  • seeked：seeking属性变回false时触发。
  • ended：媒体文件播放完毕时触发。
  • durationchange：duration属性变化时触发。
  • volumechange：音量变回或者静音时触发。
  • ratechange：播放速度或默认的播放速度变化时触发。
  • abort：停止加载媒体文件时触发，通常是用户主动要求停止下载。
  • error：网络或其他原因导致媒体文件无法加载时触发。
  • emptied：由于error或abort事件导致networkState属性变成无法获取数据时触发。
Last update: November 9, 2024