Editar documento HTML

Aspose.HTML for Java proporciona una API sólida para crear, modificar y administrar documentos HTML mediante programación utilizando el modelo de objetos de documento (DOM). Este artículo demuestra cómo editar documentos HTML, incluida la manipulación de nodos, la configuración de estilos y el trabajo con CSS interno y en línea.

Modelo de objetos de documento (DOM)

El modelo de objetos de documento, o DOM para abreviar, es una API de programación multiplataforma estándar que ayuda a los programadores a acceder y modificar partes de un documento. DOM define la estructura de un documento como un árbol con una jerarquía de nodos, donde cada nodo representa una parte del documento, como un elemento, clase, etiqueta, atributo o texto. Por ejemplo, cada pieza, como una imagen o un fragmento de texto, se denomina node. Un árbol DOM es cómo o con qué estructura se representa un documento en la memoria. En otras palabras, el modelo de objetos de documento crea una estructura de documento lógica y define objetos, propiedades, eventos y métodos para acceder a ellos y modificarlos. El DOM se utiliza ampliamente en el desarrollo web para tareas como gestionar elementos de páginas web y responder a las interacciones de los usuarios.

Editar HTML con Java

HTML DOM define elementos HTML como objetos, proporcionando un conjunto de propiedades y métodos que puede utilizar para acceder a ellos y administrarlos. Cada elemento de un documento HTML está representado por un nodo en el árbol DOM y cada nodo tiene su propio conjunto de propiedades y métodos.

Como ya mencionamos en el artículo Crear documento HTML, la implementación de HTMLDocument, así como todo el DOM, se basan en el estándar WHATWG DOM. Por lo tanto, es fácil de usar Aspose.HTML teniendo un conocimiento básico de los idiomas HTML y JavaScript. El paquete DOM se representa con los siguientes tipos de datos fundamentales:

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étodos DOM

HTML DOM define un conjunto de métodos que se pueden utilizar para acceder y controlar todos los elementos HTML. Puede utilizar estos métodos para realizar diversas tareas, como crear, modificar y eliminar elementos, y administrar sus propiedades y eventos. La siguiente es una breve lista de métodos API útiles proporcionados por los tipos de datos principales:

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.

Hay muchas formas de editar HTML utilizando nuestra biblioteca. Puede modificar el documento insertando nuevos nodos, eliminando o editando el contenido de los nodos existentes. Si necesita crear un nuevo nodo, debe invocar los siguientes métodos:

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.

Una vez que haya creado nuevos nodos, existen varios métodos en DOM que pueden ayudarlo a insertar nodos en el árbol de documentos. La siguiente lista describe la forma más común de insertar nodos:

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

Para eliminar un nodo del árbol DOM HTML, utilice el método Node.removeChild(child).

Para obtener una lista completa de las interfaces y métodos representados en el paquete DOM, visite Fuente de referencia API.

Editar árbol de documentos HTML

Veamos cómo editar un documento HTML usando un árbol DOM y las funciones mencionadas anteriormente. Considere pasos simples para crear y editar HTML. El siguiente código Java demuestra cómo crear un documento HTML desde cero, agregar un párrafo de texto con estilo y guardar el resultado:

1. Cree una instancia de un documento HTML utilizando el constructor HTMLDocument().
2. Cree un elemento <style> usando el método createElement(“style”).
3. Llame al método setTextContent() para establecer el contenido de texto especificado dentro del elemento de estilo. El contenido del texto .gr { color: green } es una regla CSS. Apunta a elementos con el nombre de clase "gr" y establece su color en verde.
4. Utilice el método getElementsByTagName(name) para encontrar el elemento <head> y agregue el elemento de estilo como elemento secundario al elemento principal.
5. Cree un elemento de párrafo con el nombre de clase "gr" usando los métodos createElement("p") y setClassName("gr").
6. Cree un nodo de texto y agréguelo como hijo al elemento <p>; utilice los métodos createTextNode() y appendChild().
7. Agregue el párrafo al cuerpo del documento.
8. Guarde el documento HTML en un archivo usando el método save().

// Create an instance of an HTML document
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($o("using-dom.html"));

// Create an instance of the PDF output device and render the document into this device
PdfDevice device = new PdfDevice($o("using-dom.html"));

// Render HTML to PDF
document.renderTo(device);

El archivo HTML resultante se ve así:

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

Usando los métodos setInnerHTML() y getOuterHTML()

Tener objetos DOM le brinda una poderosa herramienta para manipular un documento HTML. Sin embargo, a veces es mucho mejor trabajar solo con Class String. El siguiente ejemplo demuestra cómo crear un documento HTML usando la biblioteca Java Aspose.HTML: configure el contenido del elemento del cuerpo y envíe el documento HTML a la consola usando los métodos setInnerHTML() y getOuterHTML() de la clase Element:

1. Cree una instancia de la clase HTMLDocument utilizando el constructor HTMLDocument(). Crea un documento HTML vacío.
2. Para enviar el contenido original del documento HTML a la consola, utilice el método getOuterHTML(). El resultado será <html><head></head><body></body></html> ya que el documento está inicialmente vacío.
3. Utilice el método setInnerHTML() para establecer el contenido del elemento <body>: agregue un elemento HTML <p> con el contenido del texto al elemento del cuerpo.
4. Imprima el contenido actualizado del documento HTML en la consola usando el método getOuterHTML().

// Create an instance of an HTML document
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>

Trabajar con estilos

CSS en línea – Inline CSS

Las hojas de estilo en cascada (CSS) son un lenguaje de hojas de estilo que se utiliza para describir cómo se ven las páginas web en el navegador. Aspose.HTML 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.

Cuando CSS se escribe utilizando el atributo de estilo dentro de una etiqueta HTML, se denomina “CSS de estilo en línea”. El CSS en línea le permite aplicar un estilo individual a un elemento HTML a la vez. Puede configurar CSS en un elemento HTML utilizando el atributo de estilo con cualquier propiedad CSS definida en él. En el siguiente fragmento de código, puede ver cómo especificar propiedades de estilo CSS para un elemento HTML <p>:

// 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($o("edit-inline-css.html"));

// Create the instance of the PDF output device and render the document into this device
PdfDevice device = new PdfDevice($o("edit-inline-css.html"));
document.renderTo(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 externo – Internal CSS

Agregue un elemento <style> al <head> del documento para estilos globales:

// 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, ".");

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($o("edit-internal-css.html"));

// Create the instance of the PDF output device and render the document into this device
PdfDevice device = new PdfDevice($o("edit-internal-css.html"));

// Render HTML to PDF
document.renderTo(device);

La figura ilustra el fragmento del archivo “edit-internal-css.pdf” renderizado:

Conclusión

Aspose.HTML for Java ofrece una API potente y flexible para editar documentos HTML. Puede crear, manipular y representar contenido web mediante programación aprovechando el DOM. Con su adhesión a estándares modernos y funciones avanzadas, Aspose.HTML for Java agiliza las tareas complejas de desarrollo web. Al aprovechar estas funciones, puede administrar y personalizar de manera efectiva el contenido HTML para sus necesidades específicas.

Puede descargar los ejemplos completos y los archivos de datos desde GitHub.