Редактировать HTML-документ

Aspose.HTML for Java предоставляет надежный API для создания, изменения и управления HTML-документами программным способом с использованием Document Object Model (DOM). В этой статье показано, как редактировать HTML-документы, включая манипуляцию узлами, настройку стилей и работу со встроенным и внутренним CSS.

Объектная модель документа

Объектная модель документа, или сокращенно DOM, представляет собой стандартный API для межплатформенного программирования, который помогает программистам получать доступ к частям документа и изменять их. DOM определяет структуру документа как дерево с иерархией узлов, где каждый узел представляет часть документа, например элемент, класс, тег, атрибут или текст. Например, каждая часть, такая как изображение или часть текста, называется «узлом». Дерево DOM – это то, как или с какой структурой документ представлен в памяти. Другими словами, объектная модель документа создает логическую структуру документа и определяет объекты, свойства, события и методы для доступа к ним и их изменения.

Редактировать HTML на Java

HTML DOM определяет элементы HTML как объекты, предоставляя набор свойств и методов, которые можно использовать для доступа к ним и управления ими. Каждый элемент в HTML-документе представлен узлом в дереве DOM, и каждый узел имеет собственный набор свойств и методов.

Как мы уже упоминали в статье Создание HTML-документа, реализация HTMLDocument, а также вся модель DOM основаны на стандарте WHATWG DOM. Таким образом, Aspose.HTML легко использовать, имея базовые знания языков HTML и JavaScript. DOM package представлен следующими основными типами данных:

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.

Методы DOM

HTML DOM определяет набор методов, которые можно использовать для доступа и управления всеми элементами HTML. Вы можете использовать эти методы для выполнения различных задач, таких как создание, изменение и удаление элементов, а также управление их свойствами и событиями. Ниже приведен краткий список полезных методов API, предоставляемых основными типами данных:

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.

Существует множество способов редактирования HTML с помощью нашей библиотеки. Вы можете изменить документ, вставив новые узлы, удалив или отредактировав содержимое существующих узлов. Если вам нужно создать новый узел, необходимо вызвать следующие методы:

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.

После создания новых узлов в DOM есть несколько методов, которые могут помочь вам вставить узлы в дерево. В следующем списке описывается наиболее распространенный способ вставки узлов:

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

Чтобы удалить узел из дерева HTML DOM, используйте метод Node.removeChild(child).

Полный список интерфейсов и методов, представленных в пакете DOM, вы найдете в API Reference Source.

Редактировать дерево документов

В следующем фрагменте кода показано, как редактировать HTML-документ с помощью DOM-дерева и упомянутого выше функционала. Рассмотрим простые шаги по созданию и редактированию HTML. Мы создаем HTML с нуля. Документ будет содержать стилизованный текстовый абзац:

1. Создайте экземпляр HTML-документа с помощью конструктора HTMLDocument().
2. Создайте элемент <style> с помощью метода createElement("style").
3. Вызовите метод setTextContent(), чтобы установить указанное текстовое содержимое в элементе стиля. Текстовое содержимое .gr { color: green } является правилом CSS. Он нацелен на элементы с именем класса "gr" и устанавливает их цвет на зеленый.
4. Используйте метод getElementsByTagName(name), чтобы найти элемент <head> и добавить элемент стиля в качестве дочернего элемента к элементу заголовка.
5. Создайте элемент абзаца с именем класса "gr", используя методы createElement("p") и setClassName("gr").
6. Создайте текстовый узел и добавьте его как дочерний к элементу <p> – используйте методы createTextNode() и appendChild().
7. Добавьте абзац в тело документа.
8. Сохраните документ HTML в файл, используя метод 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("using-dom.html");

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

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

Результирующий HTML-файл выглядит следующим образом:

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

Методы setInnerHTML() и getOuterHTML()

Наличие объектов DOM дает вам мощный инструмент для работы с HTML-документом. Однако иногда гораздо лучше работать только с Class String. В следующем примере показано, как создать HTML-документ с помощью библиотеки Java Aspose.HTML – установить содержимое элемента body и вывести HTML-документ на консоль с помощью методов setInnerHTML() и getOuterHTML():

1. Создайте экземпляр класса HTMLDocument с помощью конструктора HTMLDocument(). Он создает пустой HTML-документ.
2. Чтобы вывести исходное содержимое HTML-документа на консоль, используйте метод getOuterHTML(). Вывод будет <html><head></head><body></body></html>, так как изначально документ пуст.
3. Используйте метод setInnerHTML() для установки содержимого элемента <body>: добавьте элемент HTML <p> с текстом к <body> элементу.
4. Выведите обновленное содержимое HTML-документа на консоль с помощью метода 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>

Работа со стилями

Inline CSS

Каскадные таблицы стилей (CSS) – это язык таблиц стилей, используемый для описания того, как веб-страницы выглядят в браузере. Aspose.HTML не только поддерживает CSS «из коробки», но также предоставляет инструменты для управления стилями документа «на лету» перед преобразованием HTML-документа в другие форматы.

Когда CSS написан с использованием атрибута стиля внутри тега HTML, это называется «Inline CSS». Встроенный CSS позволяет применять индивидуальный стиль к одному HTML-элементу за раз. Вы устанавливаете CSS для элемента HTML, используя атрибут стиля с любыми свойствами CSS, определенными в нем. В следующем фрагменте кода вы можете увидеть, как указать свойства стиля CSS для элемента 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("edit-inline-css.html");

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

В этом конкретном примере цвет, размер шрифта и семейство шрифтов применяются к элементу <p>. Фрагмент отрендеренной pdf-страницы выглядит так:

External CSS

Добавьте элемент <style> в <head> документа для глобальных стилей:

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

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

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

На рисунке показан фрагмент отрендеренного файла edit-internal-css.pdf:

Заключение

Aspose.HTML for Java предлагает мощный и гибкий API для редактирования HTML-документов. Используя DOM, вы можете создавать, изменять и отображать веб-контент программным способом. Благодаря соблюдению современных стандартов и расширенным функциям Aspose.HTML for Java упрощает сложные задачи веб-разработки. Используя эти функции, вы можете эффективно управлять и настраивать HTML-контент для ваших конкретных потребностей.

Вы можете скачать полные примеры и файлы данных по адресу GitHub.