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ámetro value;
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 el node antes del nodo secundario existente child. Si un child es nulo, inserte un node al 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 body de la clase HTMLDocument apunta al elemento <body> del documento.
Emplee el método create_element() de HTMLDocument para crear un elemento de párrafo <p>.
Utilice el método set_attribute() para establecer el atributo id para 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étodo append_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:

 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

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 HTMLDocument para 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_name del 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étodo append_child() en la propiedad body.
Llame al método save() de HTMLDocument para guardar el documento en la ruta del archivo HTML especificada.

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

 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

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

 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

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í:

Texto “Editar CSS en línea”

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.

 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

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:

Texto “Editar CSS interno”

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.

Crear un documento Guardar documento HTML