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表单容器元素
HTMLCanvasElementCanvas 元素
Element.insert_adjacent_html位置感知的标记插入

另请参阅

 中文