HTML Documents and Elements
HTML Documents and Elements
HTMLDocument is the markup-facing entry point: it parses complete pages or fragments into DOM trees whose elements are typed — an <a> becomes an HTMLAnchorElement, an <input> an HTMLInputElement — so element-specific behaviour lives on element-specific classes.
Parsing Pages and Fragments
HTMLDocument.parse() consumes a complete page; HTMLDocument.parse_fragment() handles partial markup; HTMLDocument.load() reads from a source. The result is a standard DOM tree that all other layers (CSSOM, selectors, layout) operate on.
Typed Element Classes
The element hierarchy descends from HTMLElement. Form controls are modelled by HTMLFormElement, HTMLInputElement, HTMLButtonElement, HTMLSelectElement, HTMLTextAreaElement, HTMLOptionElement, and HTMLFieldSetElement; embedded content by HTMLImageElement, HTMLIFrameElement, HTMLEmbedElement, HTMLObjectElement, and HTMLCanvasElement; navigation by HTMLAnchorElement, HTMLAreaElement, and HTMLMapElement.
Element Insertion Helpers
Beyond the core Node operations, Element offers position-aware insertion: insert_adjacent_html(), insert_adjacent_text(), and insert_adjacent_element() place content relative to an existing element without manual sibling bookkeeping.
Collections
HTMLCollection and HTMLOptionsCollection provide live, element-only views used by document and form APIs, alongside the more general NodeList.
Tips and Best Practices
- Use
parse_fragment()for snippets — it applies fragment parsing rules instead of full-document recovery - Rely on typed classes when you need element-specific state (form controls especially) rather than treating everything as a generic
Element - Prefer
insert_adjacent_html()for localized insertions over rebuilding subtrees
Common Issues
| Issue | Cause | Fix |
|---|---|---|
| Fragment parse adds html/body wrappers | Used parse() on partial markup | Use parse_fragment() |
| Element lacks form-specific members | Node typed as generic Element | Confirm the tag parsed as the expected element class |
| Inserted markup lands in the wrong place | Wrong position keyword for adjacent insertion | Review the four standard positions |
FAQ
What is the difference between parse and parse_fragment?
parse() runs full-document tree construction; parse_fragment() uses the fragment algorithm scoped to a context element — the right tool for partial markup.
Are element classes standards-typed?
Yes — parsing produces typed classes (HTMLAnchorElement, HTMLInputElement, and the rest of the HTMLElement family), not generic nodes.
Can I mix HTMLDocument output with the CSSOM layer?
Yes — the parsed tree is a normal DOM; attach stylesheets and read computed styles as usual.
API Reference Summary
| Class/Method | Description |
|---|---|
HTMLDocument.parse | Parse a complete page |
HTMLDocument.parse_fragment | Parse partial markup |
HTMLDocument.load | Load a document from a source |
HTMLElement | Base class of the typed element hierarchy |
HTMLFormElement | Form container element |
HTMLCanvasElement | Canvas element |
Element.insert_adjacent_html | Position-aware markup insertion |