HTML5 中 DOM 扩展（二）

大家好，今天我们继续聊一聊 HTML5 中的 DOM 扩展。在上一篇博文中，我们介绍了 DocumentFragment 和 NodeIterator。今天，我们将重点关注 HTMLDocument 扩展和自定义数据属性。

HTMLDocument 扩展

HTMLDocument 接口扩展了 Document 接口，为操作 HTML 文档提供了更多的方法和属性。这些扩展使我们能够更轻松地处理 HTML 元素、表单和样式表。

HTMLDocument 的方法

getElementById(id)

此方法允许我们通过其 ID 获取文档中的 HTML 元素。这与 Document 的 getElementById() 方法相同，但它具有更具体的 HTML 元素类型返回。

getElementsByTagName(tagName)

此方法返回文档中具有指定标签名的所有 HTML 元素的 NodeList。与 Document 的 getElementsByTagName() 方法类似，但它具有更具体的 HTML 元素类型返回。

getElementsByClassName(className)

此方法返回文档中具有指定类名的所有 HTML 元素的 NodeList。这与 Document 的 getElementsByClassName() 方法相同，但它具有更具体的 HTML 元素类型返回。

querySelector(selector)

此方法使用 CSS 选择器返回文档中匹配第一个匹配元素。它类似于 Document 的 querySelector() 方法，但具有更具体的 HTML 元素类型返回。

querySelectorAll(selector)

此方法使用 CSS 选择器返回文档中匹配的所有元素的 NodeList。它类似于 Document 的 querySelectorAll() 方法，但具有更具体的 HTML 元素类型返回。

HTMLDocument 的属性

body

此属性返回文档的 元素。

head

此属性返回文档的 元素。

documentElement

此属性返回文档的根元素，通常是 元素。

自定义数据属性

HTML5 引入了自定义数据属性，允许我们向 HTML 元素添加附加数据。这些属性以 data-* 前缀开头，并使用驼峰式命名法。

例如，以下代码向

<div data-my-value="Hello World"></div>

const myValue = document.querySelector('div').dataset.myValue;