Editer un document HTML

Aspose.HTML for Java fournit une API robuste pour créer, modifier et gérer des documents HTML de manière programmatique en utilisant le modèle d’objet de document (DOM). Cet article montre comment éditer des documents HTML, y compris la manipulation de nœuds, la définition de styles et l’utilisation de CSS internes et en ligne.

Modèle d’objet de document

Le modèle des objets documentaires (DOM) est une API de programmation standard multiplateforme qui aide les programmeurs à accéder à des parties d’un document et à les modifier. Le DOM définit la structure d’un document comme un arbre avec une hiérarchie de nœuds, où chaque nœud représente une partie du document, comme un élément, une classe, une balise, un attribut ou du texte. Par exemple, chaque élément, tel qu’une image ou un morceau de texte, est appelé “nœud”. Un arbre DOM est la manière ou la structure avec laquelle un document est représenté en mémoire. En d’autres termes, le modèle objet de document crée une structure logique de document et définit des objets, des propriétés, des événements et des méthodes pour y accéder et les modifier. Le DOM est largement utilisé dans le développement web pour des tâches telles que la gestion des éléments de la page web et la réponse aux interactions de l’utilisateur.

Modifier le HTML avec Java

HTML DOM définit les éléments HTML comme des objets, fournissant un ensemble de propriétés et de méthodes que vous pouvez utiliser pour y accéder et les gérer. Chaque élément d’un document HTML est représenté par un nœud dans l’arbre DOM, et chaque nœud possède son propre ensemble de propriétés et de méthodes.

Comme nous l’avons déjà mentionné dans l’article Créer un document HTML, l’implémentation de HTMLDocument ainsi que l’ensemble du DOM sont basés sur la norme WHATWG DOM. Il est donc facile d’utiliser Aspose.HTML en ayant une connaissance de base des langages HTML et JavaScript. Le DOM package est représenté par les types de données fondamentaux suivants :

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.

Méthodes DOM

HTML DOM définit un ensemble de méthodes qui peuvent être utilisées pour accéder à tous les éléments HTML et les contrôler. Vous pouvez utiliser ces méthodes pour effectuer diverses tâches, telles que la création, la modification et la suppression d’éléments, ainsi que la gestion de leurs propriétés et de leurs événements. Voici une brève liste des méthodes API utiles fournies par les types de données de base :

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.

Il existe de nombreuses façons d’éditer du HTML en utilisant notre bibliothèque. Vous pouvez modifier le document en insérant de nouveaux nœuds, en supprimant ou en modifiant le contenu des nœuds existants. Si vous devez créer un nouveau nœud, les méthodes suivantes doivent être invoquées :

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.

Une fois que vous avez créé de nouveaux nœuds, il existe plusieurs méthodes dans DOM qui peuvent vous aider à insérer des nœuds dans l’arbre du document. La liste suivante décrit les méthodes les plus courantes d’insertion de nœuds :

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

Pour supprimer un nœud de l’arbre HTML DOM, veuillez utiliser la méthode Node.removeChild(child).

Pour une liste complète des interfaces et des méthodes représentées dans le paquet DOM, veuillez consulter API Reference Source.

Modifier l’arborescence d’un document HTML

Voyons comment éditer un document HTML à l’aide d’un arbre DOM et des fonctions mentionnées ci-dessus. Considérons des étapes simples pour créer et éditer du HTML. Le code Java suivant montre comment créer un document HTML à partir de zéro, ajouter un paragraphe de texte stylé et enregistrer le résultat :

1. Créer une instance d’un document HTML en utilisant le constructeur HTMLDocument().
2. Créez un élément <style> en utilisant la méthode createElement(“style”).
3. Appelez la méthode setTextContent() pour définir le contenu textuel spécifié dans l’élément de style. Le contenu textuel .gr { color : green } est une règle CSS. Elle cible les éléments ayant le nom de classe "gr" et leur donne la couleur verte.
4. Utilisez la méthode getElementsByTagName(name) pour trouver l’élément <head> et ajoutez l’élément de style en tant qu’enfant de l’élément head.
5. Créez un élément de paragraphe avec le nom de classe “gr” en utilisant les méthodes createElement("p") et setClassName("gr").
6. Créez un nœud de texte et ajoutez-le comme enfant à l’élément <p> – utilisez les méthodes createTextNode() et appendChild().
7. Ajouter le paragraphe au corps du document.
8. Enregistrez le document HTML dans un fichier à l’aide de la méthode save().

// Create HTML document using DOM methods and convert to PDF in Aspose.HTML for Java

// 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);

Le fichier HTML qui en résulte ressemble à ceci :

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

Utilisation des méthodes setInnerHTML() et getOuterHTML()

Les objets DOM constituent un outil puissant pour manipuler un document HTML. Cependant, il est parfois préférable de travailler avec Class String. L’exemple suivant montre comment créer un document HTML en utilisant la bibliothèque Java Aspose.HTML : définir le contenu de l’élément body et envoyer le document HTML à la console en utilisant les méthodes setInnerHTML() et getOuterHTML() de la classe Element :

1. Créez une instance de la classe HTMLDocument à l’aide du constructeur HTMLDocument(). Il crée un document HTML vide.
2. Pour afficher le contenu original du document HTML sur la console, utilisez la méthode getOuterHTML(). Le résultat sera <html><head></head><body></body></html> puisque le document est initialement vide.
3. Utilisez la méthode setInnerHTML() pour définir le contenu de l’élément <body> : ajoutez un élément HTML <p> avec le contenu du texte à l’élément body.
4. Imprimer le contenu mis à jour du document HTML sur la console en utilisant la méthode getOuterHTML().

// Edit HTML body content and print the updated outerHTML using Aspose.HTML for Java

// 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>

Travailler avec des styles

Inline CSS

Les feuilles de style en cascade (CSS) sont un langage de feuille de style utilisé pour décrire l’apparence des pages web dans le navigateur. Aspose.HTML ne prend pas seulement en charge les feuilles de style en cascade dès le départ, mais vous offre également des instruments pour manipuler les styles du document à la volée avant de convertir le document HTML dans d’autres formats.

Lorsque le CSS est écrit en utilisant l’attribut style à l’intérieur d’une balise HTML, on parle de “style CSS en ligne”. Le CSS en ligne vous permet d’appliquer un style individuel à un élément HTML à la fois. Vous définissez le style CSS d’un élément HTML en utilisant l’attribut style avec toutes les propriétés CSS définies à l’intérieur de cet attribut. Dans l’extrait de code suivant, vous pouvez voir comment spécifier des propriétés de style CSS pour un élément HTML <p> :

// Edit inline CSS of an HTML element and render HTML to PDF using Aspose.HTML for Java

// 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);

Dans cet exemple particulier, la couleur, la taille de la police et la famille de la police s’appliquent à l’élément <p>. Le fragment de la page PDF rendue ressemble à ceci :

External CSS

Ajouter un élément <style> au document <head> pour les styles globaux :

// Edit HTML with internal CSS using Java

// 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);

La figure illustre le fragment du fichier rendu “edit-internal-css.pdf” :

Conclusion

Aspose.HTML for Java offre une API puissante et flexible pour l’édition de documents HTML. Vous pouvez créer, manipuler et restituer du contenu web de manière programmatique en exploitant le DOM. Grâce à son adhésion aux normes modernes et à ses fonctionnalités avancées, Aspose.HTML for Java rationalise les tâches complexes de développement web. En tirant parti de ces fonctionnalités, vous pouvez gérer et personnaliser efficacement le contenu HTML en fonction de vos besoins spécifiques.

Vous pouvez télécharger les exemples complets et les fichiers de données à partir de GitHub.