Qu'est-ce que HTML DOM ? – Tutoriel HTML

Aspose.HTML for .NET est une bibliothèque .NET qui vous permet d’accéder au DOM HTML et de le manipuler en C# et dans d’autres langages .NET. Elle fournit des classes et des méthodes qui vous permettent de charger et d’analyser des documents HTML, de naviguer dans l’arbre DOM et d’accéder et de modifier les éléments, les attributs et le contenu des documents.

Veuillez consulter l’article Édition d’un document HTML qui vous donne des informations de base sur la manière de lire ou de modifier le modèle d’objet de document (DOM). Vous découvrirez comment créer un élément HTML et comment l’utiliser à l’aide de l’API Aspose.HTML for .NET.

Modèle d’objet de document

Le modèle des objets documentaires (DOM) est une API de programmation standard multiplateforme qui aide les programmeurs à accéder à des parties d’un document et à les modifier. Le DOM définit la structure d’un document comme un arbre avec une hiérarchie de nœuds, où chaque nœud représente une partie du document, comme un élément, une classe, une balise, un attribut ou du texte. Par exemple, chaque élément, tel qu’une image ou un morceau de texte, est appelé “node”. Un arbre DOM est la façon dont un document est représenté en mémoire. En d’autres termes, le modèle objet de document crée une structure logique de document et définit des objets, des propriétés, des événements et des méthodes pour y accéder et les modifier.

HTML DOM

Le DOM HTML est une API de représentation d’un document HTML qui permet d’accéder au contenu d’un document HTML et de le manipuler. Il fournit une structure arborescente du document, où chaque élément est représenté par un nœud. Chaque branche de l’arbre se termine par un nœud, et chaque nœud contient des objets. Le DOM HTML est mis en œuvre en tant que norme par le World Wide Web Consortium (W3C) et est pris en charge par tous les navigateurs web modernes. Il fournit un moyen cohérent et normalisé d’accéder aux éléments HTML et de les manipuler, ce qui en fait un outil efficace pour créer des pages web dynamiques et interactives.

Le DOM HTML est un modèle de document chargé dans le navigateur et représentant le document sous la forme d’un arbre de nœuds, où chaque nœud représente une partie du document, comme un élément, une chaîne de texte ou un commentaire. Nous décrivons les éléments de l’arbre de la même manière qu’un arbre généalogique : il y a des ancêtres, des descendants, des parents et des enfants. Par exemple, un document HTML avec la structure suivante (fig. 1) sera représenté par un arbre DOM avec un objet document au sommet, des noeuds enfants pour l’élément <html>, un noeud enfant pour l’élément <head>, et ainsi de suite.

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>

Texte “Arbre du document HTML”

Pourquoi DOM est-il nécessaire ?

Soulignons quelques aspects de la nécessité des DOM :

Tout d’abord, le DOM est standard et pris en charge par tous les navigateurs web modernes. Il s’agit donc d’un moyen fiable d’accéder au contenu des pages web et de le gérer, quels que soient les navigateurs et les plates-formes.
Le DOM permet de manipuler le contenu des documents HTML. Chaque objet de l’arbre DOM définit des méthodes, des propriétés et des événements auxquels il est possible d’accéder et de modifier. De cette manière, les développeurs peuvent créer des pages web dynamiques et interactives qui peuvent être mises à jour et modifiées en réponse aux actions de l’utilisateur ou à d’autres événements.
Le DOM permet aux moteurs de recherche et à d’autres outils de comprendre la structure et le contenu d’une page web, ce qui est essentiel pour l’indexation et la recherche de la page.
Le DOM permet aux outils d’accessibilité de comprendre et d’interagir avec la page web, la rendant ainsi accessible aux personnes handicapées, ce qui est très important.
Enfin, le DOM détermine les événements en fonction des actions de l’utilisateur, telles que les clics, les mouvements de souris et l’envoi de formulaires, et fournit un moyen de manipuler les éléments en réponse aux événements.

Ainsi, le DOM HTML est une norme permettant d’obtenir, de modifier, d’ajouter ou de supprimer des éléments HTML. De plus, le DOM permet aux pages web d’être dynamiques et interactives tout en permettant aux moteurs de recherche et aux outils d’accessibilité de les comprendre et d’interagir avec elles.

Accès au DOM HTML en C#

HTML DOM définit les éléments HTML comme des objets, fournissant un ensemble de propriétés et de méthodes que vous pouvez utiliser pour y accéder et les gérer. Chaque élément d’un document HTML est représenté par un nœud dans l’arbre DOM, et chaque nœud possède son propre ensemble de propriétés et de méthodes. En tant que représentation orientée objet d’une page web, elle peut être modifiée à l’aide de la bibliothèque Aspose.HTML C#

Comment le DOM HTML définit-il les éléments HTML en tant qu’objets ?

Aspose.HTML for .NET fournit un ensemble de classes et de méthodes qui vous permettent d’accéder au DOM HTML et de le manipuler en C#. Vous pouvez utiliser la classe HTMLDocument pour charger et analyser un document HTML. Par exemple, vous pouvez utiliser le code suivant pour charger un fichier HTML et accéder à l’élément <body> du document :

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

Propriétés du DOM

Voyons un exemple en C# de l’utilisation de la classe HTMLDocument pour accéder au DOM et modifier le contenu d’un fichier HTML. Dans l’exemple C# suivant, la propriété document.Body.InnerHTML est utilisée pour accéder à l’élément <body>. Elle représente le contenu de l’élément <body> du document, et vous pouvez utiliser la propriété InnerHtml, par exemple, pour obtenir ou définir le code HTML interne de l’élément.

 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);

Dans l’exemple C# ci-dessus, nous suivons les étapes suivantes :

Nous déclarons les variables documentPath et savePath qui définissent le chemin vers un fichier HTML source et final.
Nous créons ensuite une instance de la classe HTMLDocument à l’aide du constructeur HTMLDocument(documentPath) et ouvrons le document pour l’éditer.
Nous utilisons la méthode WriteLine() pour afficher le OuterHTML de la propriété DocumentElement, qui représente l’élément <html>.
Nous attribuons une nouvelle valeur de chaîne à la propriété document.Body.InnerHTML, qui représente le contenu de l’élément <body>.
Ensuite, nous affichons la propriété OuterHTML après la modification, en utilisant la méthode WriteLine().
Enfin, nous enregistrons le fichier HTML modifié en appelant la méthode Save(savePath).

Méthodes DOM

HTML DOM définit un ensemble de méthodes qui peuvent être utilisées pour accéder à tous les éléments HTML et les contrôler. Vous pouvez utiliser ces méthodes pour effectuer diverses tâches, telles que la création, la modification et la suppression d’éléments, ainsi que la gestion de leurs propriétés et de leurs événements. Par exemple, les méthodes les plus couramment utilisées sont les suivantes :

la classe Document fournit des méthodes telles que GetElementById(), GetElementsByTagName(), CreateElement(), CreateTextNode(), et more.
la classe Element fournit les méthodes SetAttribute(), GetAttribute(), QuerySelector(), Remove(), et more.
la classe Node fournit les méthodes AppendChild(), InsertBefore(), RemoveChild(), etc.

Examinons l’exemple C# qui montre comment utiliser la classe HTMLDocument pour créer de nouveaux éléments et nœuds de texte, et comment utiliser la méthode AppendChild() pour les ajouter à un document 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);

La classe HTMLDocument est le point d’entrée principal pour travailler avec le DOM, elle vous permet de charger et d’analyser les documents HTML et d’accéder aux nœuds de l’arbre DOM. Dans l’exemple, nous avons utilisé la classe HTMLDocument pour créer un nouveau document HTML, et les méthodes CreateElement() et CreateTextNode() de la classe HTMLDocument pour créer de nouveaux éléments et nœuds de texte.

Aspose.HTML propose des Applications Web HTML gratuites en ligne qui constituent une collection en ligne de convertisseurs, de fusions, d’outils SEO, de générateurs de code HTML, d’outils URL, etc. Les applications fonctionnent sur n’importe quel système d’exploitation doté d’un navigateur web et ne nécessitent aucune installation de logiciel supplémentaire. Convertissez, fusionnez, encodez, générez facilement du code HTML, extrayez des données du web ou analysez des pages web en termes de référencement, où que vous soyez. Utilisez notre collection d’applications web HTML pour effectuer vos tâches quotidiennes et rendre votre flux de travail fluide !

Ajouter une image au HTML Travailler avec HTML Color