HTML Dokumente und Elemente
HTML Dokumente und Elemente
HTMLDocument ist der markup-orientierte Einstiegspunkt: Es parst komplette Seiten oder Fragmente in DOM-Bäume, deren Elemente typisiert sind — ein <a> wird zu einem HTMLAnchorElement, ein <input> zu einem HTMLInputElement — sodass element-spezifisches Verhalten in element-spezifischen Klassen verankert ist.
Parsing von Seiten und Fragmenten
HTMLDocument.parse() verarbeitet eine komplette Seite; HTMLDocument.parse_fragment() verarbeitet teilweisen Markup; HTMLDocument.load() liest aus einer Quelle. Das Ergebnis ist ein standardmäßiger DOM-Baum, auf dem alle anderen Schichten (CSSOM, Selektoren, Layout) operieren.
Typisierte Elementklassen
Die Elementhierarchie leitet sich von HTMLElement ab. Formularsteuerelemente werden modelliert durch HTMLFormElement, HTMLInputElement, HTMLButtonElement, HTMLSelectElement, HTMLTextAreaElement, HTMLOptionElement und HTMLFieldSetElement; eingebettete Inhalte durch HTMLImageElement, HTMLIFrameElement, HTMLEmbedElement, HTMLObjectElement und HTMLCanvasElement; Navigation durch HTMLAnchorElement, HTMLAreaElement und HTMLMapElement.
Hilfsfunktionen für das Einfügen von Elementen
Über die Kern-Node-Operationen hinaus bietet Element positionsbewusste Einfügungen: insert_adjacent_html(), insert_adjacent_text() und insert_adjacent_element() platzieren Inhalte relativ zu einem bestehenden Element, ohne manuelle Geschwister-Verwaltung.
Collections
HTMLCollection und HTMLOptionsCollection bieten Live-Ansichten nur für Elemente, die von Dokument- und Formular-APIs verwendet werden, zusammen mit dem allgemeineren NodeList.
Tipps und bewährte Vorgehensweisen
- Verwenden Sie
parse_fragment()für Snippets — es wendet Fragment-Parsing-Regeln anstelle einer Voll-Dokument-Wiederherstellung an. - Verlassen Sie sich auf typisierte Klassen, wenn Sie elementbezogenen Zustand benötigen (insbesondere Formularsteuerelemente), anstatt alles als generisches
Elementzu behandeln. - Bevorzugen Sie
insert_adjacent_html()für lokalisierte Einfügungen gegenüber dem Wiederaufbau von Teilbäumen.
Häufige Probleme
| Problem | Ursache | Lösung |
|---|---|---|
| Fragment-Parsing fügt html/body-Wrapper hinzu | Verwendet parse() im partiellen Markup | Verwende parse_fragment() |
| Element hat keine formularbezogenen Mitglieder | Knoten typisiert als generisches Element | Bestätige, dass das Tag als die erwartete Elementklasse geparst wurde |
| Eingefügtes Markup landet am falschen Ort | Falsches Positionsschlüsselwort für benachbarte Einfügung | Überprüfe die vier Standardpositionen |
FAQ
Was ist der Unterschied zwischen parse und parse_fragment?
parse() führt die vollständige Dokumentbaumkonstruktion aus; parse_fragment() verwendet den Fragmentalgorithmus, der auf ein Kontext-Element beschränkt ist — das richtige Werkzeug für partielle Markup.
Sind Elementklassen standardtypisiert?
Ja — das Parsen erzeugt typisierte Klassen (HTMLAnchorElement, HTMLInputElement und den Rest der HTMLElement-Familie), nicht generische Knoten.
Kann ich HTMLDocument-Ausgabe mit der CSSOM-Schicht mischen?
Ja — der geparste Baum ist ein normales DOM; Stylesheets anhängen und berechnete Stile wie üblich auslesen.
API Reference Zusammenfassung
| Klasse/Methode | Beschreibung |
|---|---|
HTMLDocument.parse | Parsen Sie eine komplette Seite |
HTMLDocument.parse_fragment | Teilmarkup parsen |
HTMLDocument.load | Ein Dokument aus einer Quelle laden |
HTMLElement | Basisklasse der typisierten Elementhierarchie |
HTMLFormElement | Formular-Container-Element |
HTMLCanvasElement | Canvas-Element |
Element.insert_adjacent_html | Positionsabhängige Markup-Einfügung |