Editar documento HTML en Python
Espacio de nombres DOM
Aspose.HTML for Python via .NET le permite acceder y manipular el DOM HTML (modelo de objetos de documento) en lenguaje Python. El espacio de nombres aspose.html.dom proporciona una API para interactuar con documentos HTML, XML y SVG. Representa el documento como un árbol de nodos, donde cada nodo representa una parte del documento, como un elemento, una cadena de texto o un comentario. El espacio de nombres incluye clases como Attr, CharacterData, Comment y más, cada una de las cuales tiene propósitos específicos dentro del modelo de documento.
La clase Document representa el documento HTML, XML o SVG completo y sirve como raíz del árbol del documento. Otras clases como Element, Node, DocumentFragment y EventTarget brindan acceso a diferentes partes del documento y permiten la manipulación e interacción con los datos del documento. La API se basa en el estándar WHATWG DOM. Por lo tanto, es fácil usar Aspose.HTML for Python via .NET teniendo un conocimiento básico de los lenguajes HTML y JavaScript.
Editar HTML
Para editar un documento HTML usando el árbol DOM, use la clase HTMLDocument, que representa el documento completo. Hay muchas formas de editar HTML utilizando nuestra biblioteca Python. Puede modificar el documento insertando nuevos nodos, eliminando o editando el contenido de los nodos existentes. Si necesita crear un nuevo elemento o nodo, debe invocar los siguientes métodos:
- create_element(
local_name) para generar nuevos elementos como<style>y<p>; - get_elements_by_tag_name(
tagname) para recuperar una lista de elementos existentes de un nombre de etiqueta determinado; - get_element_by_id(
element_id) para devolver el primer elemento con un atributo ID especificado con el valor dado; - create_text_node(
data) para agregar contenido textual.
Para manipular los atributos de los elementos, utilice los métodos:
- set_attribute(
qualified_name, value) agrega un nuevo atributo y establece su valor. Si un atributo con ese nombre ya está presente en el elemento, su valor se cambia al del parámetrovalue; - get_attribute(
qualified_name) recupera el valor de un atributo por nombre.
Una vez que haya creado nuevos nodos, existen varios métodos en el DOM que pueden ayudarlo a insertar nodos en el árbol del documento. La siguiente lista describe la forma más común de insertar o eliminar nodos:
- El método
append_child(
node) se utiliza para agregar elementos o nodos a elementos existentes; - El método
insert_before(
node, child) inserta elnodeantes del nodo secundario existentechild. Si unchildes nulo, inserte unnodeal final de la lista de niños. - El método remove() elimina esta instancia del árbol DOM HTML.
- El método
remove_child(
child) elimina el nodo hijo de la lista de hijos.
Para obtener una lista completa de clases y métodos representados en el espacio de nombres DOM, visite Fuente de referencia API.
Editar un árbol de documentos
Aspose.HTML Python API admite un conjunto de elementos HTML que se definen en HTML Standard, junto con reglas sobre cómo se pueden anidar los elementos. Considere pasos simples para crear HTML desde cero y editarlo usando un árbol DOM y las funciones mencionadas anteriormente. El documento contendrá un párrafo de texto con un atributo id:
- Utilice el constructor HTMLDocument() para crear una instancia de un documento HTML.
- La propiedad
bodyde la clase HTMLDocument apunta al elemento<body>del documento. - Emplee el método
create_element() de
HTMLDocumentpara crear un elemento de párrafo<p>. - Utilice el método
set_attribute() para establecer el atributo
idpara el elemento de párrafo. - Crea un nodo de texto con el método create_text_node().
- Agregue este nodo de texto al elemento de párrafo usando el método append_child().
- Agregue el elemento de párrafo al
<body>del documento usando el métodoappend_child(). - Guarde el documento HTML en un archivo.
Este código demuestra cómo crear un documento HTML básico mediante programación, agregar un párrafo con un atributo y texto y guardar el HTML resultante en un archivo:
1import os
2from aspose.html import *
3
4# Define the output directory and file path
5output_dir = "output/"
6output_path = os.path.join(output_dir, "edit-document-tree.html")
7
8# Ensure the output directory exists
9os.makedirs(output_dir, exist_ok=True)
10
11# Create an instance of an HTML document
12document = HTMLDocument()
13
14# Access the document <body> element
15body = document.body
16
17# Create a paragraph element <p>
18p = document.create_element("p")
19
20# Set a custom attribute
21p.set_attribute("id", "my-paragraph")
22
23# Create a text node
24text = document.create_text_node("The Aspose.Html.Dom namespace provides an API for representing and interfacing with HTML, XML, or SVG documents.")
25
26# Add the text to the paragraph
27p.append_child(text)
28
29# Attach the paragraph to the document body
30body.append_child(p)
31
32# Save the HTML document to a file
33document.save(output_path)Veamos cómo crear un documento HTML más complejo. En el siguiente fragmento de código, construiremos un documento HTML desde cero, crearemos nuevos elementos, los rellenaremos con contenido y los agregaremos a la estructura del documento HTML. El modelo HTML DOM y la funcionalidad mencionada anteriormente nos ayudarán con esto.
- Utilice el constructor
HTMLDocument()para inicializar un nuevo objeto HTMLDocument, que representa el documento HTML. - Emplee el método
create_element() de
HTMLDocumentpara generar un elemento<style>. - Asigne reglas CSS al elemento de estilo usando la propiedad text_content.
- Recupera el elemento
<head>usando el método get_elements_by_tag_name(). - Añade el elemento
<style>al elemento<head>usando el método append_child(). - Utilice el método
create_element() para crear un elemento de párrafo
<p>. - Establezca la propiedad
class_namedel párrafo para aplicar los estilos CSS deseados. - Crea un nodo de texto con el método create_text_node().
- Agregue este nodo de texto al elemento de párrafo usando el método
append_child(). - Agregue el elemento de párrafo al
<body>del documento usando el métodoappend_child()en la propiedadbody. - Llame al método
save()deHTMLDocumentpara guardar el documento en la ruta del archivo HTML especificada.
1import os
2from aspose.html import *
3from aspose.html.saving import *
4
5# Define output directory and file paths
6output_dir = "output/"
7save_path = os.path.join(output_dir, "edit-document.html")
8
9# Ensure the output directory exists
10os.makedirs(output_dir, exist_ok=True)
11
12# Create an instance of an HTML document
13document = HTMLDocument()
14
15# Create a style element and set the teal color for elements with class "col"
16style = document.create_element("style")
17style.text_content = ".col { color: teal }"
18
19# Find the document <head> element and append the <style> element
20head = document.get_elements_by_tag_name("head")[0]
21head.append_child(style)
22
23# Create a paragraph <p> element with class "col"
24p = document.create_element("p")
25p.class_name = "col"
26
27# Create a text node
28text = document.create_text_node("Edit HTML document")
29
30# Append the text node to the paragraph
31p.append_child(text)
32
33# Append the paragraph to the document <body>
34document.body.append_child(p)
35
36# Save the HTML document to a file
37document.save(save_path)La Fuente de referencia de API proporciona una lista completa de clases y métodos en el espacio de nombres DOM.
Usando las propiedades inner_html y outer_html
Trabajar con objetos DOM proporciona una forma poderosa de manipular un documento HTML en Python. Sin embargo, en algunos casos, puede resultar más conveniente trabajar directamente con cadenas. Las propiedades inner_html y outer_html se usan para acceder y manipular contenido HTML en un documento, pero difieren en lo que representan y cómo se usan:
- La propiedad inner_html representa el contenido HTML dentro de un elemento, excluyendo las etiquetas de inicio y fin del propio elemento.
- La propiedad outer_html representa todo el contenido HTML de un elemento, incluidas sus propias etiquetas de inicio y fin.
El siguiente fragmento de código le muestra cómo utilizar las propiedades inner_html y outer_html de la clase
Element para editar HTML.
1from aspose.html import *
2
3# Create an instance of an HTML document
4document = HTMLDocument()
5
6# Write the content of the HTML document to the console
7print(document.document_element.outer_html) # output: <html><head></head><body></body></html>
8
9# Set the content of the body element
10document.body.inner_html = "<p>HTML is the standard markup language for Web pages.</p>"
11
12# Find the document <p> element
13p = document.get_elements_by_tag_name("p")[0]
14
15# Write the content of the <p> element to the console
16print(p.inner_html) # output: HTML is the standard markup language for Web pages.
17
18# Write the updated content of the HTML document to the console
19print(document.document_element.outer_html) # output: <html><head></head><body><p>HTML is the standard markup language for Web pages.</p></body></html>Editar CSS
Las hojas de estilo en cascada (CSS) son un lenguaje de hojas de estilo que se utiliza para describir cómo aparecen las páginas web en un navegador. CSS se puede agregar a documentos HTML de forma en línea, interna y externa. Por lo tanto, puede definir un estilo único para un solo elemento HTML usando CSS en línea o para que varias páginas web compartan formato especificando el CSS relevante en un archivo .css separado. Aspose.HTML for Python via .NET no solo admite CSS listo para usar, sino que también le brinda instrumentos para manipular estilos de documentos sobre la marcha antes de convertir el documento HTML a otros formatos, como se muestra a continuación.
CSS en línea – Inline CSS
Cuando CSS se escribe utilizando el atributo “estilo” dentro de una etiqueta HTML, se denomina CSS en línea (inline CSS). El CSS en línea le permite aplicar un estilo individual a un elemento HTML a la vez. Puede configurar CSS para un elemento HTML utilizando el atributo “estilo” con cualquier propiedad CSS definida dentro de él.
En el siguiente fragmento de código, puede ver cómo especificar propiedades de estilo CSS para un elemento HTML <p>.
1import os
2from aspose.html import *
3from aspose.html.rendering.pdf import *
4
5# Define the content of the HTML document
6content = "<p>Edit inline CSS using Aspose.HTML for Python via .NET</p>"
7
8# Create an instance of an HTML document with specified content
9document = HTMLDocument(content, ".")
10
11# Find the paragraph element and set a style attribute
12paragraph = document.get_elements_by_tag_name("p")[0]
13paragraph.set_attribute("style", "font-size: 150%; font-family: arial; color: teal")
14
15# Save the HTML document to a file
16output_dir = "output/"
17os.makedirs(output_dir, exist_ok=True)
18html_path = os.path.join(output_dir, "edit-inline-css.html")
19document.save(html_path)
20
21# Create an instance of the PDF output device and render the document to this device
22pdf_path = os.path.join(output_dir, "edit-inline-css.pdf")
23with PdfDevice(pdf_path) as device:
24 document.render_to(device)En este ejemplo particular, el color, el tamaño de fuente y la familia de fuente se aplican al elemento <p>. El fragmento de la página pdf renderizada se ve así:
CSS interno – Internal CSS
La opción de estilo CSS interno es popular para aplicar propiedades a páginas individuales encerrando todos los estilos en el elemento <style> colocado en el <head> de los documentos HTML.
1import os
2from aspose.html import *
3from aspose.html.rendering.pdf import *
4
5
6# Define the content of the HTML document
7content = "<div><h1>Internal CSS</h1><p>An internal CSS is used to define a style for a single HTML page</p></div>"
8
9# Create an instance of an HTML document with specified content
10document = HTMLDocument(content, ".")
11
12# Create a <style> element and define internal CSS rules
13style = document.create_element("style")
14style.text_content = (
15 ".frame1 { margin-top:50px; margin-left:50px; padding:25px; width:360px; height:90px; "
16 "background-color:#82011a; font-family:arial; color:#fff5ee;} \r\n"
17 ".frame2 { margin-top:-70px; margin-left:160px; text-align:center; padding:20px; width:360px; "
18 "height:100px; background-color:#ebd2d7;}"
19)
20
21# Find the <head> element and append the <style> element
22head = document.get_elements_by_tag_name("head")[0]
23head.append_child(style)
24
25# Find the <h1> element and apply styles
26header = document.get_elements_by_tag_name("h1")[0]
27header.class_name = "frame1"
28
29# Update the style of <h1> using the style attribute directly
30header.set_attribute("style", "font-size: 200%; text-align: center;")
31
32# Find the paragraph element and apply styles
33paragraph = document.get_elements_by_tag_name("p")[0]
34paragraph.class_name = "frame2"
35paragraph.set_attribute("style", "color: #434343; font-size: 150%; font-family: verdana;")
36
37# Save the HTML document to a file
38output_dir = "output/"
39os.makedirs(output_dir, exist_ok=True)
40html_path = os.path.join(output_dir, "edit-internal-css.html")
41document.save(html_path)
42
43# Create an instance of the PDF output device and render the document to this device
44pdf_path = os.path.join(output_dir, "edit-internal-css.pdf")
45with PdfDevice(pdf_path) as device:
46 document.render_to(device)En este ejemplo, usamos CSS interno y también declaramos propiedades de estilo adicionales para elementos individuales usando el atributo style dentro de las etiquetas <h1> y <p>. La figura ilustra el fragmento del archivo edit-internal-css.pdf renderizado:
Descargue la biblioteca Aspose.HTML for Python via .NET para manipular con éxito, rapidez y facilidad sus documentos HTML. La biblioteca Python puede crear, modificar, extraer datos, convertir y renderizar documentos HTML sin necesidad de software externo. Admite formatos de archivos populares como EPUB, MHTML, XML, SVG y Markdown y puede renderizar en formatos de archivos PDF, DOCX, XPS e imágenes.