Was ist HTML DOM? – HTML-Tutorial
Aspose.HTML for .NET ist eine .NET-Bibliothek, die es Ihnen ermöglicht, auf das HTML-DOM in C# und anderen .NET-Sprachen zuzugreifen und es zu bearbeiten. Sie stellt Klassen und Methoden zur Verfügung, die es ermöglichen, HTML-Dokumente zu laden und zu analysieren, im DOM-Baum zu navigieren und auf Dokumentelemente, Attribute und Inhalte zuzugreifen und diese zu verändern.
Bitte besuchen Sie den Artikel HTML-Dokument bearbeiten, der Ihnen grundlegende Informationen zum Lesen oder Ändern des Document Object Model (DOM) bietet. Sie erfahren, wie Sie ein HTML-Element erstellen und wie Sie damit arbeiten können, indem Sie Aspose.HTML for .NET API verwenden.
Dokument-Objektmodell
Das Document Object Model, kurz DOM, ist eine plattformübergreifende Standardprogrammierschnittstelle, mit der Programmierer auf Teile eines Dokuments zugreifen und diese verändern können. DOM definiert die Struktur eines Dokuments als einen Baum mit einer Hierarchie von Knoten, wobei jeder Knoten einen Teil des Dokuments darstellt, z. B. ein Element, eine Klasse, ein Tag, ein Attribut oder einen Text. Jedes Teil, z. B. ein Bild oder ein Stück Text, wird als “Knoten” bezeichnet. Ein DOM-Baum gibt an, wie oder mit welcher Struktur ein Dokument im Speicher dargestellt wird. Mit anderen Worten: Das Document Object Model erstellt eine logische Dokumentstruktur und definiert Objekte, Eigenschaften, Ereignisse und Methoden für den Zugriff und die Änderung dieser Objekte.
HTML DOM
Das HTML DOM ist eine API für die Darstellung eines HTML-Dokuments, mit der Sie auf den Inhalt eines HTML-Dokuments zugreifen und diesen manipulieren können. Es bietet eine Baumstruktur des Dokuments, in der jedes Element als Baumknoten dargestellt wird. Jeder Zweig des Baums endet mit einem Knoten, und jeder Knoten enthält Objekte. Das HTML-DOM wurde vom World Wide Web Consortium (W3C) als Standard implementiert und wird von allen modernen Webbrowsern unterstützt. Es bietet eine konsistente und standardisierte Möglichkeit, auf HTML-Elemente zuzugreifen und sie zu manipulieren, was es zu einem effektiven Werkzeug für die Erstellung dynamischer und interaktiver Webseiten macht.
Das HTML-DOM ist ein Dokumentenmodell, das im Browser geladen wird und das Dokument als Knotenbaum darstellt, wobei jeder Knoten einen Teil des Dokuments repräsentiert, z. B. ein Element, eine Textzeichenfolge oder einen Kommentar. Wir beschreiben die Elemente in diesem Baum auf die gleiche Weise wie einen Stammbaum – es gibt Vorfahren, Nachkommen, Eltern und Kinder. Ein HTML-Dokument mit der folgenden Struktur (Abb. 1) wird beispielsweise durch einen DOM-Baum mit einem document
-Objekt an der Spitze, Kindknoten für das “html”-Element, einem Kindknoten für das “head”-Element und so weiter dargestellt.
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>
Warum ist DOM erforderlich?
Lassen Sie uns ein paar Aspekte aufzeigen, warum DOM benötigt wird:
- Erstens ist DOM ein Standard und wird von allen modernen Webbrowsern unterstützt. Dies macht es zu einem zuverlässigen Weg, um auf den Inhalt von Webseiten zuzugreifen und diesen browser- und plattformübergreifend zu verwalten.
- DOM ermöglicht die Manipulation des Inhalts von HTML-Dokumenten. Jedes DOM-Baumobjekt definiert Methoden, Eigenschaften und Ereignisse für den Zugriff und die Änderung. Auf diese Weise können Entwickler dynamische und interaktive Webseiten erstellen, die als Reaktion auf Benutzeraktionen oder andere Ereignisse aktualisiert und verändert werden können.
- Das DOM ermöglicht es Suchmaschinen und anderen Tools, die Struktur und den Inhalt einer Webseite zu verstehen, was für die Indizierung und Suche auf der Seite unerlässlich ist.
- Das DOM ermöglicht es Zugänglichkeitswerkzeugen, die Webseite zu verstehen und mit ihr zu interagieren, wodurch sie für Menschen mit Behinderungen zugänglich wird, was sehr wichtig ist.
- Und schließlich bestimmt das DOM Ereignisse auf der Grundlage von Benutzeraktionen, wie z. B. Klicken, Mausbewegungen und das Senden von Formularen, und bietet eine Möglichkeit, Elemente als Reaktion auf Ereignisse zu manipulieren.
Das HTML-DOM ist also ein Standard dafür, wie HTML-Elemente abgerufen, geändert, hinzugefügt oder gelöscht werden können. Darüber hinaus ermöglicht das DOM, dass Webseiten dynamisch und interaktiv sind und dass Suchmaschinen und Eingabehilfen sie verstehen und mit ihnen interagieren können.
Zugriff auf das HTML-DOM mit C#
HTML DOM definiert HTML-Elemente als Objekte und bietet eine Reihe von Eigenschaften und Methoden, mit denen Sie auf sie zugreifen und sie verwalten können. Jedes Element in einem HTML-Dokument wird durch einen Knoten im DOM-Baum repräsentiert, und jeder Knoten hat seinen eigenen Satz von Eigenschaften und Methoden. Als objektorientierte Darstellung einer Webseite kann sie mit der Aspose.HTML C#-Bibliothek geändert werden.
Wie definiert HTML DOM HTML-Elemente als Objekte?
Aspose.HTML for .NET bietet eine Reihe von Klassen und Methoden, mit denen Sie auf das HTML-DOM in C# zugreifen und es manipulieren können. Sie können die Klasse
HTMLDocument verwenden, um ein HTML-Dokument zu laden und zu parsen. So können Sie beispielsweise den folgenden Code verwenden, um eine HTML-Datei zu laden und auf das Element <body>
des Dokuments zuzugreifen:
1using Aspose.Html;
2...
3
4 using var document = new HTMLDocument(documentPath);
5 var body = document.Body;
DOM-Eigenschaften
Schauen wir uns ein C#-Beispiel an, wie man die Klasse HTMLDocument
verwendet, um auf das DOM zuzugreifen und den Inhalt einer HTML-Datei zu ändern. Im folgenden C#-Beispiel wird die Eigenschaft document.Body.InnerHTML
für den Zugriff auf das Element <body>
verwendet. Es stellt den Inhalt des Elements <body>
des Dokuments dar, und Sie können die Eigenschaft
InnerHtml verwenden, um beispielsweise das innere HTML des Elements abzurufen oder festzulegen.
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);
Im obigen C#-Beispiel führen wir die folgenden Schritte aus:
- Wir deklarieren die Variablen
documentPath
undsavePath
, die den Pfad zu einer Quell- und endgültigen HTML-Datei festlegen. - Dann erstellen wir eine Instanz der Klasse
HTMLDocument
mit dem KonstruktorHTMLDocument(documentPath)
und öffnen das Dokument zur Bearbeitung. - Wir verwenden die Methode
WriteLine()
, um die OuterHTML der Eigenschaft “DocumentElement” auszugeben, die das Element<html>
darstellt. - Wir weisen der Eigenschaft
document.Body.InnerHTML
einen neuen String-Wert zu, der den Inhalt des Elements<body>
darstellt. - Dann geben wir die Eigenschaft
OuterHTML
nach der Änderung mit der MethodeWriteLine()
aus. - Schließlich speichern wir die bearbeitete HTML-Datei durch Aufruf der Methode Save(savePath).
DOM-Methoden
HTML DOM definiert eine Reihe von Methoden, die für den Zugriff auf alle HTML-Elemente und deren Steuerung verwendet werden können. Sie können diese Methoden verwenden, um verschiedene Aufgaben auszuführen, wie z.B. das Erstellen, Ändern und Löschen von Elementen und die Verwaltung ihrer Eigenschaften und Ereignisse. Die gebräuchlichsten Methoden sind zum Beispiel:
- die Klasse Document bietet Methoden wie GetElementById(), GetElementsByTagName(), CreateElement(), CreateTextNode(), und more.
- die Klasse Element bietet die Methoden SetAttribute(), GetAttribute(), QuerySelector(), Remove(), und more.
- die Klasse Node bietet die Methoden AppendChild(), InsertBefore(), RemoveChild(), usw.
Schauen wir uns das C#-Beispiel an, das zeigt, wie man die Klasse HTMLDocument
verwendet, um neue Elemente und Textknoten zu erstellen, und wie man die Methode AppendChild()
verwendet, um sie zu einem HTML-Dokument hinzuzufügen.
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);
Die Klasse
HTMLDocument stellt den Haupteinstiegspunkt für die Arbeit mit dem DOM dar. Sie ermöglicht das Laden und Parsen von HTML-Dokumenten und den Zugriff auf Knoten des DOM-Baums. Im Beispiel haben wir die Klasse HTMLDocument
verwendet, um ein neues HTML-Dokument zu erstellen, und die Methoden CreateElement()
und CreateTextNode()
der Klasse HTMLDocument
, um neue Elemente und Textknoten zu erzeugen.
Aspose.HTML bietet kostenlose Online- HTML-Webanwendungen, die eine Online-Sammlung von Konvertern, Zusammenführungen, SEO-Tools, HTML-Code-Generatoren, URL-Tools und mehr sind. Die Anwendungen funktionieren auf jedem Betriebssystem mit einem Webbrowser und erfordern keine zusätzliche Softwareinstallation. Konvertieren, fusionieren, kodieren, generieren Sie HTML-Code, extrahieren Sie Daten aus dem Web oder analysieren Sie Webseiten im Hinblick auf SEO, wo immer Sie sind. Nutzen Sie unsere Sammlung von HTML-Webanwendungen, um Ihre täglichen Aufgaben zu erledigen und Ihren Arbeitsablauf nahtlos zu gestalten!