HTML 文档和元素
HTML 文档和元素
HTMLDocument 是面向标记的入口点:它将完整页面或片段解析为 DOM 树,树中的元素都有类型 —— 一个 <a> 变为 HTMLAnchorElement,一个 <input> 变为 HTMLInputElement —— 因此元素特定的行为存在于对应的元素类中。
解析页面和片段
HTMLDocument.parse() 消耗完整页面;HTMLDocument.parse_fragment() 处理部分标记;HTMLDocument.load() 从源读取。结果是一个标准的 DOM 树,所有其他层(CSSOM、选择器、布局)都在其上操作。
类型化元素类
元素层次结构从 HTMLElement 向下继承。表单控件由 HTMLFormElement、HTMLInputElement、HTMLButtonElement、HTMLSelectElement、HTMLTextAreaElement、HTMLOptionElement 和 HTMLFieldSetElement 建模;嵌入式内容由 HTMLImageElement、HTMLIFrameElement、HTMLEmbedElement、HTMLObjectElement 和 HTMLCanvasElement 建模;导航则由 HTMLAnchorElement、HTMLAreaElement 和 HTMLMapElement 建模。
元素插入辅助工具
超出核心 Node 操作,Element 提供位置感知的插入:insert_adjacent_html()、insert_adjacent_text() 和 insert_adjacent_element() 可以相对于现有元素放置内容,而无需手动管理兄弟节点。
Collections
HTMLCollection 和 HTMLOptionsCollection 提供实时、仅限元素的视图,供文档和表单 API 使用,同时还有更通用的 NodeList。
提示与最佳实践
- 对代码片段使用
parse_fragment()—— 它应用片段解析规则,而不是完整文档恢复。 - 当需要特定元素状态(尤其是表单控件)时,请依赖强类型类,而不是将所有内容都视为通用的
Element。 - 在局部插入时,优先使用
insert_adjacent_html()而不是重建子树。
常见问题
| 问题 | 原因 | 修复 |
|---|---|---|
| 片段解析会添加 html/body 包装 | 在部分标记上使用了 parse() | 使用 parse_fragment() |
| 元素缺少表单特定成员 | 节点被键入为通用的 Element | 确认标签已解析为预期的元素类 |
| 插入的标记位于错误的位置 | 相邻插入的定位关键字错误 | 回顾四个标准位置 |
FAQ
parse 与 parse_fragment 有什么区别?
parse() 执行完整文档树的构建;parse_fragment() 使用作用于上下文元素的片段算法——适用于局部标记的正确工具。
元素类是否具有标准类型?
是的——解析会生成带类型的类(HTMLAnchorElement、HTMLInputElement以及其余的 HTMLElement 系列),而不是通用节点。
我可以将 HTMLDocument 输出与 CSSOM 层混合使用吗?
是的——解析得到的树是普通的 DOM;可以像往常一样附加样式表并读取计算后的样式。
API Reference 摘要
| 类/方法 | 描述 |
|---|---|
HTMLDocument.parse | 解析完整页面 |
HTMLDocument.parse_fragment | 解析部分标记 |
HTMLDocument.load | 从来源加载文档 |
HTMLElement | 类型元素层次结构的基类 |
HTMLFormElement | 表单容器元素 |
HTMLCanvasElement | Canvas 元素 |
Element.insert_adjacent_html | 位置感知的标记插入 |