内联元素对象

yuhuo2022-02-19JavaScriptJavaScript对象

说明

标记了布尔的属性为布尔属性，即在 html 节点代码中只要包含该属性，则为 true，无需赋值，也不论赋任意值；
未标记为布尔属性的其他属性，其值也可能为布尔值，如 complete，willValidate；
长度，宽度，高度，坐标等默认单位都为 px；

HTMLAnchorElement 类

1. 创建对象

2. 原型属性

原型属性	类型	描述
`href`	string	完整 URL（http://username:password@127.0.0.1:5502/WebNote/demo.html?search=a#hash）
`origin`	string	协议 + 主机名 + 端口（http://127.0.0.1:5502）
`protocol`	string	协议（http:）
`username`	string	主机名前的用户名（username）
`password`	string	主机名前的密码（password）
`host`	string	主机名 + 端口（127.0.0.1:5502）
`hostname`	string	主机名（127.0.0.1）
`port`	string	端口（5502）
`pathname`	string	路径（/WebNote/demo.html）
`search`	string	查询（?search=key）
`hash`	string	锚（#hash）
`download`	string	文件下载名（有设置时表示当前是下载链接，不是浏览链接）
`hreflang`	string	链接指向的资源的语言
`referrerPolicy`	string	访问链接时 HTTP 头携带的 referer 字段 no-referrer：无 origin：协议 + 主机名 + 端口 unsafe-url：完整url，不包含锚（默认）
`rel`	string	链接与当前文档的关系
`target`	string	链接打开位置：_blank 新窗口，_self 自身窗口（默认），_parent 父窗口，_top 顶层窗口
`text`	string	链接文本
`type`	string	链接目标的 MIME 类型

HTMLImageElement 类

1. 创建对象

img 元素

脚本创建

// 图片实际宽高
var img = new Image();
// 指定宽高 new Image(width, height)
var img = new Image(100, 100);

2. 原型属性

原型属性	类型	描述
`src`	string	图片 URL
`width`	number	图片宽度
`height`	number	图片高度
`naturalWidth`	number	图片实际宽度
`naturalHeight`	number	图片实际高度
`x`	number	图像左上角相对于页面左上角的横坐标
`y`	number	图像左上角相对于页面左上角的纵坐标
`alt`	string	图片显示异常时的文字说明
`complete`	boolean	返回图片是否加载完成（如果没有 src，也会返回 true）
`crossOrigin`	string	跨域设置： null 允许跨域（默认） anonymous 跨域请求不要求用户身份 use-credentials 跨域请求要求用户身份
`referrerPolicy`	string	访问图片时 HTTP 头携带的 referer 字段 no-referrer：无 no-referrer-when-downgrade：不是 HTTPS 时则无（默认） origin：协议 + 主机名 + 端口 origin-when-cross-origin：同源则同 unsafe-url，否则同 origin unsafe-url：完整url（不包含锚）
`useMap`	string	图像对应的 `<map>` 元素的 name（前面需要加 # 号）
`currentSrc`	string	当前图片 URL ???
`isMap` 布尔	boolean	当图片作为 a 元素的后代元素时，点击图片，是否将点击的坐标（相对于图片左上角）追加到跳转链接的查询参数中（示例 xx?6,7）
`srcset`	string	多个不同宽度的图片路径 ???
`sizes`	string	不同条件下使用的图片宽度 ???

HTMLMapElement 类

1. 创建对象

map 元素

2. 原型属性

原型属性	类型	描述
`name`	string	名称
`areas`	HTMLCollection	返回关联 HTMLAreaElement 对象的 HTMLCollection 对象

HTMLAreaElement 类

1. 创建对象

area 元素

2. 原型属性

原型属性	类型	描述
`shape`	string	区域形状，取值：rect 矩形，circle 圆形，poly 多边形
`coords`	string	区域坐标
`alt`	string	区域显示异常时的文字说明
`href`	string	完整 URL（http://username:password@127.0.0.1:5502/WebNote/demo.html?search=a#hash）
`origin`	string	协议 + 主机名 + 端口（http://127.0.0.1:5502）
`protocol`	string	协议（http:）
`username`	string	主机名前的用户名（username）
`password`	string	主机名前的密码（password）
`host`	string	主机名 + 端口（127.0.0.1:5502）
`hostname`	string	主机名（127.0.0.1）
`port`	string	端口（5502）
`pathname`	string	路径（/WebNote/demo.html）
`search`	string	查询（?search=key）
`hash`	string	锚（#hash）
`download`	string	文件下载名（有设置时表示当前是下载链接，不是浏览链接）
`hreflang`	string	链接指向的资源的语言
`referrerPolicy`	string	访问链接时 HTTP 头携带的 referer 字段 no-referrer：无 origin：协议 + 主机名 + 端口 unsafe-url：完整url，不包含锚（默认）
`rel`	string	链接与当前文档的关系
`target`	string	链接打开位置：_blank 新窗口，_self 自身窗口（默认），_parent 父窗口，_top 顶层窗口
`type`	string	链接目标的 MIME 类型

HTMLLabelElement 类

1. 创建对象

label 元素

2. 原型属性

原型属性	类型	描述
`htmlFor`	string	关联的表单元素的 id，对应 label 标签的 for 属性
`control`	HTML	返回关联的表单元素对象
`form`	HTMLFormElement	返回所在表单对象

说明

label 元素的作用是关联表单元素，当 label 元素被点击时，关联的表单元素会获得焦点，在单选框，多选框中可以用于辅助选中。

HTMLInputElement 类

1. 创建对象

input 元素

2. 原型属性

	原型属性	类型	描述
特征属性	`name`	string	名称
	`value`	string	值
	`type`	string	类型
	`disabled` 布尔	boolean	是否禁用，默认 false（禁用时表单提交不要包含）
	`autofocus` 布尔	boolean	是否自动获得焦点，默认 false
	`required` 布尔	boolean	是否必填，默认 false
	`validity`	ValidityState	返回校验状态的 ValidityState 对象
	`validationMessage`	string	返回校验失败时的报错信息，如果不需要检验或检验成功，返回空字符串。
	`willValidate`	boolean	返回表单提交时当前 input 是否会被校验
	==============		==============
表单属性	`form`	HTMLFormElement	返回所在表单对象
	`formAction`	string	表单提交的 URL
	`formEncType`	string	表单提交的编码方法
	`formMethod`	string	表单提交时的 HTTP 方法
	`formNoValidate` 布尔	boolean	是否关闭表单的自动校验，默认 false
	`formTarget`	string	表单提交后，服务器返回的数据的展示位置
	==============		==============
文本属性	`autocomplete`	string	是否开启自动补全：on 开启，off 关闭
	`maxLength`	number	输入的字符串最大长度
	`size`	number	input 显示长度（text 或 password 时表示字符个数，否则表示像素）
	`pattern`	string	应该满足的正则表达式
	`placeholder`	string	提示文本
	`readOnly` 布尔	boolean	是否只读，默认 false
	`min`	number	最小数值或日期
	`max`	number	最大数值或日期
	`step`	number	递增递减的步长
	`selectionStart`	number	选中文本的起始位置
	`selectionEnd`	number	选中文本的结束位置
	`selectionDirection`	string	选中文本的方向：forward 与文字书写方向一致，backward 相反，none 未知
	==============		==============
图片属性	`width`	number	图片宽度数值
	`height`	number	图片高度数值
	`src`	string	图片 URL
	`alt`	string	图片显示异常时的文字说明
	==============		==============
文件属性	`accept`	string	可以接受的文件类型
	`files`	FileList	选中的一组文件的 FileList 对象
	`multiple` 布尔	boolean	是否可以选择多个文件，默认 false
	==============		==============
选择属性	`checked` 布尔	boolean	是否选中，默认 false
	`defaultChecked`	boolean	是否默认选中
	`indeterminate`	boolean	是否未确定状态，即用户还未点击过
	==============		==============
其他属性	`defaultValue`	string	默认值
	`dirName`	string	文字方向
	`list`	HTMLDataListElement	返回关联的 HTMLDataListElement 对象
	`labels`	NodeList	返回关联的 HTMLLabelElement 对象的 NodeList 对象
	`valueAsDate`	Date	将 input 的值解析为指定 Date 对象
	`valueAsNumber`	number	将 input 的值解析为指定浮点数

3. 原型方法

原型方法	描述
`select()`	选中 input 所有文本（不能保证获得焦点）
`setSelectionRange(start, end[, eirection])`	选中 input 内的一段文本
`setRangeText(text, start, end[, action])`	新文本替换选中的文本，action 表示替换后的行为： select：选中新插入的文本 start：光标位置移到插入的文本之前 end：光标位置移到插入的文本之前 preserve：保持原本选中的文本（默认）
`setCustomValidity(message)`	设定自定义校验失败信息（一旦设定，该字段就不会校验通过了，直到重新设为空字符串）
`checkValidity()`	返回校验结果
`stepDown(n)`	减少 n 个步长（n 默认 1）
`stepUp(n)`	增加 n 个步长

4. type 取值

HTMLTextAreaElement 类

1. 创建对象

textarea 元素

2. 原型属性

原型属性	类型	描述
`name`	string	文本域名称
`type`	string	返回类型，固定值为 "textarea"
`value`	string	值
`defaultValue`	string	默认值
`placeholder`	string	提示文本
`rows`	number	展示的行数
`cols`	rows	展示的列数
`textLength`	rows	返回当前文本长度
`maxLength`	rows	最大文本长度
`minLength`	rows	最小文本长度
`autofocus` 布尔	boolean	是否自动获得焦点，默认 false
`disabled` 布尔	boolean	是否禁用，默认 false
`readOnly` 布尔	boolean	是否只读，默认 false
`required` 布尔	boolean	是否必填，默认 false
`labels`	NodeList	返回关联的 HTMLLabelElement 对象的 NodeList 对象
`form`	HTMLFormElement	返回所在表单对象
`selectionStart`	selectionStart	选中文本的起始位置
`selectionEnd`	selectionStart	选中文本的结束位置
`selectionDirection`	string	选中文本的方向：forward 与文字书写方向一致，backward 相反，none 未知
`validity`	ValidityState	返回校验状态的 ValidityState 对象
`validationMessage`	string	返回校验失败时的报错信息，如果不需要检验或检验成功，返回空字符串。
`willValidate`	boolean	返回表单提交时当前 button 是否会被校验
`autocomplete`	string	是否开启自动补全：on 开启，off 关闭
`wrap`	string	提交时是否携带换行符：solf 不带（默认），hard 携带

3. 原型方法

原型方法	描述
`select()`	选中 textarea 所有文本（不能保证获得焦点）
`setSelectionRange(start, end[, eirection])`	选中 textarea 内的一段文本
`setRangeText(text, start, end[, action])`	新文本替换选中的文本，action 表示替换后的行为： select：选中新插入的文本 start：光标位置移到插入的文本之前 end：光标位置移到插入的文本之前 preserve：保持原本选中的文本（默认）
`setCustomValidity(message)`	设定自定义校验失败信息（一旦设定，该字段就不会校验通过了，直到重新设为空字符串）
`checkValidity()`	返回校验结果

HTMLSelectElement 类

1. 创建对象

select 元素

2. 原型属性

原型属性	类型	描述
`name`	string	选择器名称
`type`	string	返回选择器类型：select-one 单选，select-multiple 多选
`value`	string	选中的选项的值
`autofocus` 布尔	boolean	是否自动获得焦点，默认 false
`disabled` 布尔	boolean	是否禁用，默认 false
`required` 布尔	boolean	是否必填，默认 false
`multiple` 布尔	boolean	是否允许多选，默认 false
`length`	number	所有内项的个数
`size`	number	展示的选项个数，默认1
`selectedIndex`	number	选中的选项序号
`selectedOptions`	HTMLCollection	返回选中的选项的 HTMLOptionElement 对象的 HTMLCollection 对象
`options`	HTMLOptionsCollection	返回所有选项的 HTMLOptionElement 对象的 HTMLOptionsCollection 对象
`labels`	NodeList	返回关联的 HTMLLabelElement 对象的 NodeList 对象
`form`	HTMLFormElement	返回所在表单对象
`validity`	ValidityState	返回校验状态的 ValidityState 对象
`validationMessage`	string	返回校验失败时的报错信息，如果不需要检验或检验成功，返回空字符串。
`willValidate`	boolean	返回表单提交时当前 button 是否会被校验

3. 原型方法

原型方法	描述
`add(item[, before])`	添加一个选项， item：要插入的 HTMLOptionElement 或 HTMLOptGroupElement 对象 before：插入在指定元素或序号之前，默认插到最后
`item(index)`	返回指定序号的 HTMLOptionElement 对象
`namedItem(id/name)`	返回根据 id/name 找到相应属性值的第一个 HTMLOptionElement 对象
`remove(index)`	删除指定序号的选项（未传序号时删除选择器本身）
`setCustomValidity(message)`	设定自定义校验失败信息（一旦设定，该字段就不会校验通过了，直到重新设为空字符串）
`checkValidity()`	返回校验结果

HTMLOptionElement 类

1. 创建对象

option 元素

脚本创建

// new Option(text, value, defaultSelected, selected), 4个参数都可选
var option = new Option("文本", "值", false, false);

2. 原型属性

原型属性	类型	描述
`value`	string	选项的值，默认值同 text
`label`	string	选项的说明（显示出来的），默认值同 text
`text`	string	选项的文本内容
`index`	number	选项的序号
`selected` 布尔	boolean	选项是否选中，默认 false
`defaultSelected`	boolean	选项是否默认选择，默认 false
`disabled` 布尔	boolean	选项是否可选择，默认 false
`form`	HTMLFormElement	返回所在表单对象

HTMLButtonElement 类

1. 创建对象

button 元素

2. 原型属性

	原型属性	类型	描述
特征属性	`name`	string	按钮名称
	`value`	string	按钮值
	`type`	string	按钮类型：submit 提交表单（默认），reset 重置表单，button 没有默认行为
	`disabled` 布尔	boolean	是否禁用，默认 false
	`autofocus` 布尔	boolean	是否自动获得焦点，默认 false
	`validity`	ValidityState	返回校验状态的 ValidityState 对象
	`validationMessage`	string	返回校验失败时的报错信息，如果不需要检验或检验成功，返回空字符串。
	`willValidate`	boolean	返回表单提交时当前 button 是否会被校验
	`labels`	NodeList	返回关联的 HTMLLabelElement 对象的 NodeList 对象
	==============		==============
表单属性	`form`	HTMLFormElement	返回所在表单对象
	`formAction`	string	表单提交的 URL
	`formEncType`	string	表单提交的编码方法
	`formMethod`	string	表单提交时的 HTTP 方法
	`formNoValidate` 布尔	boolean	是否关闭表单的自动校验，默认 false

HTMLIFrameElement 类

1. 创建对象

iframe 元素

2. 原型属性

原型属性	类型	描述
`name`	string	iframe 的名称
`src`	string	iframe 的 URL
`width`	number	iframe 的宽度数值
`height`	number	iframe 的高度数值
`allowFullscreen` 布尔	boolean	是否运行全屏，默认 false
`sandbox`	DOMTokenList	嵌入网页的权限的 DOMTokenList 对象
`loading`	string	加载方式： auto：自动，默认值 lazy：懒加载，即将滚动进入视口时开始加载 eager：立即加载
`contentWindow`	window	返回 iframe 里的 window 对象
`contentDocument`	document	返回 iframe 里的 document 对象

注意

如果 iframe 是隐藏的，则 loading 属性无效，将会立即加载。

3. sandbox 详解

allow-forms：允许提交表单。
allow-modals：允许提示框，即允许执行window.alert()等会产生弹出提示框的 JavaScript 方法。
allow-popups：允许嵌入的网页使用window.open()方法弹出窗口。
allow-popups-to-escape-sandbox：允许弹出窗口不受沙箱的限制。
allow-orientation-lock：允许嵌入的网页用脚本锁定屏幕的方向，即横屏或竖屏。
allow-pointer-lock：允许嵌入的网页使用 Pointer Lock API，锁定鼠标的移动。
allow-presentation：允许嵌入的网页使用 Presentation API。
allow-same-origin：不打开该项限制，将使得所有加载的网页都视为跨域。
allow-scripts：允许嵌入的网页运行脚本（但不创建弹出窗口）。
allow-storage-access-by-user-activation：sandbox属性同时设置了这个值和allow-same-origin的情况下，允许<iframe>嵌入的第三方网页通过用户发起document.requestStorageAccess()请求，经由 Storage Access API 访问父窗口的 Cookie。
allow-top-navigation：允许嵌入的网页对顶级窗口进行导航。
allow-top-navigation-by-user-activation：允许嵌入的网页对顶级窗口进行导航，但必须由用户激活。
allow-downloads-without-user-activation：允许在没有用户激活的情况下，嵌入的网页启动下载。

注意

不要同时设置allow-scripts和allow-same-origin属性，这将使得嵌入的网页可以改变或删除sandbox属性。

HTMLMediaElement 类

1. 原型属性

原型属性	类型	描述
`src`	string	媒体资源链接（除了普通链接外，可以使用由 MediaSource 或 Blob 通过 URL.createObjectURL 转成的对象链接）
`srcObject`	MediaStream	媒体资源对象
`autoplay` 布尔	boolean	是否自动播放，默认 false
`controls` 布尔	boolean	audio：是否显示音频播放器 video：是否显示视频播放器的控制栏默认 false
`loop` 布尔	boolean	是否循环播放，默认 false
`disableRemotePlayback` 布尔	boolean	是否禁止远程回放，默认 false
`muted` 布尔	boolean	是否关闭音量，默认 false
`defaultMuted`	boolean	是否默认关闭音量，默认 false
`volume`	number	播放音量，0 ~ 1
`playbackRate`	number	播放速率，默认1
`defaultPlaybackRate`	number	默认播放速率，默认1
`preload`	string	预加载的内容：none，auto，metadata（默认）
`currentSrc`	string	返回当前播放的媒体文件的绝对路径
`currentTime`	number	返回或设置当前播放的时间点
`duration`	number	返回媒体文件的时间长度（单位秒）
`played`	TimeRanges	返回播放的媒体内容的播放的 TimeRanges 对象
`paused`	boolean	返回媒体文件是否处在暂停状态
`ended`	boolean	返回前媒体文件是否处在结束状态（循环播放时不会有结束状态）
`readyState`	number	媒体文件的准备状态 0：没有数据 1：已获取元数据 2：可播放当前帧，但不足以播放多个帧 3：可以播放多帧，至少为两帧 4：可以流畅播放
`networkState`	number	网络状态 0：没有数据 1：媒体元素处在激活状态，但是还没开始下载 2：下载中 3：没有找到媒体文件
`error`	MediaError	返回最近一次报错
`crossOrigin`	string	跨域设置： null 允许跨域（默认） anonymous 跨域请求不要求用户身份 use-credentials 跨域请求要求用户身份
`seekable`	TimeRanges	返回可搜索的媒体内容范围
`seeking`	seeking	返回媒体文件是否正在寻找新位置
`buffered`	TimeRanges	返回缓冲内容
`controlsList`	DOMTokenList	返回控制栏控件
`textTracks`	TextTrackList	返回文本轨道

2. 原型方法

原型方法	描述
`load()`	重新加载媒体文件
`play()`	开始播放
`pause()`	暂停播放
`addTextTrack(kind[, label, language])`	添加文本轨道，其中 kind 为TextTrackKind 对象
`captureStream()`	返回一个 MediaStream 对象，用来捕获当前媒体文件的流内容
`canPlayType(type)`	判断指定 MIME 类型的媒体文件是否可播放 probably：似乎可播放 maybe：无法在不播放的情况下判断空字符串：无法播放
`fastSeek(time)`	媒体文件移动到指定时间（单位秒），兼容性差

注意

为了避免干扰用户，页面初始化后没有用户交互的情况下，视频是不允许自动播放的，除了以下2种情况：

设置成静音
当前页面是从其他页面跳转来，而非直接打开或刷新

HTMLVideoElement 类

继承 HTMLMediaElement 类。

1. 创建对象

video 元素

2. 原型属性

原型属性	类型	描述
`width`	number	视频播放器的宽度数值
`height`	number	视频播放器的高度数值
`videoWidth`	number	返回视频文件自身宽度的数值
`videoHeight`	number	返回视频文件自身高度的数值
`poster`	string	视频封面图片 URL（视频加载失败或未播放时显示）

3. 原型方法

原型方法	描述
`getVideoPlaybackQuality()`	返回视频回放的 VideoPlaybackQuality 对象

HTMLAudioElement 类

继承 HTMLMediaElement 类。

1. 创建对象

audio 元素

脚本创建

var audio = new Audio();
// 指定src
var audio = new Audio("../static/audio/demo.mp3");

说明

脚本创建 HTMLAudioElement 对象后，可以不用插入 DOM，直接通过 play() 播放。

HTMLObjectElement 类

1. 创建对象

object 元素

2. 原型属性

原型属性	类型	描述
`data`	string	资源路径
`type`	string	资源MIME类型
`width`	number	宽度数值
`height`	number	高度数值

HTMLEmbedElement 类

1. 创建对象

embed 元素

2. 原型属性

原型属性	类型	描述
`src`	string	资源路径
`type`	string	资源MIME类型
`width`	number	宽度数值
`height`	number	高度数值

HTMLCanvasElement 类

HTMLCanvasElement - Web API 接口参考 | MDN (mozilla.org)open in new window

1. 创建对象

canvas 元素

2. 原型属性

原型属性	类型	描述
`width`	number	宽度数值，默认值 300
`height`	number	高度数值，默认值 150

注意

画布中的元素尺寸坐标以画布尺寸为标准，然后整个画布再以 Css 尺寸进行伸缩，即当画布宽高比例和 Css 宽高比例不一致时会出现扭曲。

3. 原型方法

原型属性	描述
`getContext(type: string, attributes: object): CanvasRenderingContext2D`	返回上下文对象。 type 取值：2d，webgl，webgl2，bitmaprenderer
`captureStream(frameRequestRate?: number): MediaStream`	返回画布的实时媒体流对象。 frameRequestRate 为帧率，未设置时则画布更改时捕获一个新帧，为 0 时捕获单个帧。
`toDataURL([type, quality])`	生成图片格式的 base64 字符串 type：mimeType（默认 image/png） quality：图片质量，0 ~1（当 type 为 image/jpeg 或 image/webp 时有效）
`toBlob(callback, type, quality)`	生成 Blob 对象 callback：回调函数，可获得一个单独的 Blob 对象参数 type：mimeType（默认 image/png） quality：图片质量，0 ~1（当 type 为 image/jpeg 或 image/webp 时有效）

内联元素对象

# HTMLAnchorElement 类

# HTMLImageElement 类

# HTMLMapElement 类

# HTMLAreaElement 类

# HTMLLabelElement 类

# HTMLInputElement 类

# HTMLTextAreaElement 类

# HTMLSelectElement 类

# HTMLOptionElement 类

# HTMLButtonElement 类

# HTMLIFrameElement 类

# HTMLMediaElement 类

# HTMLVideoElement 类

# HTMLAudioElement 类

# HTMLObjectElement 类

# HTMLEmbedElement 类

# HTMLCanvasElement 类

ON THIS PAGE

HTMLAnchorElement 类

HTMLImageElement 类

HTMLMapElement 类

HTMLAreaElement 类

HTMLLabelElement 类

HTMLInputElement 类

HTMLTextAreaElement 类

HTMLSelectElement 类

HTMLOptionElement 类

HTMLButtonElement 类

HTMLIFrameElement 类

HTMLMediaElement 类

HTMLVideoElement 类

HTMLAudioElement 类

HTMLObjectElement 类

HTMLEmbedElement 类

HTMLCanvasElement 类