HTML Dokumente und Elemente

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 Element zu behandeln.
  • Bevorzugen Sie insert_adjacent_html() für lokalisierte Einfügungen gegenüber dem Wiederaufbau von Teilbäumen.

Häufige Probleme

ProblemUrsacheLösung
Fragment-Parsing fügt html/body-Wrapper hinzuVerwendet parse() im partiellen MarkupVerwende parse_fragment()
Element hat keine formularbezogenen MitgliederKnoten typisiert als generisches ElementBestätige, dass das Tag als die erwartete Elementklasse geparst wurde
Eingefügtes Markup landet am falschen OrtFalsches 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/MethodeBeschreibung
HTMLDocument.parseParsen Sie eine komplette Seite
HTMLDocument.parse_fragmentTeilmarkup parsen
HTMLDocument.loadEin Dokument aus einer Quelle laden
HTMLElementBasisklasse der typisierten Elementhierarchie
HTMLFormElementFormular-Container-Element
HTMLCanvasElementCanvas-Element
Element.insert_adjacent_htmlPositionsabhängige Markup-Einfügung

Siehe auch

 Deutsch