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 :

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

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 :

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 :

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 HTML document using DOM Tree in Python
 2
 3import os
 4import aspose.html as ah
 5
 6# Define the output directory and file path
 7output_dir = "output/"
 8output_path = os.path.join(output_dir, "edit-document-tree.html")
 9
10# Ensure the output directory exists
11os.makedirs(output_dir, exist_ok=True)
12
13# Create an instance of an HTML document
14document = ah.HTMLDocument()
15
16# Access the document <body> element
17body = document.body
18
19# Create a paragraph element <p>
20p = document.create_element("p")
21
22# Set a custom attribute
23p.set_attribute("id", "my-paragraph")
24
25# Create a text node
26text = document.create_text_node("The Aspose.Html.Dom namespace provides an API for representing and interfacing with HTML, XML, or SVG documents.")
27
28# Add the text to the paragraph
29p.append_child(text)
30
31# Attach the paragraph to the document body
32body.append_child(p)
33
34# Save the HTML document to a file
35document.save(output_path)

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.

 1# Create and add new HTML elements using Python
 2
 3import os
 4import aspose.html as ah
 5
 6# Define output directory and file paths
 7output_dir = "output/"
 8save_path = os.path.join(output_dir, "edit-document.html")
 9
10# Ensure the output directory exists
11os.makedirs(output_dir, exist_ok=True)
12
13# Create an instance of an HTML document
14document = ah.HTMLDocument()
15
16# Create a style element and set the teal color for elements with class "col"
17style = document.create_element("style")
18style.text_content = ".col { color: teal }"
19
20# Find the document <head> element and append the <style> element
21head = document.get_elements_by_tag_name("head")[0]
22head.append_child(style)
23
24# Create a paragraph <p> element with class "col"
25p = document.create_element("p")
26p.class_name = "col"
27
28# Create a text node
29text = document.create_text_node("Edit HTML document")
30
31# Append the text node to the paragraph
32p.append_child(text)
33
34# Append the paragraph to the document <body>
35document.body.append_child(p)
36
37# Save the HTML document to a file
38document.save(save_path)

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 :

  1. 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.
  2. 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 body content and get modified document as a string using Python
 2
 3import aspose.html as ah
 4
 5# Create an instance of an HTML document
 6document = ah.HTMLDocument()
 7
 8# Write the content of the HTML document to the console
 9print(document.document_element.outer_html)  # output: <html><head></head><body></body></html>
10
11# Set the content of the body element
12document.body.inner_html = "<p>HTML is the standard markup language for Web pages.</p>"
13
14# Find the document <p> element
15p = document.get_elements_by_tag_name("p")[0]
16
17# Write the updated content of the HTML document to the console
18print(p.inner_html)  # output: HTML is the standard markup language for Web pages.
19
20# Write the updated content of the HTML document to the console
21print(document.document_element.outer_html)  # output: <html><head></head><body><p>HTML is the standard markup language for Web pages.</p></body></html>

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# How to set inline CSS styles in an HTML element using Python
 2
 3import os
 4import aspose.html as ah
 5import aspose.html.rendering.pdf as rp
 6
 7# Define the content of the HTML document
 8content = "<p>Edit inline CSS using Aspose.HTML for Python via .NET</p>"
 9
10# Create an instance of an HTML document with specified content
11document = ah.HTMLDocument(content, ".")
12
13# Find the paragraph element and set a style attribute
14paragraph = document.get_elements_by_tag_name("p")[0]
15paragraph.set_attribute("style", "font-size: 150%; font-family: arial; color: teal")
16
17# Save the HTML document to a file
18output_dir = "output/"
19os.makedirs(output_dir, exist_ok=True)
20html_path = os.path.join(output_dir, "edit-inline-css.html")
21document.save(html_path)
22
23# Create an instance of the PDF output device and render the document to this device
24pdf_path = os.path.join(output_dir, "edit-inline-css.pdf")
25with rp.PdfDevice(pdf_path) as device:
26    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# Edit HTML with internal CSS using Python
 2
 3import os
 4import aspose.html as ah
 5import aspose.html.rendering.pdf as rp
 6
 7
 8# Define the content of the HTML document
 9content = "<div><h1>Internal CSS</h1><p>An internal CSS is used to define a style for a single HTML page</p></div>"
10
11# Create an instance of an HTML document with specified content
12document = ah.HTMLDocument(content, ".")
13
14# Create a <style> element and define internal CSS rules
15style = document.create_element("style")
16style.text_content = (
17    ".frame1 { margin-top:50px; margin-left:50px; padding:25px; width:360px; height:90px; "
18    "background-color:#82011a; font-family:arial; color:#fff5ee;} \r\n"
19    ".frame2 { margin-top:-70px; margin-left:160px; text-align:center; padding:20px; width:360px; "
20    "height:100px; background-color:#ebd2d7;}"
21)
22
23# Find the <head> element and append the style element
24head = document.get_elements_by_tag_name("head")[0]
25head.append_child(style)
26
27# Find the first paragraph element and apply styles
28header = document.get_elements_by_tag_name("h1")[0]
29header.class_name = "frame1"
30
31# Update the style using the style attribute directly
32header.set_attribute("style", "font-size: 200%; text-align: center;")
33
34# Find the last paragraph element and apply styles
35paragraph = document.get_elements_by_tag_name("p")[0]
36paragraph.class_name = "frame2"
37paragraph.set_attribute("style", "color: #434343; font-size: 150%; font-family: verdana;")
38
39# Save the HTML document to a file
40output_dir = "output/"
41os.makedirs(output_dir, exist_ok=True)
42html_path = os.path.join(output_dir, "edit-internal-css.html")
43document.save(html_path)
44
45# Create an instance of the PDF output device and render the document to this device
46pdf_path = os.path.join(output_dir, "edit-internal-css.pdf")
47with rp.PdfDevice(pdf_path) as device:
48    document.render_to(device)

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.

Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.