Editer un document HTML en Python

Espace de noms DOM

Aspose.HTML for Python via .NET vous permet d’accéder et de manipuler le DOM (Document Object Model) HTML en langage Python. L’espace de noms aspose.html.dom fournit une API pour interagir avec les documents HTML, XML et SVG. Il représente le document sous la forme d’un arbre de nœuds, chaque nœud représentant une partie du document, telle qu’un élément, une chaîne de texte ou un commentaire. L’espace de noms comprend des classes telles que Attr, CharacterData, Comment, et d’autres encore, chacune servant des objectifs spécifiques au sein du modèle de document.

La classe Document représente l’ensemble du document HTML, XML ou SVG et sert de racine à l’arborescence du document. D’autres classes comme Element, Node, DocumentFragment et EventTarget donnent accès à différentes parties du document et permettent de manipuler et d’interagir avec les données du document. L’API est basée sur la norme WHATWG DOM. Il est donc facile d’utiliser Aspose.HTML for Python via .NET en ayant une connaissance de base des langages HTML et JavaScript.

Modifier le HTML

Pour éditer un document HTML à l’aide de l’arbre DOM, utilisez la classe HTMLDocument, qui représente le document entier. Il existe de nombreuses façons d’éditer un document HTML en utilisant notre bibliothèque Python. 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 nouvel élément ou un nouveau nœud, les méthodes suivantes doivent être invoquées :

create_element(local_name) pour générer de nouveaux éléments comme <style> et <p> ;
get_elements_by_tag_name(tagname) pour récupérer une liste d’éléments existants d’un tagname donné ;
get_element_by_id(element_id) pour retourner le premier élément avec un attribut ID spécifié avec la valeur donnée ;
create_text_node(data) pour ajouter du contenu textuel.

Pour manipuler les attributs d’un élément, utilisez les méthodes :

set_attribute(nom_qualifié, valeur) ajoute un nouvel attribut et fixe sa valeur. Si un attribut portant ce nom est déjà présent dans l’élément, sa valeur est remplacée par celle du paramètre valeur ;
get_attribute(qualified_name) récupère la valeur d’un attribut par son nom.

Une fois que vous avez créé de nouveaux nœuds, il existe plusieurs méthodes dans le 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 pour insérer ou supprimer des nœuds :

La méthode append_child(node) permet d’ajouter des éléments ou des nœuds à des éléments existants ;
La méthode insert_before(node, child) insère le node avant le noeud enfant child existant. Si un child est nul, elle insère un node à la fin de la liste des enfants.
La méthode remove() supprime cette instance de l’arbre DOM HTML.
La méthode remove_child(child) supprime le noeud enfant de la liste des enfants.

Pour une liste complète des classes et des méthodes représentées dans l’espace de noms DOM, veuillez consulter API Reference Source.

Modifier une arborescence de documents

L’API Aspose.HTML Python prend en charge un ensemble d’éléments HTML définis dans la norme HTML, ainsi que des règles sur la manière dont les éléments peuvent être imbriqués. Considérons des étapes simples pour créer du HTML à partir de zéro et le modifier en utilisant un arbre DOM et la fonction mentionnée ci-dessus. Le document contiendra un paragraphe de texte avec un attribut id :

Utilisez le constructeur HTMLDocument() pour créer une instance d’un document HTML.
La propriété body de la classe HTMLDocument pointe vers l’élément du document.
Employez la méthode create_element() de HTMLDocument pour créer un élément paragraphe <p>.
Utilisez la méthode set_attribute() pour définir l’attribut id de l’élément paragraphe.
Créez un nœud de texte avec la méthode create_text_node().
Ajoutez ce nœud de texte à l’élément paragraphe à l’aide de la méthode append_child().
Ajoutez l’élément paragraphe dans le <body> du document en utilisant la méthode append_child().
Enregistrer le document HTML dans un fichier.

Ce code montre comment créer un document HTML de base par programme, ajouter un paragraphe avec un attribut et du texte, et enregistrer le HTML résultant dans un fichier :

 1# Edit an HTML document using the DOM in Python
 2
 3import os
 4import aspose.html as ah
 5
 6# Prepare the output path
 7output_dir = "output"
 8output_path = os.path.join(output_dir, "edit-document-tree.html")
 9os.makedirs(output_dir, exist_ok=True)
10
11# Create and edit the HTML document
12with ah.HTMLDocument() as document:
13    paragraph = document.create_element("p")
14    paragraph.set_attribute("id", "my-paragraph")
15
16    text = document.create_text_node(
17        "The Aspose.Html.Dom namespace provides an API for representing and "
18        "interfacing with HTML, XML, or SVG documents."
19    )
20    paragraph.append_child(text)
21    document.body.append_child(paragraph)
22
23    # Save the edited HTML document
24    document.save(output_path)

Example-EditHtmlDocument.py hosted with ❤ by GitHub

Examinons la création d’un document HTML plus complexe. Dans l’extrait de code suivant, nous allons construire un document HTML à partir de zéro, créer de nouveaux éléments, les remplir de contenu et les ajouter à la structure du document HTML. Le modèle HTML DOM et les fonctionnalités mentionnées ci-dessus nous aideront dans cette tâche.

Utilisez le constructeur HTMLDocument() pour initialiser un nouvel objet HTMLDocument, qui représente le document HTML.
Employer la méthode create_element() de HTMLDocument pour générer un élément <style>.
Attribuer des règles CSS à l’élément style en utilisant la propriété text_content.
Récupérer l’élément <head> en utilisant la méthode get_elements_by_tag_name().
Ajoutez l’élément <style> à l’élément <head> en utilisant la méthode append_child().
Utilisez la méthode create_element() pour créer un élément de paragraphe <p>.
Définir la propriété class_name du paragraphe pour appliquer les styles CSS souhaités.
Créez un nœud de texte avec la méthode create_text_node().
Ajoutez ce nœud de texte à l’élément paragraphe en utilisant la méthode append_child().
Ajoutez l’élément paragraphe dans le <body> du document en utilisant la méthode append_child() sur la propriété body.
Appeler la méthode save() de HTMLDocument pour enregistrer le document dans le chemin d’accès au fichier HTML spécifié.

 1# Create HTML elements using the DOM in Python
 2
 3import os
 4import aspose.html as ah
 5
 6# Prepare the output path
 7output_dir = "output"
 8save_path = os.path.join(output_dir, "edit-document.html")
 9os.makedirs(output_dir, exist_ok=True)
10
11# Create an HTML document and add new elements
12with ah.HTMLDocument() as document:
13    style = document.create_element("style")
14    style.text_content = ".col { color: teal }"
15    head = document.get_elements_by_tag_name("head")[0]
16    head.append_child(style)
17
18    paragraph = document.create_element("p")
19    paragraph.class_name = "col"
20    paragraph.append_child(document.create_text_node("Edit HTML document"))
21    document.body.append_child(paragraph)
22
23    # Save the HTML document
24    document.save(save_path)

Example-CreateHtmlDocumentUsingDom.py hosted with ❤ by GitHub

La Source de référence de l’API fournit une liste complète des classes et des méthodes de l’espace de noms DOM.

Utilisation des propriétés `inner_html` et `outer_html`

Travailler avec des objets DOM est un moyen puissant de manipuler un document HTML en Python. Cependant, dans certains cas, il peut être plus pratique de travailler directement avec des chaînes de caractères. Les propriétés inner_html et outer_html sont utilisées pour accéder et manipuler le contenu HTML d’un document, mais elles diffèrent dans ce qu’elles représentent et comment elles sont utilisées :

La propriété inner_html représente le contenu HTML à l’intérieur d’un élément, à l’exclusion des balises de début et de fin de l’élément.
La propriété outer_html représente tout le contenu HTML d’un élément, y compris ses propres balises de début et de fin.

L’extrait de code suivant montre comment utiliser les propriétés inner_html et outer_html de la classe Element pour éditer du HTML.

 1# Edit HTML with innerHTML and outerHTML in Python
 2
 3import aspose.html as ah
 4
 5# Create an HTML document and inspect its markup
 6with ah.HTMLDocument() as document:
 7    print(document.document_element.outer_html)
 8
 9    # Replace the body content using innerHTML
10    document.body.inner_html = "<p>HTML is the standard markup language for Web pages.</p>"
11    paragraph = document.get_elements_by_tag_name("p")[0]
12
13    # Print the element content and updated document markup
14    print(paragraph.inner_html)
15    print(document.document_element.outer_html)

Example-UsingInnerHtmlOuterHtml.py hosted with ❤ by GitHub

Modifier le CSS

Les feuilles de style en cascade (CSS) sont un langage de feuille de style utilisé pour décrire la manière dont les pages web apparaissent dans un navigateur. Les feuilles de style en cascade peuvent être ajoutées aux documents HTML de manière inline, interne et externe. Ainsi, vous pouvez définir un style unique pour un seul élément HTML à l’aide d’une feuille de style en ligne ou pour plusieurs pages web afin de partager la mise en forme en spécifiant la feuille de style correspondante dans un fichier .css séparé. Aspose.HTML for Python via .NET ne prend pas seulement en charge les feuilles de style CSS prêtes à l’emploi, mais offre également des instruments permettant de manipuler les styles du document à la volée avant de convertir le document HTML dans d’autres formats, comme indiqué ci-dessous.

CSS en ligne

Lorsque le CSS est écrit à l’aide de l’attribut style à l’intérieur d’une balise HTML, on parle de “CSS en ligne”. Le CSS en ligne vous permet d’appliquer un style individuel à un élément HTML à la fois. Vous définissez le CSS d’un élément HTML en utilisant l’attribut style avec toutes les propriétés CSS définies à l’intérieur. 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>.

 1# Add inline CSS to HTML in Python
 2
 3import os
 4import aspose.html as ah
 5import aspose.html.rendering.pdf as rp
 6
 7# Define the HTML content
 8content = "<p>Edit inline CSS using Aspose.HTML for Python via .NET</p>"
 9
10# Prepare output paths
11output_dir = "output"
12os.makedirs(output_dir, exist_ok=True)
13html_path = os.path.join(output_dir, "edit-inline-css.html")
14pdf_path = os.path.join(output_dir, "edit-inline-css.pdf")
15
16# Add inline CSS, then save and render the document
17with ah.HTMLDocument(content, ".") as document:
18    paragraph = document.get_elements_by_tag_name("p")[0]
19    paragraph.set_attribute("style", "font-size: 150%; font-family: arial; color: teal")
20    document.save(html_path)
21
22    with rp.PdfDevice(pdf_path) as device:
23        document.render_to(device)

Example-EditInlineCss.py hosted with ❤ by GitHub

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 :

Texte “Editer le CSS en ligne”

CSS interne

L’option de style CSS interne est populaire pour appliquer des propriétés à des pages individuelles en encapsulant tous les styles dans l’élément <style> placé dans le <head> des documents HTML.

 1# Add internal CSS to HTML in Python
 2
 3import os
 4import aspose.html as ah
 5import aspose.html.rendering.pdf as rp
 6
 7# Define the HTML content
 8content = "<div><h1>Internal CSS</h1><p>An internal CSS is used to define a style for a single HTML page</p></div>"
 9
10# Prepare output paths
11output_dir = "output"
12os.makedirs(output_dir, exist_ok=True)
13html_path = os.path.join(output_dir, "edit-internal-css.html")
14pdf_path = os.path.join(output_dir, "edit-internal-css.pdf")
15
16# Add internal CSS, then save and render the document
17with ah.HTMLDocument(content, ".") as document:
18    style = document.create_element("style")
19    style.text_content = (
20        ".frame1 { margin-top:50px; margin-left:50px; padding:25px; width:360px; height:90px; "
21        "background-color:#82011a; font-family:arial; color:#fff5ee;} \r\n"
22        ".frame2 { margin-top:-70px; margin-left:160px; text-align:center; padding:20px; width:360px; "
23        "height:100px; background-color:#ebd2d7;}"
24    )
25    head = document.get_elements_by_tag_name("head")[0]
26    head.append_child(style)
27
28    header = document.get_elements_by_tag_name("h1")[0]
29    header.class_name = "frame1"
30    header.set_attribute("style", "font-size: 200%; text-align: center;")
31
32    paragraph = document.get_elements_by_tag_name("p")[0]
33    paragraph.class_name = "frame2"
34    paragraph.set_attribute("style", "color: #434343; font-size: 150%; font-family: verdana;")
35
36    document.save(html_path)
37    with rp.PdfDevice(pdf_path) as device:
38        document.render_to(device)

Example-EditInternalCss.py hosted with ❤ by GitHub

Dans cet exemple, nous utilisons le CSS interne et déclarons également des propriétés de style supplémentaires pour des éléments individuels en utilisant l’attribut style à l’intérieur des balises <h1> et <p>. La figure illustre le fragment du fichier rendu “edit-internal-css.pdf” :

Texte “Modifier le CSS interne”

Téléchargez la bibliothèque Aspose.HTML for Python via .NET pour manipuler avec succès, rapidement et facilement vos documents HTML. La bibliothèque Python peut créer, modifier, extraire des données, convertir et rendre des documents HTML sans nécessiter de logiciel externe. Elle prend en charge les formats de fichiers les plus courants tels que EPUB, MHTML, XML, SVG et Markdown et peut convertir les documents en formats PDF, DOCX, XPS et Image.

Créer un document Enregistrer le document HTML