什么是 HTML DOM？- HTML 教程

Aspose.HTML for .NET是一个.NET库，可让您使用C#和其他.NET语言访问和操作HTML DOM。它提供的类和方法可让您加载和解析 HTML 文档、浏览 DOM 树以及访问和修改文档元素、属性和内容。

请访问 编辑 HTML 文档 这篇文章，其中提供了有关如何读取或修改文档对象模型 (DOM) 的基本信息。您将了解如何创建 HTML 元素，以及如何使用 Aspose.HTML for .NET API 对其进行操作。

文档对象模型 – Document Object Model

文档对象模型(简称 DOM)是一种标准的跨平台编程应用程序接口，可帮助程序员访问和修改文档的部分内容。DOM 将文档结构定义为具有节点层次结构的树状结构，其中每个节点代表文档的一个部分，如元素、类、标记、属性或文本。例如，图像或文本等每个部分都称为一个 node。DOM 树是文档在内存中的表示方式或结构。换句话说，文档对象模型创建了一个逻辑文档结构，并定义了对象、属性、事件以及访问和修改它们的方法。

HTML DOM

HTML DOM 是表示 HTML 文档的 API，允许访问和操作 HTML 文档的内容。它提供了文档的树形结构，其中每个元素都表示为一个树节点。树的每个分支以一个节点结束，每个节点包含一个对象。HTML DOM 由万维网联盟(W3C)作为标准实现，并由所有现代网络浏览器支持。它为访问和操作 HTML 元素提供了一致的标准化方式，使其成为创建动态交互式网页的有效工具。

HTML DOM 是在浏览器中加载的文档模型，以节点树的形式表示文档，其中每个节点代表文档的一部分，如元素、文本字符串或注释。我们描述树中元素的方式与描述家庭树的方式相同–有祖先、后代、父母和子女。例如，具有以下结构的 HTML 文档(图 1)将由一个 DOM 树来表示，该树的顶端有一个 document 对象，<html> 元素有一个子节点，<head> 元素有一个子节点，以此类推。

1<html>
2    <head>
3        <title>HTML document tree</title>
4    </head>
5    <body>
6        <h1>HTML DOM</h1>
7        <p>HTML DOM is a programming interface for HTML documents.</p>
8    </body>
9</html>

文本 “HTML 文档树”

为什么需要 DOM？

让我们从几个方面来说明为什么需要 DOM：

首先，DOM 是标准的，所有现代网络浏览器都支持。因此，它是跨浏览器和平台访问和管理网页内容的可靠方式。
DOM 提供对 HTML 文档内容的操作。每个 DOM 树对象都定义了用于访问和修改的方法、属性和事件。这样，开发人员就能创建动态的交互式网页，并根据用户操作或其他事件更新和更改网页。
DOM 允许搜索引擎和其他工具了解网页的结构和内容，这对索引和搜索网页至关重要。
DOM 允许辅助工具理解网页并与之交互，从而使残障人士也能访问网页，这一点非常重要。
最后，DOM 会根据用户的操作(如点击、鼠标移动和发送表单)确定事件，并提供一种根据事件操作元素的方法。

因此，HTML DOM 是如何获取、更改、添加或删除 HTML 元素的标准。此外，DOM 使网页具有动态性和交互性，同时使搜索引擎和可访问性工具能够理解网页并与之交互。

使用 C# 访问 HTML DOM

HTML DOM 将 HTML 元素定义为对象，提供了一系列属性和方法，您可以使用这些属性和方法来访问和管理这些元素。HTML 文档中的每个元素都由 DOM 树中的一个节点表示，每个节点都有自己的一套属性和方法。作为网页的面向对象表示法，可以使用 Aspose.HTML C# 库进行修改。

HTML DOM 如何将 HTML 元素定义为对象？

Aspose.HTML for .NET 提供了一组类和方法，允许您用 C# 访问和操作 HTML DOM。您可以使用 HTMLDocument 类加载和解析 HTML 文档。例如，您可以使用以下代码加载 HTML 文件并访问文档中的 <body> 元素：

1using Aspose.Html;
2...
3
4    using var document = new HTMLDocument(documentPath);
5    var body = document.Body;

DOM 属性

让我们看一个 C# 示例，了解如何使用 HTMLDocument 类访问 DOM 并修改 HTML 文件的内容。在下面的 C# 示例中，document.Body.InnerHTML 属性用于访问<body> 元素。它表示文档中<body>元素的内容，例如，您可以使用 InnerHtml 属性来获取或设置元素的内部 HTML。

 1using Aspose.Html;
 2using System.IO;
 3...
 4
 5    // Prepare a path to a source HTML file
 6    string documentPath = Path.Combine(DataDir, "document.html");
 7
 8    // Prepare a path for edited file saving 
 9    string savePath = Path.Combine(OutputDir, "document-edited.html");
10
11    // Initialize an HTML document from the file
12    using var document = new HTMLDocument(documentPath);
13
14    // Write the content of the HTML document into the console output
15    Console.WriteLine(document.DocumentElement.OuterHTML); // output: <html><head></head><body>Hello, World!</body></html>
16
17    // Edit the content of the body element
18    document.Body.InnerHTML = "<p>HTML is the standard markup language for Web pages.</p>";
19
20    // Write the content of the HTML document into the console output
21    Console.WriteLine(document.DocumentElement.OuterHTML); // output: <html><head></head><body><p>HTML is the standard markup language for Web pages.</p></body></html>
22
23    // Save the edited HTML file
24    document.Save(savePath);

在上面的 C# 示例中，我们采取了以下步骤：

我们声明了变量 documentPath 和 savePath，用于设置 HTML 源文件和最终文件的路径。
然后，我们使用 HTMLDocument(documentPath) 构造函数创建一个 HTMLDocument 类实例，并打开文档进行编辑。
我们使用 WriteLine() 方法输出 DocumentElement 属性的 OuterHTML，该属性代表 <html> 元素。
我们为 document.Body.InnerHTML 属性分配一个新的字符串值，它代表了 <body> 元素的内容。
然后，我们使用 WriteLine() 方法输出更改后的 OuterHTML 属性。
最后，我们调用 Save(savePath) 方法保存编辑好的 HTML 文件。

DOM 方法

HTML DOM 定义了一组可用于访问和控制所有 HTML 元素的方法。您可以使用这些方法执行各种任务，如创建、修改和删除元素，以及管理其属性和事件。例如，最常用的方法有

Document 类提供了 GetElementById()、 GetElementsByTagName()、 CreateElement()、 CreateTextNode() 和 more 等方法。
Element 类提供了 SetAttribute()、 GetAttribute()、 QuerySelector()、 Remove() 和 more 方法。
Node 类提供了 AppendChild()、 InsertBefore()、 RemoveChild() 等方法。

让我们看看 C# 示例，它演示了如何使用 HTMLDocument 类创建新元素和文本节点，以及如何使用 AppendChild() 方法将它们添加到 HTML 文档中。

 1using Aspose.Html;
 2using System.IO;
 3...
 4
 5    // Prepare a path for edited file saving 
 6    string savePath = Path.Combine(OutputDir, "dom.html");
 7
 8    // Initialize an empty HTML document
 9    using var document = new HTMLDocument();
10
11    // Declare a variable body that references the <body> element
12    var body = document.Body;
13    
14    // Create an <h1> element with text content
15    var h1 = document.CreateElement("h1");
16    var text1 = document.CreateTextNode("HTML DOM");
17    h1.AppendChild(text1);
18
19    // Create a <p> element with text content
20    var p = document.CreateElement("p");
21    var text2 = document.CreateTextNode("HTML Document Object Model is a programming interface for HTML documents.");
22    p.AppendChild(text2);
23
24    // Add new elements into <body>
25    body.AppendChild(h1);
26    body.AppendChild(p);
27
28    // Save the document to a file
29    document.Save(savePath);

HTMLDocument类提供了使用 DOM 的主要入口，它允许你加载和解析 HTML 文档，并访问 DOM 树中的节点。在示例中，我们使用 HTMLDocument 类创建了一个新的 HTML 文档，并使用 HTMLDocument 类的 CreateElement() 和 CreateTextNode() 方法创建了新的元素和文本节点。

Aspose.HTML 提供免费的在线 HTML 网络应用程序，其中包括转换器、合并器、搜索引擎优化工具、HTML 代码生成器、URL 工具等。这些应用程序可在任何装有网络浏览器的操作系统上运行，无需安装任何其他软件。无论你身在何处，都能轻松转换、合并、编码、生成 HTML 代码，从网页中提取数据，或从搜索引擎优化的角度分析网页。使用我们的 HTML 网络应用程序集来处理您的日常事务，让您的工作流程天衣无缝！

在 HTML 中添加图像使用 HTML 颜色