活文档标准 — 最后更新 2024 年 9 月 12 日
HTML UA 中的每个 XML 和 HTML 文档都由一个 Document
对象表示。 [DOM]
Document
对象的 URL 在 DOM 中定义。它在 Document
对象创建时最初设置,但在 Document
对象的生命周期中可能会改变;例如,当用户 导航 到页面上的 片段 以及当 pushState()
方法被调用带有新的 URL 时,它会改变。 [DOM]
交互式用户代理通常在它们的界面中公开 Document
对象的 URL。这是用户判断一个网站是否试图冒充另一个网站的主要机制。
Document
对象的 origin 在 DOM 中定义。它在 Document
对象创建时最初设置,并且在 Document
的生命周期中只有在设置 document.domain
时才能改变。 Document
的 origin 可能与它的 origin 不同;例如,当 子可导航 被 创建 时,它的 活动文档 的 origin 从它的 父级 的 活动文档 的 origin 继承,即使它的 活动文档 的 URL 是 about:blank
。 [DOM]
当 Document
由 脚本 使用 createDocument()
或 createHTMLDocument()
方法创建时,Document
立即 准备好执行加载后任务。
文档的来源 是一个字符串(表示一个 URL),可以在创建 Document
时设置。如果它没有被显式设置,那么它的值为一个空字符串。
Document
对象 所有当前引擎中都支持。
DOM 定义了 Document
接口,该规范对其进行了重大扩展。
enum DocumentReadyState { "loading" , "interactive" , "complete" };
enum DocumentVisibilityState { "visible" , "hidden" };
typedef (HTMLScriptElement or SVGScriptElement ) HTMLOrSVGScriptElement ;
[LegacyOverrideBuiltIns ]
partial interface Document {
static Document
parseHTMLUnsafe ((TrustedHTML
or DOMString ) html );
// resource metadata management
[PutForwards =href , LegacyUnforgeable ] readonly attribute Location ? location ;
attribute USVString domain ;
readonly attribute USVString referrer ;
attribute USVString cookie ;
readonly attribute DOMString lastModified ;
readonly attribute DocumentReadyState readyState ;
// DOM tree accessors
getter object (DOMString name );
[CEReactions ] attribute DOMString title ;
[CEReactions ] attribute DOMString dir ;
[CEReactions ] attribute HTMLElement ? body ;
readonly attribute HTMLHeadElement ? head ;
[SameObject ] readonly attribute HTMLCollection images ;
[SameObject ] readonly attribute HTMLCollection embeds ;
[SameObject ] readonly attribute HTMLCollection plugins ;
[SameObject ] readonly attribute HTMLCollection links ;
[SameObject ] readonly attribute HTMLCollection forms ;
[SameObject ] readonly attribute HTMLCollection scripts ;
NodeList getElementsByName (DOMString elementName );
readonly attribute HTMLOrSVGScriptElement ? currentScript ; // classic scripts in a document tree only
// dynamic markup insertion
[CEReactions ] Document open (optional DOMString unused1 , optional DOMString unused2 ); // both arguments are ignored
WindowProxy ? open (USVString url , DOMString name , DOMString features );
[CEReactions ] undefined close ();
[CEReactions ] undefined write ((TrustedHTML
or DOMString )... text );
[CEReactions ] undefined writeln ((TrustedHTML
or DOMString )... text );
// user interaction
readonly attribute WindowProxy ? defaultView ;
boolean hasFocus ();
[CEReactions ] attribute DOMString designMode ;
[CEReactions ] boolean execCommand (DOMString commandId , optional boolean showUI = false , optional DOMString value = "");
boolean queryCommandEnabled (DOMString commandId );
boolean queryCommandIndeterm (DOMString commandId );
boolean queryCommandState (DOMString commandId );
boolean queryCommandSupported (DOMString commandId );
DOMString queryCommandValue (DOMString commandId );
readonly attribute boolean hidden ;
readonly attribute DocumentVisibilityState visibilityState ;
// special event handler IDL attributes that only apply to Document objects
[LegacyLenientThis ] attribute EventHandler onreadystatechange ;
attribute EventHandler onvisibilitychange ;
// also has obsolete members
};
Document includes GlobalEventHandlers ;
每个 Document
都有一个 策略容器(一个 策略容器),最初是一个新的策略容器,其中包含适用于 Document
的策略。
每个 Document
都有一个 权限策略,它是一个 权限策略,最初为空。
每个 Document
都有一个 模块映射,它是一个 模块映射,最初为空。
每个 Document
都有一个 打开策略,它是一个 打开策略,最初是一个新的打开策略。
每个 Document
都有一个 初始 about:blank
,它是一个布尔值,最初为假。
每个 Document
都有一个 加载期间的 WebDriver BiDi 导航 ID,它是一个 导航 ID 或 null,最初为 null。
顾名思义,它用于与 WebDriver BiDi 规范交互,该规范需要以某种方式了解 Document
生命周期早期部分的某些事件,将它们与创建此 Document
的导航所使用的原始 导航 ID 绑定。最终,在 WebDriver BiDi 认为加载过程完成之后,它会重新设置为 null。 [BIDI]
每个 Document
都有一个 关于基本 URL,它是一个 URL 或 null,最初为 null。
这仅适用于 “about:
” 模式 Document
。
每个 Document
都有一个 bfcache 阻塞详细信息,它是一个 集合,其中包含 未恢复的原因详细信息,最初为空。
DocumentOrShadowRoot
接口 DOM 定义了 DocumentOrShadowRoot
混合,该规范对其进行了扩展。
partial interface mixin DocumentOrShadowRoot {
readonly attribute Element ? activeElement ;
};
document.referrer
所有当前引擎中都支持。
返回用户从哪个 Document
导航到当前文档的 URL,除非它被阻止或不存在此类文档,在这种情况下它将返回空字符串。
noreferrer
链接类型可以用于阻止来源。
referrer
属性必须返回 文档的来源。
document.cookie [ = value ]
返回适用于 Document
的 HTTP cookie。如果没有 cookie 或 cookie 无法应用于此资源,则将返回空字符串。
可以设置,以将新 cookie 添加到元素的 HTTP cookie 集合中。
如果内容被沙箱化到不透明的来源(例如,在一个带有sandbox
属性的iframe
中),则在获取和设置时会抛出一个"SecurityError
" DOMException
。
所有当前引擎中都支持。
cookie
属性表示由文档的URL标识的资源的cookie。
满足以下条件之一的Document
对象是排斥cookie的Document
对象
在获取时,如果文档是一个排斥cookie的Document
对象,则用户代理必须返回空字符串。否则,如果Document
的来源是一个不透明的来源,则用户代理必须抛出一个"SecurityError
" DOMException
。否则,用户代理必须返回文档的URL的“非HTTP”API的cookie字符串,使用无BOM的UTF-8解码解码。 [COOKIES]
在设置时,如果文档是一个排斥cookie的Document
对象,则用户代理必须什么也不做。否则,如果Document
的来源是一个不透明的来源,则用户代理必须抛出一个"SecurityError
" DOMException
。否则,用户代理必须像它在通过“非HTTP”API接收文档的URL的set-cookie字符串时一样进行操作,该字符串由新值组成,以UTF-8编码。 [COOKIES] [ENCODING]
由于cookie
属性在跨帧访问时是可访问的,因此cookie上的路径限制只是一个工具,可以帮助管理哪些cookie被发送到网站的哪些部分,而这并不是任何安全功能。
cookie
属性的getter和setter会同步访问共享状态。由于没有锁定机制,多进程用户代理中的其他浏览上下文可以在脚本运行时修改cookie。例如,一个网站可以尝试读取一个cookie,增加它的值,然后使用cookie的新值作为会话的唯一标识符写回它;如果该网站在两个不同的浏览器窗口中同时执行此操作两次,它可能会最终使用相同的“唯一”标识符来标识两个会话,这可能会产生灾难性的影响。
document.lastModified
所有当前引擎中都支持。
返回服务器报告的文档最后修改日期,格式为“MM/DD/YYYY hh:mm:ss
”,以用户的本地时区表示。
如果最后修改日期未知,则返回当前时间。
lastModified
属性在获取时,必须返回Document
的源文件的最后修改日期和时间,以用户的本地时区表示,格式如下
日期的月份部分。
一个 U+002F 斜杠字符(/)。
日期的日期部分。
一个 U+002F 斜杠字符(/)。
日期的年份部分。
一个 U+0020 空格字符。
时间的时分部分。
一个 U+003A 冒号字符(:).
时间的分钟部分。
一个 U+003A 冒号字符(:).
时间的秒数部分。
上述所有数字部分,除了年份,都必须用两个ASCII数字表示以十进制表示的数字,必要时用零填充。年份必须用最短的四个或更多ASCII数字表示以十进制表示的数字,必要时用零填充。
Document
的源文件的最后修改日期和时间必须从使用的网络协议的相关特征中获取,例如从文档的HTTP`Last-Modified
`标头值中获取,或者从本地文件的系统文件中的元数据中获取。如果最后修改日期和时间未知,则该属性必须以上述格式返回当前日期和时间。
document.readyState
当Document
正在加载时返回“loading
”,当它完成解析但仍在加载子资源时返回“interactive
”,当它已加载完毕时返回“complete
”。
当此值更改时,readystatechange
事件在Document
对象上触发。
DOMContentLoaded
事件在从“interactive
”过渡到“complete
”之前触发,此时所有子资源(除了async
script
元素)都已加载完毕。
所有当前引擎中都支持。
每个Document
都有一个当前文档就绪状态,它是一个字符串,最初为“complete
”。
对于通过创建和初始化Document
对象算法创建的Document
对象,这将立即重置为“loading
”,然后任何脚本都可以观察document.readyState
的值。此默认值适用于其他情况,例如初始about:blank
Document
或没有浏览上下文的Document
。
readyState
getter步骤是返回this的当前文档就绪状态。
要更新当前文档就绪状态,对于Document
document,将其设置为readinessValue
如果document的当前文档就绪状态等于readinessValue,则返回。
将document的当前文档就绪状态设置为readinessValue。
如果document与一个HTML解析器相关联,则
触发事件,名为 readystatechange
,在 document 上。
如果一个 文档
与一个尚未 停止 或 中止 的 HTML 解析器 或 XML 解析器 关联,则该 文档
被认为具有 活动解析器。
一个 文档
拥有一个布尔值 通过跨域重定向创建,初始值为 false。
DOMHighResTimeStamp
值DOMHighResTimeStamp
值每个 文档
都有一个 渲染阻塞元素集合,一个 集合,最初为空集。
如果一个 文档
document 的 内容类型 为 "text/html
" 且 document 的 body 元素 为 null,则该 文档
允许添加渲染阻塞元素。
如果一个 文档
document 满足以下两个条件,则该 文档
被认为是 渲染阻塞的
document 的 渲染阻塞元素集合 不为空,或 document 允许添加渲染阻塞元素。
如果一个元素 el 的 节点文档 document 是 渲染阻塞的,且 el 位于 document 的 渲染阻塞元素集合 中,则该元素 el 被认为是 渲染阻塞的。
要在元素 el 上 阻塞渲染
令 document 为 el 的 节点文档。
如果 document 允许添加渲染阻塞元素,则将 el 追加 到 document 的 渲染阻塞元素集合 中。
要在元素 el 上 解除渲染阻塞
每当 渲染阻塞的 元素 el 变成浏览上下文断开连接的,或 el 的 阻塞属性 的值更改,导致 el 不再是 潜在的渲染阻塞元素,则在 el 上 解除渲染阻塞。
文档的 html
元素 是其 文档元素,如果它是 html
元素,否则为 null。
document.head
所有当前引擎中都支持。
返回 head
元素。
head
元素 是文档中第一个作为 html
元素 子节点的 head
元素,如果有的话,否则为 null。
The head
attribute,在获取时,必须返回 head
元素 (一个 head
元素或 null)。
document.title [ = value ]
返回文档的标题,对于 HTML 来说,由 title
元素 给出,而对于 SVG 来说,由 SVG title
元素给出。
可以设置,以更新文档的标题。如果没有合适的元素可更新,则新值会被忽略。
title
元素 是文档中第一个 title
元素 (按 树序),如果有的话,否则为 null。
所有当前引擎中都支持。
The title
attribute 必须,在获取时,运行以下算法
如果 文档元素 是一个 SVG svg
元素,则令 value 为第一个作为 文档元素 子节点的 SVG title
元素的 子节点文本内容。
在 value 中 剥离和合并 ASCII 空白字符。
返回 value。
在设置时,必须运行与以下列表中第一个匹配条件相对应的步骤
svg
元素什么也不做。
document.body [ = value ]
所有当前引擎中都支持。
返回 主体元素。
可以设置,以替换 主体元素。
如果新值不是 body
或 frameset
元素,则会抛出 "HierarchyRequestError
" DOMException
。
主体元素 是文档中 html
元素 的子元素,该子元素是 body
元素或 frameset
元素中的第一个,如果不存在这样的元素,则为 null。
body
属性在获取时必须返回文档的 主体元素(body
元素、frameset
元素或 null)。在设置时,必须运行以下算法
body
或 frameset
元素,则抛出 "HierarchyRequestError
" DOMException
。HierarchyRequestError
" DOMException
。body
获取器返回的值并不总是传递给设置器的值。
在此示例中,设置器成功插入了 body
元素(尽管这与标准不符,因为 SVG 不允许将 body
作为 SVG svg
的子元素)。但是获取器将返回 null,因为文档元素不是 html
。
< svg xmlns = "http://www.w3.org/2000/svg" >
< script >
document. body = document. createElementNS( "http://www.w3.org/1999/xhtml" , "body" );
console. assert( document. body === null );
</ script >
</ svg >
document.images
所有当前引擎中都支持。
返回一个 HTMLCollection
,该集合包含 Document
中的 img
元素。
document.embeds
所有当前引擎中都支持。
document.plugins
所有当前引擎中都支持。
返回一个 HTMLCollection
,该集合包含 Document
中的 embed
元素。
document.links
所有当前引擎中都支持。
返回一个 HTMLCollection
,该集合包含 Document
中的 a
和 area
元素,这些元素具有 href
属性。
document.forms
所有当前引擎中都支持。
返回一个 HTMLCollection
,该集合包含 Document
中的 form
元素。
document.scripts
所有当前引擎中都支持。
返回一个 HTMLCollection
,该集合包含 Document
中的 script
元素。
images
属性必须返回一个以 Document
节点为根的 HTMLCollection
,其过滤器只匹配 img
元素。
embeds
属性必须返回一个以 Document
节点为根的 HTMLCollection
,其过滤器只匹配 embed
元素。
plugins
属性必须返回与 embeds
属性返回的相同对象。
links
属性必须返回一个以 Document
节点为根的 HTMLCollection
,其过滤器只匹配具有 href
属性的 a
元素和具有 href
属性的 area
元素。
forms
属性必须返回一个以 Document
节点为根的 HTMLCollection
,其过滤器只匹配 form
元素。
scripts
属性必须返回一个以 Document
节点为根的 HTMLCollection
,其过滤器只匹配 script
元素。
collection = document.getElementsByName(name)
所有当前引擎中都支持。
The getElementsByName(elementName)
方法的步骤是返回一个包含该文档中所有具有name
属性(其值与elementName参数相同)的HTML 元素的实时NodeList
,按照树序排列。当在Document
对象上再次调用该方法,并使用相同的参数时,用户代理可能会返回与之前调用返回的对象相同的结果。在其他情况下,必须返回一个新的NodeList
对象。
document.currentScript
所有当前引擎中都支持。
返回当前正在执行的script
元素或SVG script
元素,前提是该元素表示经典脚本。在重新进入脚本执行的情况下,返回最近开始执行且尚未完成执行的脚本。
如果Document
当前没有执行script
或SVG script
元素(例如,因为正在运行的脚本是事件处理程序或超时),或者当前正在执行的script
或SVG script
元素表示模块脚本,则返回 null。
在获取currentScript
属性时,必须返回最近一次设置的值。当创建Document
时,currentScript
必须初始化为 null。
此 API 在实现者和标准社区中已不再流行,因为它全局暴露了script
或SVG script
元素。因此,它在较新的上下文中不可用,例如在运行模块脚本或在影子树中运行脚本时。我们正在研究一种新的解决方案,用于在这些上下文中识别正在运行的脚本,该解决方案不会使其全局可用:请参阅问题 #1013。
The Document
接口支持命名属性。在任何时刻,Document
对象document的支持的属性名称包括以下内容,按照树序排列(根据贡献它们的元素,忽略后面的重复项),并且当同一个元素贡献了两个值时,来自id
属性的值在来自name
属性的值之前
所有暴露的embed
、form
、iframe
、img
和暴露的object
元素的name
内容属性的值,这些元素具有非空name
内容属性,并且位于文档树中,其根为document;
所有暴露的object
元素的id
内容属性的值,这些元素具有非空id
内容属性,并且位于文档树中,其根为document;以及
所有img
元素的id
内容属性的值,这些元素既具有非空id
内容属性,又具有非空name
内容属性,并且位于文档树中,其根为document。
要确定Document
的命名属性name的值,用户代理必须使用以下步骤返回获得的值
令elements 为具有名称name 的命名元素列表,这些元素位于文档树中,其根为Document
。
至少将存在一个这样的元素,因为否则算法将不会被Web IDL 调用。
如果elements 只有一个元素,并且该元素是一个iframe
元素,并且该iframe
元素的内容可导航 不为 null,则返回元素的内容可导航 的活动WindowProxy
。
否则,如果elements 只有一个元素,则返回该元素。
否则,返回一个HTMLCollection
,其根节点为Document
节点,其过滤器仅匹配具有名称name 的命名元素。
命名元素 的名称为name,为了上述算法的目的,这些元素是:
embed
、form
、iframe
、img
或暴露的object
元素,这些元素具有name
内容属性,其值为name,或object
元素,这些元素具有id
内容属性,其值为name,或img
元素,这些元素具有id
内容属性,其值为name,并且也具有非空的name
内容属性。embed
或object
元素被称为暴露的,如果它没有暴露的object
祖先,并且对于object
元素,额外地,要么没有显示它的后备内容,要么没有object
或embed
子孙。
The dir
属性在Document
接口上定义,与dir
内容属性一起定义。
HTML 中的元素、属性和属性值被定义(由本规范定义)为具有某些含义(语义)。例如,ol
元素表示一个有序列表,lang
属性表示内容的语言。
这些定义允许 HTML 处理器(例如 Web 浏览器或搜索引擎)在作者可能没有考虑到的各种情况下呈现和使用文档和应用程序。
作为简单的例子,考虑一个由只考虑桌面计算机 Web 浏览器的作者编写的网页
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > My Page</ title >
</ head >
< body >
< h1 > Welcome to my page</ h1 >
< p > I like cars and lorries and have a big Jeep!</ p >
< h2 > Where I live</ h2 >
< p > I live in a small hut on a mountain!</ p >
</ body >
</ html >
由于 HTML 传达的是含义,而不是呈现方式,因此同一个页面也可以被手机上的小型浏览器使用,而无需对页面进行任何更改。例如,标题在桌面上的显示方式是大字体,而手机上的浏览器可能会使用相同的字体大小来显示整个页面,但标题会以粗体显示。
但这不仅仅是屏幕尺寸的差异:同一个页面也可以被使用语音合成技术的盲人用户使用,该技术不是在屏幕上显示页面,而是将页面读给用户,例如使用耳机。 语音浏览器可能不会使用大型文本作为标题,而是使用不同的音量或更慢的声音。
而且不止这些。 由于浏览器知道页面哪些部分是标题,它们可以创建用户用来快速浏览文档的文档大纲,使用按键进行“跳转到下一个标题”或“跳转到上一个标题”。 这些功能在语音浏览器中尤其常见,在语音浏览器中,用户否则会发现快速浏览页面非常困难。
即使在浏览器之外,软件也可以利用这些信息。 搜索引擎可以使用标题更有效地索引页面,或从搜索结果中提供到页面子部分的快速链接。 工具可以使用标题来创建目录(实际上,本规范的目录就是这么生成的)。
这个例子集中在标题上,但同样的原则适用于 HTML 中的所有语义。
作者不得将元素、属性或属性值用于与其预期语义目的不一致的目的,因为这样做会阻止软件正确处理页面。
例如,以下片段旨在表示公司网站的标题,但它不符合规范,因为第二行并非旨在作为子部分的标题,而仅仅是副标题或副标题(同一部分的从属标题)。
< body >
< h1 > ACME Corporation</ h1 >
< h2 > The leaders in arbitrary fast delivery since 1920</ h2 >
...
可以使用 hgroup
元素处理这类情况。
< body >
< hgroup >
< h1 > ACME Corporation</ h1 >
< p > The leaders in arbitrary fast delivery since 1920</ p >
</ hgroup >
...
下一个示例中的文档也同样不符合规范,尽管从语法上来说是正确的,因为放置在单元格中的数据明显不是表格数据,并且 cite
元素被误用了。
<!DOCTYPE HTML>
< html lang = "en-GB" >
< head > < title > Demonstration </ title > </ head >
< body >
< table >
< tr > < td > My favourite animal is the cat. </ td > </ tr >
< tr >
< td >
—< a href = "https://example.org/~ernest/" >< cite > Ernest</ cite ></ a > ,
in an essay from 1992
</ td >
</ tr >
</ table >
</ body >
</ html >
这会导致依赖这些语义的软件失败:例如,允许盲人用户浏览文档中表格的语音浏览器会将上面的引文报告为表格,使用户感到困惑; 同样,从页面中提取作品标题的工具会提取“Ernest”作为作品的标题,即使它实际上是一个人的名字,而不是标题。
该文档的更正版本可能是
<!DOCTYPE HTML>
< html lang = "en-GB" >
< head > < title > Demonstration </ title > </ head >
< body >
< blockquote >
< p > My favourite animal is the cat. </ p >
</ blockquote >
< p >
—< a href = "https://example.org/~ernest/" > Ernest</ a > ,
in an essay from 1992
</ p >
</ body >
</ html >
作者不得使用本规范或 其他适用规范 不允许的元素、属性或属性值,因为这样做会使该语言在将来难以扩展。
在下一个示例中,存在一个不符合规范的属性值(“carpet”)和一个不符合规范的属性(“texture”),该属性在本规范中不允许。
< label > Carpet: < input type = "carpet" name = "c" texture = "deep pile" ></ label >
下面是标记它的另一种正确方法。
< label > Carpet: < input type = "text" class = "carpet" name = "c" data-texture = "deep pile" ></ label >
其 节点文档 的 浏览上下文 为 null 的 DOM 节点,除了 HTML 语法 要求和 XML 语法 要求之外,无需满足所有文档一致性要求。
特别是,template
元素的 模板内容 的 节点文档 的 浏览上下文 为 null。 例如,内容模型 要求和属性值微语法要求不适用于 template
元素的 模板内容。 在此示例中,img
元素具有在 template
元素之外无效的占位符属性值。
< template >
< article >
< img src = "{{src}}" alt = "{{alt}}" >
< h1 ></ h1 >
</ article >
</ template >
但是,如果上面的标记省略了 </h1>
结束标签,则会违反 HTML 语法,因此会被一致性检查器标记为错误。
通过脚本和其他机制,属性的值、文本,甚至文档的整个结构都可能在用户代理处理文档时动态更改。 文档在某一时刻的语义是指该时刻文档状态所表示的语义,因此文档的语义可能会随着时间推移而改变。 用户代理必须在这种情况发生时更新其对文档的呈现。
HTML 有一个 progress
元素,用于描述进度条。 如果它的“value”属性被脚本动态更新,则 UA 会更新渲染以显示进度发生变化。
表示 DOM 中 HTML 元素 的节点必须实现并向脚本公开本规范相关部分中为其列出的接口。 这包括 HTML 元素 在 XML 文档 中,即使这些文档在另一个上下文中(例如,在 XSLT 转换中)。
DOM 中的元素 表示 事物; 也就是说,它们具有内在的 *意义*,也称为语义。
例如,ol
元素表示有序列表。
元素可以以某种方式被 引用(提及),无论是显式还是隐式。 DOM 中元素可以显式引用的方法之一是,为该元素提供一个 id
属性,然后创建一个 超链接,该超链接的 id
属性值作为 片段 用于 超链接 的 href
属性值。 但是,超链接并非引用所必需; 任何提及该元素的方式都足以。
请考虑以下 figure
元素,该元素被赋予了一个 id
属性。
< figure id = "module-script-graph" >
< img src = "module-script-graph.svg"
alt = "Module A depends on module B, which depends
on modules C and D." >
< figcaption > Figure 27: a simple module graph</ figcaption >
</ figure >
As we can see in < a href = "#module-script-graph" > figure 27</ a > , ...
“如模块 A、B、C 和 D 的图形所示…”
“在图 27 中…”(没有超链接)
“从“简单模块图”图形的内容…”
“在下面的图形中…”(但 不建议这样做)
基本接口是所有 HTML 元素 接口继承的接口,对于没有额外要求的元素,必须使用该接口,它是 HTMLElement
接口。
所有当前引擎中都支持。
所有当前引擎中都支持。
[Exposed =Window ]
interface HTMLElement : Element {
[HTMLConstructor ] constructor ();
// metadata attributes
[CEReactions ] attribute DOMString title ;
[CEReactions ] attribute DOMString lang ;
[CEReactions ] attribute boolean translate ;
[CEReactions ] attribute DOMString dir ;
// user interaction
[CEReactions ] attribute (boolean or unrestricted double or DOMString )? hidden ;
[CEReactions ] attribute boolean inert ;
undefined click ();
[CEReactions ] attribute DOMString accessKey ;
readonly attribute DOMString accessKeyLabel ;
[CEReactions ] attribute boolean draggable ;
[CEReactions ] attribute boolean spellcheck ;
[CEReactions ] attribute DOMString writingSuggestions ;
[CEReactions ] attribute DOMString autocapitalize ;
[CEReactions ] attribute boolean autocorrect ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString innerText ;
[CEReactions ] attribute [LegacyNullToEmptyString ] DOMString outerText ;
ElementInternals attachInternals ();
// The popover API
undefined showPopover ();
undefined hidePopover ();
boolean togglePopover (optional boolean force );
[CEReactions ] attribute DOMString ? popover ;
};
HTMLElement includes GlobalEventHandlers ;
HTMLElement includes ElementContentEditable ;
HTMLElement includes HTMLOrSVGElement ;
[Exposed =Window ]
interface HTMLUnknownElement : HTMLElement {
// Note: intentionally no [HTMLConstructor]
};
HTMLElement
接口包含与许多不同功能相关的属性和方法,因此,本接口的成员在本规范的各个不同部分中进行了描述。
在 HTML 命名空间 中,名称为 name 的元素的 元素接口 的确定方法如下。
如果 name 是 applet
、bgsound
、blink
、isindex
、keygen
、multicol
、nextid
或 spacer
,则返回 HTMLUnknownElement
。
如果 name 是 acronym
、basefont
、big
、center
、nobr
、noembed
、noframes
、plaintext
、rb
、rtc
、strike
或 tt
,则返回 HTMLElement
。
如果 name 是 listing
或 xmp
,则返回 HTMLPreElement
。
否则,如果本规范定义了适合于对应于局部名称 name 的 元素类型 的接口,则返回该接口。
如果 其他适用规范 为 name 定义了合适的接口,则返回它们定义的接口。
如果 name 是一个 有效的自定义元素名称,则返回 HTMLElement
。
在有效的自定义元素名称的情况下,使用HTMLElement
而不是HTMLUnknownElement
是为了确保任何潜在的未来升级只导致元素原型链的线性过渡,从HTMLElement
到子类,而不是横向过渡,从HTMLUnknownElement
到不相关的子类。
HTML 和 SVG 元素共享的功能使用HTMLOrSVGElement
接口混合:[SVG]
interface mixin HTMLOrSVGElement {
[SameObject ] readonly attribute DOMStringMap dataset ;
attribute DOMString nonce ; // intentionally no [CEReactions]
[CEReactions ] attribute boolean autofocus ;
[CEReactions ] attribute long tabIndex ;
undefined focus (optional FocusOptions options = {});
undefined blur ();
};
一个既不是 HTML 也不是 SVG 元素的示例,如下创建:
const el = document.createElementNS("some namespace", "example");
console.assert(el.constructor === Element);
为了支持自定义元素功能,所有 HTML 元素都具有特殊的构造函数行为。这通过[HTMLConstructor]
IDL 扩展属性指示。它表明给定接口的接口对象在调用时将具有特定的行为,如下面的详细定义。
[HTMLConstructor]
扩展属性必须不带参数,并且只能出现在构造函数操作上。它必须在构造函数操作上只出现一次,并且接口必须只包含单个带注释的构造函数操作,而不能包含其他操作。带注释的构造函数操作必须声明为不带参数。
使用带注释的[HTMLConstructor]
扩展属性的构造函数操作声明的接口具有以下重写构造函数步骤
设registry 为当前全局对象的CustomElementRegistry
对象。
如果NewTarget 等于活动函数对象,则抛出TypeError
。
这可能发生在使用元素接口作为其构造函数定义自定义元素时。
customElements. define( "bad-1" , HTMLButtonElement);
new HTMLButtonElement(); // (1)
document. createElement( "bad-1" ); // (2)
在这种情况下,在执行HTMLButtonElement
(显式地,如(1),或隐式地,如(2))期间,活动函数对象 和NewTarget 都是HTMLButtonElement
。如果此检查不存在,则可以创建HTMLButtonElement
的实例,其本地名称为 bad-1
。
设definition 为registry 中构造函数 等于NewTarget 的条目。如果没有这样的定义,则抛出TypeError
。
由于registry 中不可能有构造函数 为 undefined 的条目,因此此步骤还阻止 HTML 元素构造函数被调用为函数(因为在这种情况下NewTarget 将为 undefined)。
设is value 为 null。
如果definition 的本地名称 等于definition 的名称(即,definition 是用于自治自定义元素),则
如果活动函数对象 不是HTMLElement
,则抛出TypeError
。
这可能发生在自定义元素被定义为不扩展任何本地名称,但继承自非HTMLElement
类时。
customElements. define( "bad-2" , class Bad2 extends HTMLParagraphElement {});
在这种情况下,在构造 Bad2
的实例时发生的(隐式)super()
调用期间,活动函数对象 是HTMLParagraphElement
,而不是HTMLElement
。
否则(即,如果definition 是用于自定义内置元素)
设valid local names 为在本规范或其他适用规范中定义的元素的本地名称列表,这些元素使用活动函数对象 作为其元素接口。
如果valid local names 不包含definition 的本地名称,则抛出TypeError
。
这可能发生在自定义元素被定义为扩展给定的本地名称,但继承自错误的类时。
customElements. define( "bad-3" , class Bad3 extends HTMLQuoteElement {}, { extends : "p" });
在这种情况下,在构造 Bad3
的实例时发生的(隐式)super()
调用期间,valid local names 是包含q
和blockquote
的列表,但definition 的本地名称 是p
,该名称不在该列表中。
将is value 设置为definition 的名称。
如果definition 的构造堆栈 为空,则
设element 为内部创建一个实现接口的新对象 的结果,该接口对应于活动函数对象,给定当前领域 和NewTarget。
将element 的节点文档 设置为当前全局对象的关联的 Document
。
将element 的命名空间前缀 设置为 null。
将element 的自定义元素状态 设置为 "custom
"。
将element 的自定义元素定义 设置为definition。
将element 的is
值 设置为is value。
返回element。
这发生在作者脚本直接构造一个新的自定义元素时,例如通过 new MyCustomElement()
。
如果Type(prototype) 不是 Object,则
设realm 为 ? GetFunctionRealm(NewTarget)。
活动函数对象 的领域可能不是realm,因此我们使用“跨领域的相同接口”这一更通用的概念;我们不是寻找接口对象 的相等性。这种回退行为,包括使用NewTarget 的领域并在那里查找适当的原型,旨在与 JavaScript 内置函数和 Web IDL 的内部创建一个实现接口的新对象 算法的类似行为相匹配。
设element 为definition 的构造堆栈 中的最后一个条目。
如果element 是已构造 标记,则抛出TypeError
。
这可能发生在作者代码在自定义元素构造函数 不符合规范地创建另一个正在构造的类的实例之前,调用super()
时。
let doSillyThing = true ;
class DontDoThis extends HTMLElement {
constructor() {
if ( doSillyThing) {
doSillyThing = false ;
new DontDoThis();
// Now the construction stack will contain an already constructed marker.
}
// This will then fail with a TypeError:
super ();
}
}
执行?element.[[SetPrototypeOf]](prototype).
返回element。
当升级自定义元素时,通常会到达此步骤;返回现有元素,以便自定义元素构造函数内部的super()
调用将该现有元素分配给this。
除了由[HTMLConstructor]
隐含的构造函数行为外,一些元素还具有命名构造函数(实际上是具有修改后的prototype
属性的工厂函数)。
HTML 元素的命名构造函数也可以在定义自定义元素构造函数时的extends
子句中使用。
class AutoEmbiggenedImage extends Image {
constructor( width, height) {
super ( width * 10 , height * 10 );
}
}
customElements. define( "auto-embiggened" , AutoEmbiggenedImage, { extends : "img" });
const image = new AutoEmbiggenedImage( 15 , 20 );
console. assert( image. width === 150 );
console. assert( image. height === 200 );
本规范中的每个元素都有一个定义,其中包含以下信息。
对元素可以使用位置的非规范性描述。此信息与允许此元素作为子元素的元素的内容模型冗余,仅作为方便提供。
对元素必须包含为子元素和后代的内容的规范性描述。
对在text/html
语法中是否可以省略开始和结束标签的非规范性描述。此信息与可选标签部分中给出的规范性要求冗余,仅在元素定义中作为方便提供。
对可能在元素上指定的属性(除非在其他地方禁止)的规范性列表,以及对这些属性的非规范性描述。(破折号左侧的内容是规范性的,破折号右侧的内容不是。)
对于作者:ARIA role
和 aria-*
属性的使用符合性要求在HTML 中的 ARIA 中定义。[ARIA] [ARIAHTML]
对于实现者:实现辅助功能 API 语义的用户代理要求在HTML 辅助功能 API 映射 中定义。[HTMLAAM]
对这些元素必须实现的 DOM 接口的规范性定义。
然后是关于元素表示的内容的描述,以及可能适用于作者和实现的任何其他规范性符合性标准。有时还包括示例。
属性值是一个字符串。除非另有说明,否则HTML 元素上的属性值可以是任何字符串值,包括空字符串,并且对在这些属性值中可以指定哪些文本没有限制。
本规范中定义的每个元素都有一个内容模型:对元素预期内容的描述。HTML 元素必须具有与元素内容模型中描述的要求相匹配的内容。内容是元素在 DOM 中的子元素。
ASCII 空格始终允许在元素之间。用户代理在源标记中用元素之间的这些字符表示为 DOM 中的文本
节点。空的文本
节点和仅包含这些字符序列的文本
节点被视为元素间空格。
元素间空格、注释节点和处理指令节点在确定元素内容是否与元素内容模型匹配时必须被忽略,并且在遵循定义文档和元素语义的算法时必须被忽略。
因此,如果元素 A 和元素 B 具有相同的父节点,并且它们之间没有其他元素节点或文本
节点(除元素间空格以外),则称元素 A 位于元素 B 之前或之后。类似地,如果元素不包含除元素间空格、注释节点和处理指令节点之外的任何其他节点,则该节点是元素的唯一子节点。
作者不得在任何地方使用HTML 元素,除非在为每个元素明确允许的情况下,或在其他规范明确要求的情况下。对于 XML 复合文档,这些上下文可能在来自其他命名空间的元素内部,如果这些元素被定义为提供相关的上下文。
Atom 联合格式 定义了一个content
元素。当其type
属性的值为xhtml
时,Atom 联合格式 要求它包含一个 HTML div
元素。因此,即使本规范没有明确规范性地说明这一点,div
元素在此上下文中是允许的。[ATOM]
此外,HTML 元素 可以是孤儿节点(即没有父节点)。
例如,创建一个td
元素并将它存储在脚本中的全局变量中是符合规范的,即使td
元素通常只应该在tr
元素内部使用。
var data = {
name: "Banana" ,
cell: document. createElement( 'td' ),
};
当元素的内容模型为无时,该元素不得包含任何文本
节点(除元素间空格以外)和任何元素节点。
出于方便,大多数内容模型为“无”的 HTML 元素也是空元素(在HTML 语法中没有结束标签的元素)。但是,这些是完全独立的概念。
HTML 中的每个元素都属于一个或多个类别,这些类别将具有类似特征的元素归类在一起。本规范使用以下广泛的类别。
一些元素还属于其他类别,这些类别在本规范的其他部分中定义。
这些类别之间的关系如下。
分节内容、标题内容、短语内容、嵌入式内容和交互式内容都是流内容的类型。元数据有时是流内容。元数据和交互式内容有时是短语内容。嵌入式内容也是一种短语内容,有时是交互式内容。
其他类别也用于特定目的,例如,表单控件使用许多类别来定义通用要求。一些元素具有独特的要求,不适合任何特定类别。
元数据内容是设置其余内容的表示方式或行为,或设置文档与其他文档的关系,或传达其他“带外”信息的内容。
语义主要与元数据相关的其他命名空间中的元素(例如 RDF)也是元数据内容。
因此,在 XML 序列化中,可以使用 RDF,如下所示。
< html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:r = "http://www.w3.org/1999/02/22-rdf-syntax-ns#" xml:lang = "en" >
< head >
< title > Hedral's Home Page</ title >
< r:RDF >
< Person xmlns = "http://www.w3.org/2000/10/swap/pim/contact#"
r:about = "https://hedral.example.com/#" >
< fullName > Cat Hedral</ fullName >
< mailbox r:resource = "mailto:[email protected]" />
< personalTitle > Sir</ personalTitle >
</ Person >
</ r:RDF >
</ head >
< body >
< h1 > My home page</ h1 >
< p > I like playing with string, I guess. Sister says squirrels are fun
too so sometimes I follow her to play with them.</ p >
</ body >
</ html >
但是,这在 HTML 序列化中是不可能的。
文档和应用程序正文中使用的多数元素都归类为流内容。
a
abbr
address
area
(如果它是map
元素的后代)article
aside
audio
b
bdi
bdo
blockquote
br
button
canvas
cite
code
data
datalist
del
details
dfn
dialog
div
dl
em
embed
fieldset
figure
footer
form
h1
h2
h3
h4
h5
h6
header
hgroup
hr
i
iframe
img
input
ins
kbd
label
link
(如果它在正文中允许)main
(如果它是一个层次结构正确的 main
元素)map
mark
math
menu
meta
(如果itemprop
属性存在)meter
nav
noscript
object
ol
output
p
picture
pre
progress
q
ruby
s
samp
script
search
section
select
slot
small
span
strong
sub
sup
svg
table
template
textarea
time
u
ul
var
video
wbr
分区内容 是定义了header
和footer
元素范围的内容。
标题内容 定义了部分的标题 (无论是否使用分区内容 元素显式标记,或者由标题内容本身隐式定义)。
短语内容 是文档的文本,以及在段落内级别上标记该文本的元素。 短语内容 的运行形成段落。
a
abbr
area
(如果它是map
元素的后代)audio
b
bdi
bdo
br
button
canvas
cite
code
data
datalist
del
dfn
em
embed
i
iframe
img
input
ins
kbd
label
link
(如果它在正文中允许)map
mark
math
meta
(如果itemprop
属性存在)meter
noscript
object
output
picture
progress
q
ruby
s
samp
script
select
slot
small
span
strong
sub
sup
svg
template
textarea
time
u
var
video
wbr
大多数被归类为短语内容的元素只能包含自身被归类为短语内容的元素,而不是任何流内容。
文本,在内容模型的上下文中,意味着什么都没有,或者Text
节点。 文本 有时被用作独立的内容模型,但它也是短语内容,并且可以是元素间空白 (如果Text
节点为空或只包含ASCII 空白)。
Text
节点和属性值必须由标量值 组成,不包括非字符 和控制字符,除了ASCII 空白。 本规范根据其确切上下文,对Text
节点和属性值的精确值包含额外的约束。
嵌入内容 是将另一个资源导入文档,或者将来自另一个词汇表的内容插入文档的内容。
来自HTML 命名空间 以外的命名空间并且传递内容而不是元数据的元素,对于本规范中定义的内容模型而言是嵌入内容。 (例如,MathML 或 SVG)。
一些嵌入内容元素可以具有回退内容:当无法使用外部资源时 (例如,由于它属于不支持的格式) 要使用的内容。 元素定义说明了回退 (如果有) 是什么。
交互式内容 是专门用于用户交互的内容。
a
(如果href
属性存在)audio
(如果controls
属性存在)button
details
embed
iframe
img
(如果usemap
属性存在)input
(如果type
属性不在 状态中)label
select
textarea
video
(如果controls
属性存在)作为一般规则,其内容模型允许任何流内容 或短语内容 的元素应在其内容 中至少有一个节点是可感知内容 并且没有指定 属性。
可感知内容 通过提供一些后代非空文本,或者用户可以听到的内容 (audio
元素) 或观看的内容 (video
、img
或canvas
元素) 或以其他方式交互的内容 (例如,交互式表单控件),使元素非空。
但是,此要求不是强制性要求,因为在许多情况下,元素可以合法地为空,例如,当它用作占位符时,该占位符稍后将由脚本填充,或者当元素是模板的一部分时,并且在大多数页面上会填充,但在某些页面上不相关。
鼓励一致性检查器为作者提供一种机制来查找未能满足此要求的元素,作为一种创作帮助。
以下元素是可感知内容
a
abbr
address
article
aside
audio
(如果controls
属性存在)b
bdi
bdo
blockquote
button
canvas
cite
code
data
del
details
dfn
div
dl
(如果元素的子级包含至少一个名称-值组)em
embed
fieldset
figure
footer
form
h1
h2
h3
h4
h5
h6
header
hgroup
i
iframe
img
input
(如果type
属性不在 状态中)ins
kbd
label
main
map
mark
math
menu
(如果元素的子级包含至少一个li
元素)meter
nav
object
ol
(如果元素的子级包含至少一个li
元素)output
p
picture
pre
progress
q
ruby
s
samp
search
section
select
small
span
strong
sub
sup
svg
table
textarea
time
u
ul
(如果元素的子级包含至少一个li
元素)var
video
脚本支持元素 是那些本身不表示 任何内容 (即它们没有渲染) 的元素,但用于支持脚本,例如,为用户提供功能。
以下元素是脚本支持元素
一些元素被描述为透明的;它们在内容模型的描述中包含“透明”。 透明 元素的内容模型源自其父元素的内容模型:在“透明”内容模型部分中需要的元素与父元素的内容模型部分中需要的元素相同,透明元素在其中找到自己。
在一些情况下,当透明元素相互嵌套时,需要迭代地应用该过程。
考虑以下标记片段
< p >< object >< param >< ins >< map >< a href = "/" > Apples</ a ></ map ></ ins ></ object ></ p >
要检查 "Apples" 是否允许在 a
元素中使用,需要检查内容模型。 a
元素的内容模型是透明的,map
元素的内容模型也是透明的,ins
元素的内容模型也是透明的,object
元素中包含 ins
元素的部分也是透明的。 object
元素位于 p
元素中,其内容模型为 短语内容。 因此,允许使用 "Apples",因为文本属于短语内容。
当一个透明元素没有父元素时,其内容模型中 "透明" 部分应被视为接受任何 流内容。
本节定义的术语 段落 不仅用于定义 p
元素。 此处定义的 段落 概念用于描述如何解释文档。 p
元素只是标记 段落 的几种方式之一。
一个 段落 通常是一段 短语内容,构成一段文本,包含一个或多个句子,讨论特定主题,如同在排版中一样,但也可用作更一般的主题分组。 例如,地址也是一个段落,表单的一部分、副标题或诗歌中的一节也是段落。
在以下示例中,一个部分包含两个段落。 此外还有一个标题,包含非段落的短语内容。 请注意,注释和 元素间空格 不构成段落。
< section >
< h2 > Example of paragraphs</ h2 >
This is the < em > first</ em > paragraph in this example.
< p > This is the second.</ p >
<!-- This is not a paragraph. -->
</ section >
在 流内容 中,段落的定义取决于文档在没有 a
、ins
、del
和 map
元素的情况下呈现的样式,因为这些元素具有混合内容模型,可以跨越段落边界,如以下前两个示例所示。
通常,应避免元素跨越段落边界。 维护此类标记可能很困难。
以下示例使用先前示例中的标记,并在部分标记周围添加 ins
和 del
元素以表明文本已更改(虽然在这种情况下,更改本身并没有多大意义)。 请注意,尽管存在 ins
和 del
元素——ins
元素跨越标题和第一个段落,del
元素跨越两个段落之间的边界——此示例与上一个示例具有完全相同的段落。
< section >
< ins >< h2 > Example of paragraphs</ h2 >
This is the < em > first</ em > paragraph in</ ins > this example< del > .
< p > This is the second.</ p ></ del >
<!-- This is not a paragraph. -->
</ section >
令 view 为 DOM 的视图,其中所有 a
、ins
、del
和 map
元素都被其 内容 替换。 然后,在 view 中,对于每个在接受除 短语内容 之外的内容以及 短语内容 的元素中,由兄弟 短语内容 节点组成的、未被其他类型内容打断的运行,令 first 为运行的第一个节点,令 last 为运行的最后一个节点。 对于每个由至少一个既不是 嵌入内容 也不是 元素间空格 的节点组成的运行,在原始 DOM 中,从 first 之前的立即位置到 last 之后的立即位置,存在一个段落。(因此,段落可以跨越 a
、ins
、del
和 map
元素。)
一致性检查器可能会向作者发出警告,提醒他们存在段落相互重叠的情况(这种情况可能发生在 object
、video
、audio
和 canvas
元素中,以及通过允许进一步嵌入 HTML 的其他命名空间中的元素间接发生,例如 SVG svg
或 MathML math
)。
当没有其他内容可以将段落相互分隔时,p
元素可用于包装各个段落。
在以下示例中,链接跨越了第一个段落的一半、两个段落之间标题的全部内容以及第二个段落的一半。 它跨越了段落和标题。
< header >
Welcome!
< a href = "about.html" >
This is home of...
< h1 > The Falcons!</ h1 >
The Lockheed Martin multirole jet fighter aircraft!
</ a >
This page discusses the F-16 Fighting Falcon's innermost secrets.
</ header >
这是另一种标记方式,这次显式地显示了段落,并将一个链接元素拆分为三个
< header >
< p > Welcome! < a href = "about.html" > This is home of...</ a ></ p >
< h1 >< a href = "about.html" > The Falcons!</ a ></ h1 >
< p >< a href = "about.html" > The Lockheed Martin multirole jet
fighter aircraft!</ a > This page discusses the F-16 Fighting
Falcon's innermost secrets.</ p >
</ header >
当使用某些定义回退内容的元素时,段落可能会重叠。 例如,在以下部分
< section >
< h2 > My Cats</ h2 >
You can play with my cat simulator.
< object data = "cats.sim" >
To see the cat simulator, use one of the following links:
< ul >
< li >< a href = "cats.sim" > Download simulator file</ a >
< li >< a href = "https://sims.example.com/watch?v=LYds5xY4INU" > Use online simulator</ a >
</ ul >
Alternatively, upgrade to the Mellblom Browser.
</ object >
I'm quite proud of it.
</ section >
有五个段落
object
元素。第一个段落与其他四个段落重叠。 支持 "cats.sim" 资源的用户代理只会显示第一个段落,但显示回退的用户代理会将第一个段落的第一个句子误认为与第二个段落同属一个段落,并将最后一个段落误认为是第一个段落第二个句子的开头。
为了避免这种混乱,可以使用显式的 p
元素。 例如
< section >
< h2 > My Cats</ h2 >
< p > You can play with my cat simulator.</ p >
< object data = "cats.sim" >
< p > To see the cat simulator, use one of the following links:</ p >
< ul >
< li >< a href = "cats.sim" > Download simulator file</ a >
< li >< a href = "https://sims.example.com/watch?v=LYds5xY4INU" > Use online simulator</ a >
</ ul >
< p > Alternatively, upgrade to the Mellblom Browser.</ p >
</ object >
< p > I'm quite proud of it.</ p >
</ section >
以下属性是所有 HTML 元素(即使是本规范中未定义的元素)通用的属性,可以在所有元素上指定。
accesskey
autocapitalize
autocorrect
autofocus
contenteditable
dir
draggable
enterkeyhint
inert
inputmode
is
itemid
itemprop
itemref
itemscope
itemtype
lang
nonce
popover
spellcheck
style
tabindex
title
translate
writingsuggestions
这些属性仅由本规范定义为 HTML 元素 的属性。 当本规范提到元素具有这些属性时,不定义为具有这些属性的命名空间中的元素不得被视为具有这些属性的元素。
例如,在以下 XML 片段中,"bogus
" 元素没有本规范中定义的 dir
属性,尽管它具有一个名称为 "dir
" 的属性。 因此,最内层 span
元素的 方向性 为 'rtl',它从 div
元素继承而来,并通过 "bogus
" 元素间接传递。
< div xmlns = "http://www.w3.org/1999/xhtml" dir = "rtl" >
< bogus xmlns = "https://example.net/ns" dir = "ltr" >
< span xmlns = "http://www.w3.org/1999/xhtml" >
</ span >
</ bogus >
</ div >
所有当前引擎中都支持。
DOM 定义了用户代理对任何命名空间中任何元素的 class
、id
和 slot
属性的要求。 [DOM]
可以在所有 HTML 元素 上指定 class
、id
和 slot
属性。
当在 HTML 元素 上指定时,class
属性的值必须是一个 空格分隔的标记集,表示该元素所属的各种类。
为元素分配类会影响 CSS 中的选择器匹配、DOM 中的 getElementsByClassName()
方法以及其他此类功能。
对作者在 class
属性中可以使用哪些标记没有额外的限制,但建议作者使用描述内容性质的值,而不是描述内容期望呈现方式的值。
当在 HTML 元素 上指定时,id
属性值必须在元素 树 中的所有 ID 中是唯一的,并且必须包含至少一个字符。 该值不能包含任何 ASCII 空格。
id
属性指定其元素的 唯一标识符 (ID)。
对 ID 可以采用什么形式没有其他限制;特别地,ID 可以仅由数字组成、以数字开头、以下划线开头、仅由标点符号组成等。
元素的 唯一标识符 可用于多种目的,最重要的是用作使用 片段 链接到文档特定部分的方法、用作在脚本编写时定位元素的方法,以及用作从 CSS 样式化特定元素的方法。
标识符是不透明字符串。不应从 id
属性的值中推导出特定含义。
对于 slot
属性,没有针对 HTML 元素 的特定一致性要求。
使用 slot
属性向元素 分配槽位:具有 slot
属性的元素被 分配 给由 slot
元素创建的 槽位,其 name 属性的值与该 slot
属性的值匹配 - 但仅当该 slot
元素出现在其 影子树 中,其 根 的 宿主 具有相应的 slot
属性值时。
为了使辅助技术产品能够公开比使用 HTML 元素和属性所能实现的更细粒度的接口,可以指定一组 用于辅助技术产品的注释(ARIA role
和 aria-*
属性)。[ARIA]
以下 事件处理程序内容属性 可以指定在任何 HTML 元素 上
onauxclick
onbeforeinput
onbeforematch
onbeforetoggle
onblur
*oncancel
oncanplay
oncanplaythrough
onchange
onclick
onclose
oncontextlost
oncontextmenu
oncontextrestored
oncopy
oncuechange
oncut
ondblclick
ondrag
ondragend
ondragenter
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror
*onfocus
*onformdata
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload
*onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onpaste
onpause
onplay
onplaying
onprogress
onratechange
onreset
onresize
*onscroll
*onscrollend
*onsecuritypolicyviolation
onseeked
onseeking
onselect
onslotchange
onstalled
onsubmit
onsuspend
ontimeupdate
ontoggle
onvolumechange
onwaiting
onwheel
用星号标记的属性在指定为 body
元素时具有不同的含义,因为这些元素公开 事件处理程序,这些事件处理程序与具有相同名称的 Window
对象相同。
虽然这些属性适用于所有元素,但它们并不适用于所有元素。例如,只有 媒体元素 会接收到用户代理触发的 volumechange
事件。
自定义数据属性(例如 data-foldername
或 data-msgid
)可以在任何 HTML 元素 上指定,以存储特定于页面的自定义数据、状态、注释等。
在 HTML 文档 中,如果 HTML 命名空间 中的元素指定了 xmlns
属性,则它必须且仅当它的确切值为“http://www.w3.org/1999/xhtml
”时。这并不适用于 XML 文档。
在 HTML 中,xmlns
属性没有任何作用。它基本上是一个护身符。它被允许只是为了使从 XML 迁移到 XML 和从 XML 迁移到 XML 变得更容易。当由 HTML 解析器 解析时,该属性最终将位于没有命名空间的位置,而不是像 XML 中的命名空间声明属性那样位于“http://www.w3.org/2000/xmlns/
”命名空间中。
在 XML 中,xmlns
属性是命名空间声明机制的一部分,元素实际上不能在没有指定命名空间的情况下具有 xmlns
属性。
XML 还允许在 XML 命名空间 中的任何 XML 文档 中的任何元素上使用 xml:space
属性。此属性对 HTML 元素 没有影响,因为 HTML 中的默认行为是保留空格。 [XML]
无法在 text/html
语法中对 HTML 元素 上的 xml:space
属性进行序列化。
title
属性所有当前引擎中都支持。
title
属性 表示 元素的提示信息,例如适合作为工具提示的信息。在链接上,这可能是目标资源的标题或描述;在图像上,这可能是图像来源或图像的描述;在段落上,这可能是脚注或对文本的评论;在引用上,这可能是关于来源的更多信息;在 交互式内容 上,这可能是元素的标签或使用说明;等等。该值为文本。
目前不建议依赖 title
属性,因为许多用户代理没有以本规范要求的无障碍方式公开该属性(例如,需要使用指向设备,如鼠标,才能使工具提示出现,这排除了仅使用键盘的用户和仅使用触控的用户,例如任何拥有现代手机或平板电脑的用户)。
如果从元素中省略了此属性,则意味着最近祖先 HTML 元素 的 title
属性(已设置)也与该元素相关。设置该属性将覆盖此操作,明确表示任何祖先的提示信息与该元素无关。将该属性设置为空字符串表示该元素没有提示信息。
如果 title
属性的值包含 U+000A 换行符 (LF) 字符,则内容将被分成多行。每个 U+000A 换行符 (LF) 字符代表一个换行符。
建议谨慎使用 title
属性中的换行符。
例如,以下代码片段实际上定义了缩略语的展开,其中包含换行符
< p > My logs show that there was some interest in < abbr title = "Hypertext
Transport Protocol" > HTTP</ abbr > today.</ p >
某些元素(例如 link
、abbr
和 input
)为 title
属性定义了除上述语义之外的其他语义。
元素的 提示信息 是以下算法返回的值,该算法在返回一个值后就会中止。当该算法返回空字符串时,表示没有提示信息。
用户代理应在元素具有 提示信息 时通知用户,否则这些信息将无法发现。
所有当前引擎中都支持。
lang
和 xml:lang
属性所有当前引擎中都支持。
lang
属性(位于没有命名空间的位置)指定元素内容以及任何包含文本的元素属性的主要语言。它的值必须是有效的 BCP 47 语言标签,或者为空字符串。将该属性设置为空字符串表示主要语言未知。 [BCP47]
lang
属性位于 XML 命名空间 中,在 XML 中定义。 [XML]
如果元素中省略了这些属性,则该元素的语言与它的父元素的语言相同(如果有)。(除了 slot
元素在 影子树 中)。
在任何 HTML 元素 上都可以使用没有命名空间的 lang
属性。
在 XML 文档 中,可以将 XML 命名空间 中的 lang
属性 用于 HTML 元素,以及其他命名空间中的元素(如果相关规范允许)。(特别是,MathML 和 SVG 允许在它们的元素上指定 XML 命名空间 中的 lang
属性)。如果在同一个元素上同时指定了没有命名空间的 lang
属性和 XML 命名空间 中的 lang
属性,则当以 ASCII 不区分大小写 的方式进行比较时,它们必须具有完全相同的值。
作者不得在 HTML 文档 中的 HTML 元素 上使用 XML 命名空间 中的 lang
属性。为了便于迁移到 XML 和从 XML 迁移,作者可以在 HTML 文档 中的 HTML 元素 上指定一个没有命名空间、没有前缀且局部名称为 "xml:lang
" 的属性,但只有在也指定了没有命名空间的 lang
属性时才能指定此类属性,并且当以 ASCII 不区分大小写 的方式进行比较时,这两个属性必须具有相同的值。
没有命名空间、没有前缀且局部名称为 "xml:lang
" 的属性对语言处理没有任何影响。
为了确定节点的 语言,用户代理必须使用以下列表中的第一个适用步骤。
lang
属性 的元素。使用该属性的值。
lang
属性。使用该属性的值。
如果设置了 pragma-set default language,则该语言就是该节点的语言。如果没有设置 pragma-set default language,则必须使用来自更高级别协议(例如 HTTP)(如果有)的语言信息作为最终的备用语言。在没有此类语言信息的情况下,以及更高级别协议报告多种语言的情况下,该节点的语言未知,相应的语言标签为空字符串。
如果结果值不是一个公认的语言标签,则必须将其视为具有给定语言标签的未知语言,与所有其他语言不同。为了便于往返或与期望语言标签的其他服务进行通信,用户代理应将未知语言标签通过未修改的方式传递,并将其标记为 BCP 47 语言标签,以便后续服务不会将数据解释为其他类型的语言描述。 [BCP47]
因此,例如,具有 lang="xyzzy"
的元素将与选择器 :lang(xyzzy)
匹配(例如在 CSS 中),但它不会与 :lang(abcde)
匹配,即使两者都是同样无效的。类似地,如果协同工作的网页浏览器和屏幕阅读器就元素的语言进行通信,浏览器会告诉屏幕阅读器语言是 "xyzzy",即使它知道它是无效的,只是以防屏幕阅读器最终确实支持具有该标签的语言。即使屏幕阅读器支持 BCP 47 和另一种用于编码语言名称的语法,并且在该其他语法中字符串 "xyzzy" 是一种表示白俄罗斯语的方式,屏幕阅读器开始将文本视为白俄罗斯语也是 不正确 的,因为 "xyzzy" 不是 BCP 47 代码中描述白俄罗斯语的方式(BCP 47 使用代码 "be" 表示白俄罗斯语)。
如果结果值为空字符串,则必须将其解释为意味着该节点的语言明确未知。
用户代理可以使用元素的语言来确定适当的处理或呈现(例如,在选择适当的字体或发音、选择词典或选择表单控件(如日期选择器)的用户界面中)。
所有当前引擎中都支持。
lang
IDL 属性 必须 反映 没有命名空间的 lang
内容属性。
translate
属性 所有当前引擎中都支持。
translate
属性 用于指定当页面本地化时,元素的属性值及其 Text
节点子节点的值是否要翻译,或者是否要保持不变。它是一个 枚举属性,具有以下关键字和状态。
关键字 | 状态 | 简要描述 |
---|---|---|
yes
| yes | 将 翻译模式 设置为 translate-enabled。 |
(空字符串) | ||
no
| no | 将 翻译模式 设置为 no-translate。 |
该属性的 缺失值默认值 和 无效值默认值 都是 inherit 状态。
每个元素(即使是非 HTML 元素)都具有一个 翻译模式,该模式处于 translate-enabled 状态或 no-translate 状态。如果 HTML 元素 的 translate
属性处于 yes 状态,则该元素的 翻译模式 处于 translate-enabled 状态;否则,如果该元素的 translate
属性处于 no 状态,则该元素的 翻译模式 处于 no-translate 状态。否则,该元素的 translate
属性处于 inherit 状态,或者该元素不是 HTML 元素 因此没有 translate
属性;在这两种情况下,该元素的 翻译模式 与其 父元素(如果有)的翻译模式相同,或者如果该元素的 父元素 为空,则处于 translate-enabled 状态。
当元素处于 translate-enabled 状态时,该元素的 可翻译属性 及其 Text
节点子节点的值在页面本地化时应被翻译。
当元素处于 no-translate 状态时,该元素的属性值及其 Text
节点子节点的值在页面本地化时应保持原样,例如,因为该元素包含一个人的姓名或计算机程序的名称。
以下属性是 可翻译属性。
abbr
在 th
元素上alt
在 area
、img
和 input
元素上content
在 meta
元素上,如果 name
属性指定了一个元数据名称,其值为已知可翻译。download
在 a
和 area
元素上label
在 optgroup
、option
和 track
元素上lang
在 HTML 元素 上;必须被“翻译”以匹配翻译中使用的语言。placeholder
在 input
和 textarea
元素上srcdoc
在 iframe
元素上;必须被解析并递归处理。style
在 HTML 元素 上;必须解析并递归处理(例如,对于 'content' 属性的值)。title
在所有 HTML 元素 上value
在 input
元素上,其 type
属性处于 按钮 状态或 重置按钮 状态其他规范可能会定义其他属性,这些属性也是 可翻译属性。例如,ARIA 将 aria-label
属性定义为可翻译的。
translate
IDL 属性在获取时,如果元素的 翻译模式 为 translate-enabled,则必须返回 true;否则返回 false。在设置时,如果新值为 true,则必须将内容属性的值设置为 "yes
";否则将内容属性的值设置为 "no
"。
在本例中,当页面本地化时,文档中的所有内容都将被翻译,除了示例键盘输入和示例程序输出。
<!DOCTYPE HTML>
< html lang = en > <!-- default on the document element is translate=yes -->
< head >
< title > The Bee Game</ title > <!-- implied translate=yes inherited from ancestors -->
</ head >
< body >
< p > The Bee Game is a text adventure game in English.</ p >
< p > When the game launches, the first thing you should do is type
< kbd translate = no > eat honey</ kbd > . The game will respond with:</ p >
< pre >< samp translate = no > Yum yum! That was some good honey!</ samp ></ pre >
</ body >
</ html >
dir
属性所有当前引擎中都支持。
dir
属性是一个 枚举属性,具有以下关键字和状态
关键字 | 状态 | 简要描述 |
---|---|---|
ltr
| ltr | 元素的内容被显式地方向隔离为从左到右的文本。 |
rtl
| rtl | 元素的内容被显式地方向隔离为从右到左的文本。 |
auto
| auto | 元素的内容被显式地方向隔离为文本,但方向需要使用元素的内容以编程方式确定(如下所述)。 |
auto
状态使用的启发式方法非常粗略(它只查看具有强方向性的第一个字符,方式类似于双向算法中的段落级别确定)。强烈建议作者只在文本方向真正未知且无法应用更好的服务器端启发式方法时才使用此值。 [BIDI]
属性的 缺失值默认值 和 无效值默认值 都是 未定义 状态。
元素的 方向性(任何元素,不仅是 HTML 元素)是 'ltr' 或 'rtl'。为了计算给定元素 element 的 方向性,请根据 element 的 dir
属性状态进行切换
由于 dir
属性只为 HTML 元素 定义,因此它不能出现在其他命名空间的元素上。因此,来自其他命名空间的元素最终都会使用 父方向性。
auto-directionality
表单关联元素是
为了计算给定元素 element 的 自动方向性
如果 element 是一个 自动方向性表单关联元素
返回 element 的 包含文本自动方向性,其中 canExcludeRoot 设置为 false。
为了计算具有布尔值 canExcludeRoot 的元素 element 的 包含文本自动方向性
返回 null。
为了计算给定 Text
节点 text 的 文本节点方向性
令 codePoint 为 text 的 数据 中第一个双向字符类型为 L、AL 或 R 的代码点。
如果 codePoint 的双向字符类型为 AL 或 R,则返回 'rtl'。
如果 codePoint 的双向字符类型为 L,则返回 'ltr'。
为了计算给定元素 element 的 父方向性
此属性 具有涉及双向算法的渲染要求。
一个 HTML 元素 的 属性的方向性,在属性文本以某种方式包含在渲染中时使用,根据以下列表中的第一个适当步骤集确定。
dir
属性处于 auto 状态找到属性值中第一个(在逻辑顺序中)属于双向字符类型 L、AL 或 R 的字符。 [BIDI]
以下属性是 方向性属性
abbr
在 th
元素上alt
在 area
、img
和 input
元素上content
在 meta
元素上,如果 name
属性指定元数据名称,其值主要用于人类阅读而不是机器阅读label
在 optgroup
、option
和 track
元素上placeholder
在 input
和 textarea
元素上title
在所有 HTML 元素 上document.dir [ = value ]
可以设置,为 "ltr
"、"rtl
" 或 "auto
",以替换 html
元素 的 dir
属性值。
如果没有 html
元素,则返回空字符串,并忽略新值。
所有当前引擎中都支持。
元素上的 dir
IDL 属性必须 反映 该元素的 dir
内容属性,仅限于已知值。
所有当前引擎中都支持。
Document
对象上的 dir
IDL 属性必须 反映 html
元素 的 dir
内容属性(如果有),仅限于已知值。如果没有这样的元素,则属性必须返回空字符串,并在设置时不执行任何操作。
强烈建议作者使用 dir
属性来指示文本方向,而不是使用 CSS,因为这样即使没有 CSS,他们的文档也能继续正确渲染(例如,被搜索引擎解释)。
此标记片段是 IM 对话的片段。
< p dir = auto class = "u1" >< b >< bdi > Student</ bdi > :</ b > How do you write "What's your name?" in Arabic?</ p >
< p dir = auto class = "u2" >< b >< bdi > Teacher</ bdi > :</ b > ما اسمك؟</ p >
< p dir = auto class = "u1" >< b >< bdi > Student</ bdi > :</ b > Thanks.</ p >
< p dir = auto class = "u2" >< b >< bdi > Teacher</ bdi > :</ b > That's written "شكرًا".</ p >
< p dir = auto class = "u2" >< b >< bdi > Teacher</ bdi > :</ b > Do you know how to write "Please"?</ p >
< p dir = auto class = "u1" >< b >< bdi > Student</ bdi > :</ b > "من فضلك", right?</ p >
给定一个合适的样式表以及 p
元素的默认对齐样式(即使文本对齐到段落的起始边缘),生成的渲染可能是这样的
如前所述,auto
值不是万能药。此示例中的最后一段被误解为从右到左的文本,因为它以阿拉伯字符开头,导致 "right?" 位于阿拉伯文本的左侧。
style
属性所有当前引擎中都支持。
所有 HTML 元素 都可以设置 style
内容属性。这是一个 样式属性,如 CSS 样式属性 中所定义。 [CSSATTR]
在支持 CSS 的用户代理中,必须根据 样式属性 的规则,在添加属性或更改属性值时解析属性的值。 [CSSATTR]
但是,如果 是否应通过内容安全策略阻止元素的内联行为? 算法在对属性的 元素、"style attribute
" 和属性值执行时返回 "Blocked
",则属性值中定义的样式规则不得应用于 元素。 [CSP]
使用其元素上的 style
属性的文档,即使这些属性被删除,也必须仍然可理解和可用。
特别是,使用 style
属性来隐藏和显示内容,或传递文档中未包含的含义,是不符合规范的。(要隐藏和显示内容,请使用 属性。)
element.style
返回元素的 style
属性的 CSSStyleDeclaration
对象。
style
IDL 属性在 CSS 对象模型 中定义。 [CSSOM]
在以下示例中,指的是颜色的单词使用 span
元素和 style
属性标记,以便这些单词在视觉媒体中以相关颜色显示。
< p > My sweat suit is < span style = "color: green; background:
transparent" > green</ span > and my eyes are < span style = "color: blue;
background: transparent" > blue</ span > .</ p >
data-*
属性 嵌入自定义不可见数据所有当前引擎中都支持。
一个 自定义数据属性 是一个没有命名空间的属性,其名称以字符串 "data-
" 开头,连字符后至少有一个字符,与 XML 兼容,并且不包含任何 ASCII 大写字母。
在 HTML 文档 中,HTML 元素 上的所有属性名称都会自动转换为 ASCII 小写,因此 ASCII 大写字母的限制不会影响此类文档。
自定义数据属性 用于存储自定义数据、状态、注释等,这些数据对页面或应用程序是私有的,没有更合适的属性或元素。
这些属性不打算被使用这些属性的网站管理员不知道的软件使用。对于要由多个独立工具使用的通用扩展,要么应该扩展本规范以显式提供该功能,要么应该使用像 微数据 这样的技术(使用标准化词汇表)。
例如,一个关于音乐的网站可以使用自定义数据属性来注释表示专辑中轨道的列表项,这些属性包含每个轨道的长度。然后,该网站本身可以使用此信息来允许用户按轨道长度对列表进行排序,或过滤特定长度的轨道。
< ol >
< li data-length = "2m11s" > Beyond The Sea</ li >
...
</ ol >
然而,用户使用与该音乐网站无关的通用软件来通过查看这些数据来搜索特定长度的轨道是不合适的。
这是因为这些属性旨在供网站自己的脚本使用,而不是通用扩展机制,不能用于公开使用的元数据。
类似地,页面作者可以编写标记来提供他们想要使用的翻译工具的信息
< p > The third < span data-mytrans-de = "Anspruch" > claim</ span > covers the case of < span
translate = "no" > HTML</ span > markup.</ p >
在此示例中,"data-mytrans-de
" 属性为 MyTrans 产品提供了在将 "claim" 翻译成德语时使用的特定文本。但是,标准的 translate
属性用于告诉它,在所有语言中,"HTML" 都保持不变。当有标准属性可用时,就不需要使用 自定义数据属性。
在本示例中,自定义数据属性用于存储对 PaymentRequest
的功能检测结果,可用于在 CSS 中以不同方式设置结账页面的样式。
< script >
if ( 'PaymentRequest' in window) {
document. documentElement. dataset. hasPaymentRequest = '' ;
}
</ script >
此处,data-has-payment-request
属性实际上用作 布尔属性;检查属性的存在与否就足够了。但是,如果作者愿意,可以稍后用一些值填充它,例如,指示功能有限。
每个 HTML 元素 可以包含任意数量的 自定义数据属性,并使用任意值。
作者应仔细设计此类扩展,以便在忽略属性并删除任何关联的 CSS 时,页面仍然可以使用。
用户代理不得根据这些属性或值推导出任何实现行为。面向用户代理的规范不得将这些属性定义为具有任何有意义的值。
JavaScript 库可以使用 自定义数据属性,因为它们被视为其所用页面的组成部分。鼓励使用多个作者重用的库的作者在其属性名中包含其名称,以降低冲突风险。在有意义的情况下,也鼓励库作者使属性名中使用的确切名称可定制,这样,那些不知情地选择了相同名称的库的作者就可以在同一页面上使用这些库,并且即使这些版本彼此之间不兼容,也可以在同一页面上使用特定库的多个版本。
例如,名为“DoQuery”的库可以使用诸如data-doquery-range
之类的属性名,而名为“jJo”的库可以使用诸如data-jjo-range
之类的属性名。jJo 库还可以提供一个 API 来设置要使用的前缀(例如,J.setDataPrefix('j2')
,使属性具有诸如data-j2-range
之类的名称)。
element.dataset
所有当前引擎中都支持。
所有当前引擎中都支持。
返回元素的 data-*
属性的 DOMStringMap
对象。
带连字符的名称将转换为驼峰式命名法。例如,data-foo-bar=""
将变为 element.dataset.fooBar
。
IDL 属性为元素上的所有 dataset
data-*
属性提供了便捷的访问器。在获取时,
IDL 属性必须返回一个 dataset
DOMStringMap
,其关联元素为该元素。
接口用于 DOMStringMap
属性。每个 dataset
都有一个 关联元素。DOMStringMap
[Exposed =Window ,
LegacyOverrideBuiltIns ]
interface DOMStringMap {
getter DOMString (DOMString name );
[CEReactions ] setter undefined (DOMString name , DOMString value );
[CEReactions ] deleter undefined (DOMString name );
};
要 获取 DOMStringMap
的名称-值对,请运行以下算法
令 list 为一个空名称-值对列表。
对于
的 关联元素 上的每个内容属性,其前五个字符为字符串“DOMStringMap
data-
”,其剩余字符(如果有)不包含任何 ASCII 大写字母,按这些属性在元素的 属性列表 中的列出顺序,将一个名称-值对添加到 list 中,该对的名称是属性名的前五个字符被移除后的名称,其值是属性的值。
对于 list 中的每个名称,对于名称中每个后面跟着 ASCII 小写字母 的 U+002D 连字符 (-),移除 U+002D 连字符 (-) 并用相同字符 转换为 ASCII 大写字母 替换跟随它的字符。
返回 list。
对象在任何时间点的 支持的属性名 是从 获取 DOMStringMap
DOMStringMap
的名称-值对 返回的每个对的名称,按返回的顺序排列。
要 确定
的命名属性的 name 的值,请返回从 获取 DOMStringMap
DOMStringMap
的名称-值对 返回的列表中,名称组件为 name 的名称-值对的值组件。
要 设置
的新命名属性的值 或 设置 DOMStringMap
的现有命名属性的值,对于给定的属性名 name 和新值 value,请运行以下步骤DOMStringMap
如果 name 包含 U+002D 连字符 (-) 后面跟着 ASCII 小写字母,则抛出 "SyntaxError
" DOMException
。
对于 name 中的每个 ASCII 大写字母,在字符前面插入 U+002D 连字符 (-),并用相同字符 转换为 ASCII 小写字母 替换字符。
在 name 的前面插入字符串 data-
。
如果 name 与 XML 的 Name
产生式不匹配,则抛出 "InvalidCharacterError
" DOMException
。
设置
的 关联元素 的属性值,使用 name 和 value。DOMStringMap
要 删除
的现有命名属性 name,请运行以下步骤DOMStringMap
对于 name 中的每个 ASCII 大写字母,在字符前面插入 U+002D 连字符 (-),并用相同字符 转换为 ASCII 小写字母 替换字符。
在 name 的前面插入字符串 data-
。
按名称移除属性,给定 name 和
的 关联元素。DOMStringMap
此算法仅由 Web IDL
为由早期的 获取 DOMStringMap
的名称-值对 算法给出的名称调用。 [WEBIDL]
如果网页希望一个元素代表一艘宇宙飞船(例如,作为游戏的组成部分),则它必须使用 class
属性以及 data-*
属性
< div class = "spaceship" data-ship-id = "92432"
data-weapons = "laser 2" data-shields = "50%"
data- x = "30" data-y = "10" data-z = "90" >
< button class = "fire"
onclick = "spaceships[this.parentNode.dataset.shipId].fire()" >
Fire
</ button >
</ div >
请注意,带连字符的属性名称在 API 中如何转换为驼峰式命名法。
给定以下片段和具有类似结构的元素
< img class = "tower" id = "tower5" data- x = "12" data-y = "5"
data-ai = "robotarget" data-hp = "46" data-ability = "flames"
src = "towers/rocket.png" alt = "Rocket Tower" >
...可以想象一个函数 splashDamage()
,它接收一些参数,第一个参数是要处理的元素
function splashDamage( node, x, y, damage) {
if ( node. classList. contains( 'tower' ) && // checking the 'class' attribute
node. dataset. x == x && // reading the 'data-x' attribute
node. dataset. y == y) { // reading the 'data-y' attribute
var hp = parseInt( node. dataset. hp); // reading the 'data-hp' attribute
hp = hp - damage;
if ( hp < 0 ) {
hp = 0 ;
node. dataset. ai = 'dead' ; // setting the 'data-ai' attribute
delete node. dataset. ability; // removing the 'data-ability' attribute
}
node. dataset. hp = hp; // setting the 'data-hp' attribute
}
}
innerText
和 outerText
属性 所有当前引擎中都支持。
element.innerText [ = value ]
返回元素的文本内容“按渲染显示”。
可以设置,用给定的值替换元素的子节点,但将换行符转换为br
元素。
element.outerText [ = value ]
返回元素的文本内容“按渲染显示”。
可以设置,用给定的值替换元素,但将换行符转换为br
元素。
给定一个HTMLElement element,获取文本步骤为
如果element未渲染或用户代理是非 CSS 用户代理,则返回element的后代文本内容。
此步骤可能会产生令人意外的结果,例如,当在未渲染的元素上调用innerText
获取器时,将返回其文本内容,但当在已渲染的元素上访问时,其所有未渲染的子节点将忽略其文本内容。
令results为一个新的空列表。
对于element的每个子节点node
移除results中任何为空字符串的项目。
移除results开头或结尾处任何连续的必需换行符计数项目运行。
替换每个剩余的连续必需换行符计数项目运行,用一个字符串,该字符串包含与必需换行符计数项目中的最大值一样多的 U+000A LF 代码点。
返回results中字符串项目的串联。
所有当前引擎中都支持。
innerText
和 outerText
获取器步骤是返回使用获取文本步骤和this运行的结果。
给定一个节点 node,渲染文本收集步骤如下
如果node的'visibility'的计算值不是 'visible',则返回items。
如果node未渲染,则返回items。出于此步骤的目的,如果'display'属性的计算值不是 'none',则以下元素必须按描述方式执行
items 可能由于 'display:contents' 而非空。
如果node是一个Text
节点,则对于node产生的每个 CSS 文本盒(按内容顺序),在应用 CSS 'white-space' 处理规则和'text-transform' 规则后,计算文本盒的文本,将items设置为所得到字符串的列表,并返回items。 CSS 'white-space' 处理规则略有修改:行尾的可折叠空格始终被折叠,但仅在行是块的最后一行,或以br
元素结尾时才会移除。 应该保留软连字符。 [CSSTEXT]
如果node的'display'的计算值是'table-cell',并且node的CSS 盒不是其包含的'table-row' 盒的最后一个'table-cell' 盒,则附加一个包含单个 U+0009 TAB 代码点的字符串到items。
如果node的'display'的计算值是'table-row',并且node的CSS 盒不是最近的祖先'table' 盒的最后一个'table-row' 盒,则附加一个包含单个 U+000A LF 代码点的字符串到items。
如果node的'display'的使用值是块级或'table-caption',则附加 1(必需换行符计数)到items的开头和结尾。 [CSSDISPLAY]
浮动元素和绝对定位元素属于此类别。
返回items。
请注意,大多数替换元素的后代节点(例如,textarea
、input
和 video
- 但不是 button
)严格地说不是由 CSS 渲染的,因此对于此算法而言没有CSS 盒。
此算法适合被推广到在范围上工作。 然后我们可以将其用作Selection
的字符串化的基础,并可能直接在范围上公开它。 请参阅Bugzilla 错误 10583。
给定一个HTMLElement element 和一个字符串value,设置内部文本步骤为
The innerText
设置步骤是运行 设置内部文本步骤.
The outerText
设置步骤是
如果 this 的父级为 null,则抛出一个 "NoModificationAllowedError
" DOMException
.
如果 fragment 没有 子节点,则 追加 一个新的 Text
节点,其 数据 为空字符串,节点文档 为 this 的 节点文档 到 fragment。
如果 next 为非 null 且 next 的 上一个兄弟节点 为一个 Text
节点,则 与下一个文本节点合并,给定 next 的 上一个兄弟节点.
如果 previous 为一个 Text
节点,则 与下一个文本节点合并,给定 previous.
给定 Document
document 的字符串 input 的 渲染文本片段 是运行以下步骤的结果
令 fragment 为一个新的 DocumentFragment
,其 节点文档 为 document.
令 position 为 input 的 位置变量,最初指向 input 的开头。
令 text 为空字符串。
当 position 未越过 input 的末尾时
返回 fragment.
要 与下一个文本节点合并,给定一个 Text
节点 node
文本内容 在 HTML 元素 中,其 内容 中包含 Text
节点,以及 HTML 元素 的属性中的文本,这些属性允许自由格式文本,可能包含范围为 U+202A 到 U+202E 以及 U+2066 到 U+2069 的字符(双向算法格式化字符)。[BIDI]
鼓励作者使用 dir
属性、bdo
元素和 bdi
元素,而不是手动维护双向算法格式化字符。双向算法格式化字符与 CSS 的交互效果不佳。
用户代理必须实现 Unicode 双向算法,以确定在渲染文档和文档部分时字符的正确排序。[BIDI]
将 HTML 映射到 Unicode 双向算法必须通过以下三种方式之一完成。用户代理必须实现 CSS,特别是 CSS 'unicode-bidi'、'direction' 和 'content' 属性,并且必须在其用户代理样式表中包含此规范的 渲染 部分中给出的使用这些属性的规则,或者,用户代理必须充当它只实现了上述属性并且具有包含所有上述规则的用户代理样式表,但没有让文档中指定的样式表覆盖它们,或者,用户代理必须实现具有等效语义的另一种样式语言。[CSSGC]
以下元素和属性具有 渲染 部分定义的要求,由于本部分中的要求,这些要求适用于所有用户代理(不仅仅是那些 支持建议的默认渲染 的用户代理)
在 HTML 可访问性 API 映射 中定义了用户代理在 HTML 元素 上实现可访问性 API 语义的要求。除了那里的规则外,对于 自定义元素 element,默认 ARIA 角色语义确定如下:[HTMLAAM]
类似地,对于 自定义元素 element,默认 ARIA 状态和属性语义,对于名为 stateOrProperty 的状态或属性,确定如下
如果 element 的 附加内部 为非 null
如果 element 的 附加内部结构 的 获取 stateOrProperty 关联元素 存在,则返回运行它的结果。
如果 element 的 附加内部结构 的 获取 stateOrProperty 关联元素 存在,则返回运行它的结果。
返回 stateOrProperty 的默认值。
这里提到的“默认语义”在 ARIA 中有时也被称为“原生”、“隐式”或“宿主语言”语义。 [ARIA]
这些定义的一个含义是,默认语义可能会随着时间的推移而改变。这使得自定义元素具有与内置元素相同的表达能力;例如,比较 a
元素的默认 ARIA 角色语义如何随着 href
属性的添加或删除而改变。
有关此操作的示例,请参阅 自定义元素部分。
用于检查 HTML 元素 上 ARIA role
和 aria-*
属性使用的符合性检查器要求在 ARIA in HTML 中定义。 [ARIAHTML]