HTML-Dokument bearbeiten

Aspose.HTML for Java bietet eine robuste API zum Erstellen, Ändern und Verwalten von HTML-Dokumenten, die das Document Object Model (DOM) programmatisch nutzen. Dieser Artikel zeigt, wie man HTML-Dokumente bearbeitet, einschließlich der Manipulation von Knoten, der Einstellung von Stilen und der Arbeit mit Inline- und internem CSS.

Dokument-Objektmodell

Das Document Object Model, kurz DOM, ist eine plattformübergreifende Standardprogrammierschnittstelle, mit der Programmierer auf Teile eines Dokuments zugreifen und diese ändern können. DOM definiert die Struktur eines Dokuments als einen Baum mit einer Hierarchie von Knoten, wobei jeder Knoten einen Teil des Dokuments darstellt, z. B. ein Element, eine Klasse, einen Tag, ein Attribut oder einen Text. Jedes Teil, z. B. ein Bild oder ein Stück Text, wird als “Knoten” bezeichnet. Ein DOM-Baum gibt an, wie oder mit welcher Struktur ein Dokument im Speicher dargestellt wird. Mit anderen Worten: Das Document Object Model schafft eine logische Dokumentenstruktur und definiert Objekte, Eigenschaften, Ereignisse und Methoden für den Zugriff und die Änderung dieser Objekte. Das DOM wird in der Webentwicklung häufig für Aufgaben wie die Verwaltung von Webseitenelementen und die Reaktion auf Benutzerinteraktionen verwendet.

HTML mit Java bearbeiten

HTML DOM definiert HTML-Elemente als Objekte und bietet eine Reihe von Eigenschaften und Methoden, mit denen Sie auf sie zugreifen und sie verwalten können. Jedes Element in einem HTML-Dokument wird durch einen Knoten im DOM-Baum repräsentiert, und jeder Knoten hat seinen eigenen Satz von Eigenschaften und Methoden.

Wie wir bereits im Artikel HTML-Dokument erstellen erwähnt haben, basieren die Implementierung von HTMLDocument sowie das gesamte DOM auf dem WHATWG DOM Standard. Daher ist es einfach, Aspose.HTML mit Grundkenntnissen der Sprachen HTML und JavaScript zu verwenden. Das DOM-Paket wird mit den folgenden grundlegenden Datentypen dargestellt:

Class	Description
Document	The Document class represents the entire HTML, XML or SVG document. Conceptually, it is the root of the document tree and provides the primary access to the document’s data.
EventTarget	The EventTarget class is implemented by all Nodes in an implementation that supports the DOM Event Model.
Node	The Node class is the primary datatype for the entire Document Object Model. It represents a single node in the document tree.
Element	The element type is based on node and represents a base class for HTML, XML or SVG DOM.
Attr	The Attr class represents an attribute in an Element object. Typically the allowable values for the attribute are defined in a schema associated with the document.

DOM-Methoden

HTML DOM definiert eine Reihe von Methoden, die für den Zugriff auf alle HTML-Elemente und deren Steuerung verwendet werden können. Sie können diese Methoden verwenden, um verschiedene Aufgaben auszuführen, wie z.B. das Erstellen, Ändern und Löschen von Elementen und die Verwaltung ihrer Eigenschaften und Ereignisse. Im Folgenden finden Sie eine kurze Liste nützlicher API-Methoden, die von den Kerndatentypen bereitgestellt werden:

Method	Description
Document.getElementById(elementId)	The method, when invoked, must return the first element whose ID is elementId and null if there is no such element otherwise.
Document.getElementsByTagName(name)	The method must return the list of elements with the given name.
Document.createElement(localName)	The method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn’t recognized.
Node.appendChild(node)	The method adds a node to the end of the list of children of a specified parent node.
Element.setAttribute(name, value)	Sets the value of an attribute on the specified element.
Element.getAttribute(name)	The method returns the value of a specified attribute on the element.
Element.innerHTML	Returns a fragment of markup contained within the element.

Es gibt viele Möglichkeiten, wie Sie HTML mit unserer Bibliothek bearbeiten können. Sie können das Dokument ändern, indem Sie neue Knoten einfügen, entfernen oder den Inhalt bestehender Knoten bearbeiten. Wenn Sie einen neuen Knoten erstellen müssen, sind die folgenden Methoden aufzurufen:

Method	Description
Document.createCDATASection(data)	Creates a CDATASection node whose value is the specified string.
Document.createComment(data)	Creates a Comment node given the specified string.
Document.createDocumentFragment()	Creates a new empty DocumentFragment into which DOM nodes can be added to build an offscreen DOM tree.
Document.createElement(localName)	Creates an element of the type specified.
Document.createEntityReference(name)	Creates an EntityReference object.
Document.createProcessingInstruction(target, data)	Creates an ProcessingInstruction with the specified name and data.
Document.createTextNode(data)	Creates a Text node given the specified string.

Sobald Sie neue Knoten erstellt haben, gibt es mehrere Methoden im DOM, die Ihnen helfen können, Knoten in den Dokumentbaum einzufügen. Die folgende Liste beschreibt die gängigsten Methoden zum Einfügen von Knoten:

Method	Description
Node.insertBefore(node, child)	Inserts the node before the reference child node
Node.appendChild(node)	Adds the node to the list of children of the current node

Um einen Knoten aus dem HTML-DOM-Baum zu entfernen, verwenden Sie bitte die Methode Node.removeChild(child).

Eine vollständige Liste der im DOM-Paket enthaltenen Schnittstellen und Methoden finden Sie unter API-Referenzquelle.

HTML-Dokumentenbaum bearbeiten

Schauen wir uns an, wie man ein HTML-Dokument mit Hilfe eines DOM-Baums und der oben genannten Funktionen bearbeitet. Betrachten Sie einfache Schritte zum Erstellen und Bearbeiten von HTML. Der folgende Java-Code zeigt, wie man ein HTML-Dokument von Grund auf neu erstellt, einen gestylten Textabsatz hinzufügt und das Ergebnis speichert:

1. Erstellen Sie eine Instanz eines HTML-Dokuments mit dem Konstruktor HTMLDocument().
2. Erstellen Sie ein <style>-Element mit der Methode createElement(“style”).
3. Rufen Sie die Methode “setTextContent()” auf, um den angegebenen Textinhalt innerhalb des Stilelements festzulegen. Der Textinhalt .gr { color: green } ist eine CSS-Regel. Sie zielt auf Elemente mit dem Klassennamen “gr” und setzt ihre Farbe auf grün.
4. Verwenden Sie die Methode getElementsByTagName(name), um das Element “” zu finden, und fügen Sie das Stilelement als untergeordnetes Element an das Element “head” an.
5. Erstellen Sie ein Absatzelement mit dem Klassennamen "gr" mit den Methoden createElement("p") und setClassName("gr").
6. Erstellen Sie einen Textknoten und fügen Sie ihn als untergeordnetes Element zum Element <p> hinzu – verwenden Sie die Methoden createTextNode() und appendChild().
7. Fügen Sie den Absatz in den Hauptteil des Dokuments ein.
8. Speichern Sie das HTML-Dokument mit der Methode save() in einer Datei.

// Create an instance of the HTMLDocument class
HTMLDocument document = new HTMLDocument();

// Create a style element and assign the green color for all elements with class-name equals "gr"
Element style = document.createElement("style");
style.setTextContent(".gr { color: green }");

// Find the document header element and append the style element to the header
Element head = document.getElementsByTagName("head").get_Item(0);
head.appendChild(style);

// Create a paragraph element with class-name "gr"
HTMLParagraphElement p = (HTMLParagraphElement) document.createElement("p");
p.setClassName("gr");

// Create a text node
Text text = document.createTextNode("Hello, World!!");

// Append the text node to the paragraph
p.appendChild(text);

// Append the paragraph to the document body element
document.getBody().appendChild(p);

// Save the HTML document to a file
document.save("using-dom.html");

// Create an instance of the PDF output device and render the document into this device
PdfDevice device = new PdfDevice("using-dom.html");

// Render HTML to PDF
document.renderTo(device);

Die resultierende HTML-Datei sieht wie folgt aus:

<html>
	<head>
		<style>.gr { color: green; }</style>
	</head>
	<body>
		<p class="gr"> Hello, World!! </p>
	</body>
</html>

Verwendung der Methoden setInnerHTML() und getOuterHTML()

Mit DOM-Objekten haben Sie ein mächtiges Werkzeug, um ein HTML-Dokument zu manipulieren. Manchmal ist es jedoch viel besser, nur mit Class String zu arbeiten. Das folgende Beispiel zeigt, wie man ein HTML-Dokument mit der Aspose.HTML Java-Bibliothek erstellt: Setzen des Inhalts des body-Elements und Ausgabe des HTML-Dokuments auf der Konsole mit den Methoden setInnerHTML() und getOuterHTML() der Element-Klasse:

1. Erstellen Sie eine Instanz der Klasse HTMLDocument mit dem Konstruktor HTMLDocument(). Es wird ein leeres HTML-Dokument erzeugt.
2. Um den ursprünglichen Inhalt des HTML-Dokuments auf der Konsole auszugeben, verwenden Sie die Methode getOuterHTML(). Die Ausgabe wird <html><head></head><body></body></html> sein, da das Dokument anfangs leer ist.
3. Verwenden Sie die Methode setInnerHTML(), um den Inhalt des Elements <body> festzulegen: Fügen Sie ein HTML-Element <p> mit dem Textinhalt in das body-Element ein.
4. Geben Sie den aktualisierten Inhalt des HTML-Dokuments mit der Methode getOuterHTML() auf der Konsole aus.

// Create an instance of the HTMLDocument class
HTMLDocument document = new HTMLDocument();

// Write the content of the HTML document into the console output
System.out.println(document.getDocumentElement().getOuterHTML());
// @output: <html><head></head><body></body></html>

// Set the content of the <body> element
document.getBody().setInnerHTML("<p>HTML is the standard markup language for Web pages.</p>");

// Write the content of the HTML document into the console output
System.out.println(document.getDocumentElement().getOuterHTML());
// @output: <html><head></head><body><p>HTML is the standard markup language for Web pages.</p></body></html>

Arbeiten mit Stilen

Inline-CSS

Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache, mit der beschrieben wird, wie Webseiten im Browser aussehen. Aspose.HTML unterstützt nicht nur CSS sofort, sondern gibt Ihnen auch Instrumente an die Hand, mit denen Sie Dokumentstile direkt vor der Konvertierung des HTML-Dokuments in andere Formate manipulieren können.

Wenn CSS mit dem style-Attribut innerhalb eines HTML-Tags geschrieben wird, spricht man von einem “Inline-Style-CSS”. Mit dem Inline-CSS können Sie einen individuellen Stil auf jeweils ein HTML-Element anwenden. Sie legen CSS für ein HTML-Element fest, indem Sie das style-Attribut mit allen darin definierten CSS-Eigenschaften verwenden. Im folgenden Codeschnipsel sehen Sie, wie Sie CSS-Stil-Eigenschaften für ein HTML-<p>-Element festlegen können:

// Create an instance of an HTML document with specified content
String content = "<p> Inline CSS </p>";
HTMLDocument document = new HTMLDocument(content, ".");

// Find the paragraph element to set a style attribute
HTMLElement paragraph = (HTMLElement) document.getElementsByTagName("p").get_Item(0);

// Set the style attribute
paragraph.setAttribute("style", "font-size: 250%; font-family: verdana; color: #cd66aa");

// Save the HTML document to a file
document.save("edit-inline-css.html");

// Create an instance of the PDF output device and render the document into this device
PdfDevice device = new PdfDevice("edit-inline-css.html");
document.renderTo(device);

In diesem speziellen Beispiel gelten Farbe, Schriftgröße und Schriftart für das Element “p”. Das Fragment der gerenderten PDF-Seite sieht wie folgt aus:

Externes CSS

Fügen Sie ein <style> Element zum <head> des Dokuments für globale Stile hinzu:

// Create an instance of an HTML document with specified content
String content = "<div><p>Internal CSS</p><p>An internal CSS is used to define a style for a single HTML page</p></div>";
HTMLDocument document = new HTMLDocument(content, ".");

// Create a style element with text content
Element style = document.createElement("style");
style.setTextContent(".frame1 { margin-top:50px; margin-left:50px; padding:20px; width:360px; height:90px; background-color:#a52a2a; font-family:verdana; color:#FFF5EE;} \r\n" +
        ".frame2 { margin-top:-90px; margin-left:160px; text-align:center; padding:20px; width:360px; height:100px; background-color:#ADD8E6;}");

// Find the document header element and append the style element to the header
Element head = document.getElementsByTagName("head").get_Item(0);
head.appendChild(style);

// Find the first paragraph element to inspect the styles
HTMLElement paragraph = (HTMLElement) document.getElementsByTagName("p").get_Item(0);
paragraph.setClassName("frame1");

// Find the last paragraph element to inspect the styles
HTMLElement lastParagraph = (HTMLElement) document.getElementsByTagName("p").get_Item(document.getElementsByTagName("p").getLength() - 1);
lastParagraph.setClassName("frame2");

// Set a font-size to the first paragraph
paragraph.getStyle().setFontSize("250%");
paragraph.getStyle().setTextAlign("center");

// Set a color and font-size to the last paragraph
lastParagraph.getStyle().setColor("#434343");
lastParagraph.getStyle().setFontSize("150%");
lastParagraph.getStyle().setFontFamily("verdana");

// Save the HTML document to a file
document.save("edit-internal-css.html");

// Create an instance of the PDF output device and render the document on that device
PdfDevice device = new PdfDevice("edit-internal-css.html");

// Render HTML to PDF
document.renderTo(device);

Die Abbildung zeigt das Fragment der gerenderten Datei “edit-internal-css.pdf”:

Schlussfolgerung

Aspose.HTML for Java bietet eine leistungsstarke und flexible API für die Bearbeitung von HTML-Dokumenten. Sie können Webinhalte programmatisch erstellen, bearbeiten und rendern, indem Sie das DOM nutzen. Durch die Einhaltung moderner Standards und fortschrittlicher Funktionen rationalisiert Aspose.HTML for Java komplexe Webentwicklungsaufgaben. Durch die Nutzung dieser Funktionen können Sie HTML-Inhalte effektiv verwalten und an Ihre spezifischen Anforderungen anpassen.

Sie können die vollständigen Beispiele und Datendateien unter GitHub herunterladen.