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

Пространство имен DOM

Aspose.HTML for Python via .NET позволяет вам получать доступ к HTML DOM (объектной модели документа) и манипулировать ею на языке Python. Пространство имен aspose.html.dom предоставляет API для взаимодействия с документами HTML, XML и SVG. Он представляет документ как дерево узлов, где каждый узел представляет часть документа, например элемент, текстовую строку или комментарий. Пространство имен включает в себя такие классы, как Attr, CharacterData, Comment и другие, каждый из которых служит определенным целям в модели документа.

Класс Document представляет весь документ HTML, XML или SVG и служит корнем дерева документов. Другие классы, такие как Element, Node, DocumentFragment и EventTarget, предоставляют доступ к различным частям документа и позволяют манипулировать данными документа и взаимодействовать с ними. API основан на стандарте WHATWG DOM. Таким образом, легко использовать Aspose.HTML for Python via .NET, имея базовые знания языков HTML и JavaScript.

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

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

create_element(local_name) для создания новых элементов, таких как <style> и <p>;
get_elements_by_tag_name(tagname) для получения списка существующих элементов данного тэга;
get_element_by_id(element_id) для возврата первого элемента с указанным атрибутом ID с заданным значением;
create_text_node(data) для добавления текстового контента.

Для управления атрибутами элемента используйте методы:

set_attribute(qualified_name, value) добавляет новый атрибут и устанавливает его значение. Если атрибут с таким именем уже присутствует в элементе, его значение меняется на значение параметра value;
get_attribute(qualified_name) извлекает значение атрибута по имени.

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

Метод append_child(node) используется для добавления элементов или узлов к существующим элементам;
Метод insert_before(node, child) вставляет node перед существующим дочерним узлом child. Если child имеет значение null, node вставляется в конец списка дочерних элементов.
Метод remove() удаляет этот экземпляр из дерева HTML DOM.
Метод remove_child(child) удаляет дочерний узел из списка дочерних узлов.

Полный список классов и методов, представленных в пространстве имен DOM, можно найти на странице Справочник API.

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

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

Используйте конструктор HTMLDocument() для создания экземпляра HTML-документа.
Свойство body класса HTMLDocument указывает на элемент <body> документа.
Используйте метод create_element() класса HTMLDocument, чтобы создать элемент абзаца <p>.
Используйте метод set_attribute(), чтобы установить атрибут id для элемента абзаца.
Создайте текстовый узел с помощью метода create_text_node().
Добавьте этот текстовый узел к элементу абзаца, используя метод append_child().
Добавьте элемент абзаца в <body> документа, используя метод append_child().
Сохраните HTML-документ в файл.

Этот код демонстрирует, как программно создать базовый HTML-документ, добавить абзац с атрибутом и текстом и сохранить полученный HTML-код в файл:

 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

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

Используйте конструктор HTMLDocument() для инициализации нового объекта HTMLDocument, который представляет HTML-документ.
Используйте метод create_element() класса HTMLDocument для создания элемента <style>.
Назначьте правила CSS элементу стиля с помощью свойства text_content.
Получите элемент <head> с помощью метода get_elements_by_tag_name().
Добавьте элемент <style> к элементу <head> с помощью метода append_child().
Используйте метод create_element() для создания элемента абзаца <p>.
Установите свойство class_name абзаца, чтобы применить нужные стили CSS.
Создайте текстовый узел с помощью метода create_text_node().
Добавьте этот текстовый узел к элементу абзаца, используя метод append_child().
Добавьте элемент абзаца в <body> документа, используя метод append_child() в свойстве body.
Вызовите метод save() класса HTMLDocument, чтобы сохранить документ по указанному пути к файлу HTML.

 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

Справочник API предоставляет полный список классов и методов в пространстве имен DOM.

Использование свойств `inner_html` и `outer_html`

Работа с объектами DOM предоставляет мощный способ манипулирования HTML-документом на Python. Однако в некоторых случаях удобнее работать напрямую со строками. Свойства inner_html и outer_html используются для доступа к содержимому HTML в документе и управления им, но они различаются тем, что они представляют и как они используются:

Свойство inner_html представляет содержимое HTML внутри элемента, исключая собственные начальный и конечный теги элемента.
Свойство outer_html представляет все HTML-содержимое элемента, включая его собственные начальный и конечный теги.

В следующем фрагменте кода показано, как использовать свойства inner_html и outer_html класса Element для редактирования 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

Редактировать CSS

Каскадные таблицы стилей (CSS) – это язык таблиц стилей, используемый для описания того, как веб-страницы отображаются в браузере. CSS можно добавлять в HTML-документы встроенным, внутренним и внешним способом. Таким образом, вы можете определить уникальный стиль для одного элемента HTML, используя встроенный CSS, или для нескольких веб-страниц, чтобы использовать общее форматирование, указав соответствующий CSS в отдельном файле .css. Aspose.HTML for Python via .NET не только поддерживает CSS «из коробки», но также предоставляет инструменты для управления стилями документа «на лету» перед преобразованием HTML-документа в другие форматы, как показано ниже.

Встроенный CSS

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

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

Текст «Редактировать встроенный CSS»

Внутренний CSS

Опция внутреннего стиля CSS популярна для применения свойств к отдельным страницам путем заключения всех стилей в элемент <style>, помещающий его в <head> 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

В этом примере мы используем внутренний CSS, а также объявляем дополнительные свойства стиля для отдельных элементов, используя атрибут style внутри тегов <h1> и <p>. На рисунке показан фрагмент отрисованного файла edit-internal-css.pdf:

Текст «Редактировать внутренний CSS»

Загрузите библиотеку Aspose.HTML for Python via .NET, чтобы успешно, быстро и легко манипулировать вашими HTML-документами. Библиотека Python может создавать, изменять, извлекать данные, конвертировать и отображать HTML-документы без необходимости использования внешнего программного обеспечения. Она поддерживает популярные форматы файлов, такие как EPUB, MHTML, XML, SVG и Markdown, а также может выполнять рендеринг в форматах файлов PDF, DOCX, XPS и изображений.

Создать документ Сохранить HTML-документ