HTML DOM
Cet article discutera de HTML DOM, de sa signification et de sa structure. Nous parlerons également des propriétés et des méthodes du modèle d'objet de document et des niveaux DOM.
HTML DOM
Le modèle d'objet de document HTML ou HTML DOM est une interface de programmation XML et HTML. Le modèle d'objet de document crée une structure de document logique et définit la méthode pour les accéder et les modifier. Parce que HTML DOM n'identifie aucune relation d'objet, elle est appelée structure logique.
HTML DOM est également connu pour représenter des pages Web de manière hiérarchique et organisée afin que les utilisateurs et les programmeurs JavaScript puissent facilement naviguer dans le document. HTML DOM vous permet d'accéder et de manipuler des éléments HTML, des classes, des balises, des attributs et des identifiants en utilisant les méthodes et commandes proposées.
Pourquoi avez-vous besoin de HTML DOM
JavaScript est utilisé pour ajouter des fonctionnalités connexes si vous utilisez HTML pour structurer vos pages Web. Lorsqu'un document HTML est chargé dans le navigateur, JavaScript ne peut pas le comprendre directement. Par conséquent, un modèle d'objet de document correspondant est créé. Le DOM généré représente le même document HTML différemment à l'aide des objets. Après cela, JavaScript peut facilement interpréter le HTML DOM.
Par exemple, dans un document HTML, JavaScript ne peut pas comprendre directement les balises (
paragraphe
)); Cependant, il peut comprendre l'objet "p”Dans le modèle d'objet de document. Avec cette capacité, JavaScript peut utiliser plusieurs méthodes pour accéder aux objets ajoutés des documents HTML.
Structure de HTML DOM
Le modèle d'objet HTML DOM ou Document a une structure en forme d'arbre, où l'arbre définit le modèle de structure du document. Dans le modèle de structure HTML DOM, «isomorphisme structurel"Est une propriété essentielle qui stipule que si vous avez utilisé deux implémentations DOM pour construire une représentation ou un modèle du même document HTML, ils produiront aux mêmes modèles structurels basés sur les mêmes objets et leurs relations.
Pourquoi appelons-nous HTML DOM un modèle de document
Les objets HTML sont utilisés pour la modélisation des documents. Ce modèle comprend la structure du document, les objets et leur comportement, tels que les éléments de balise HTML ayant leurs attributs.
Propriétés HTML DOM
Maintenant, consultons les propriétés de l'objet document qui peuvent récupérer et modifier l'objet document:
- Objet de fenêtre: Vous verrez toujours «l'objet de fenêtre» en haut de la hiérarchie DOM.
- Objet de document: Lorsque vous chargez un document HTML dans un navigateur, il est converti en un objet de document.
- Objet d'ancrage: Les balises HREF sont utilisées pour représenter les objets d'ancrage.
- Objet de forme: Les balises de formulaire sont utilisées pour représenter les objets de formulaire.
- Objet de liaison: Les balises de liaison sont utilisées pour représenter les objets de liaison.
- Éléments de contrôle de la forme: Les formulaires peuvent également avoir d'autres éléments de contrôle tels que les boutons, la réinitialisation, les boutons radio, TextArea, les cases.
Méthodes d'objet de document HTML
Voici quelques méthodes d'objets de document HTML utiles que vous pouvez utiliser en fonction de vos exigences:
- getElementByClassName (): La méthode GetElementByClassName () est utilisée pour récupérer des éléments ayant le nom de classe spécifié.
- getElementByTagName (): La méthode GetElementByTagName () est utilisée pour récupérer des éléments avec le nom de balise ajouté.
- getElementByName (): La méthode GetElementByName () est utilisée pour récupérer des éléments ayant la valeur de nom spécifiée.
- getElementById (): La méthode GetElementById () est utilisée pour récupérer les éléments ayant la valeur d'ID spécifiée.
- écrire(): La méthode écrite () est utilisée pour écrire la chaîne spécifiée dans le document.
Exemple 1: Trouver et obtenir un élément HTML par ID dans JavaScript
Dans l'exemple ci-dessous, nous avons utilisé la méthode GetElementById () pour trouver le DOM HTML ayant l'ID "P1»:
C'est Linuxhint.com
Trouver et obtenir des éléments HTML DOM par id
Ceci est un programme JavaScript qui utilise la méthode "GetElementsById"
Exécutez le programme donné ci-dessus dans votre éditeur de code préféré ou tout autre bac à sable codant en ligne; Cependant, nous utiliserons le JSBIN à cet effet:
L'exécution du programme JavaScript ci-dessus affichera la sortie suivante:
Exemple 2: représentation des éléments HTML DOM
L'exemple suivant illustre la représentation des éléments HTML dans DOM (Document Object Model):
| Vélo | Avion |
| Camion | Bus |
Voici la représentation des éléments donnés ci-dessus dans une structure en forme d'arbre:
Niveau DOM HTML
HTML DOM se compose de quatre niveaux: niveau 0, niveau 1, niveau 2 et niveau 3.
DOM Niveau 0
Ce niveau offre un ensemble d'interface de bas niveau.
DOM Niveau 1
DOM Le niveau 1 comprend Html et CŒUR les pièces. HTML fournit des interfaces de haut niveau qui peuvent être utilisées pour représenter des documents HTML et la partie centrale est utilisée pour représenter le document structuré.
DOM Niveau 2
DOM Level 2 est basé sur six spécifications: plage, traversée, style, événements et core2.
- GAMME: Il permet des programmes HTML pour allouer dynamiquement une plage de contenu dans le document.
- Traversion: Il permet aux programmes HTML de parcourir le document dynamiquement.
- STYLE: Il permet aux programmes de récupérer et de définir le contenu des feuilles de style.
- ÉVÉNEMENTS: Lorsqu'un utilisateur interagit avec une page Web, les événements sont les scripts exécutés à la suite de celui-ci.
- Vues: Il permet aux programmes HTML de récupérer et de définir le contenu du document.
DOM Niveau 3
DOM Level 3 est basé sur cinq spécifications: XPATH, événements, validation, sauvegarde, chargement et core3.
- Xpath: C'est un langage de chemin utilisé pour accéder à la structure des arbres de DOM.
- ÉVÉNEMENTS: Il améliore la fonctionnalité des événements DOM Niveau 2.
- VALIDATION: Il permet au programme HTML de modifier la structure et le contenu du document tout en veillant à ce que le document fourni soit valide.
- SAUVEGARDER et CHARGER: Le programme HTML permet de charger et d'enregistrer le contenu du document XML dans un document DOM.
- Core3: Il améliore la fonctionnalité du noyau DOM niveau 2.
Conclusion
HTML DOM ou le modèle d'objet de document est crucial pour développer des sites Web interactifs. Il s'agit d'une interface utilisateur qui permet à un langage de programmation de modifier le style, la structure et le contenu du site Web. HTML DOM agit également comme une interface entre HTML et JavaScript. Cet article a discuté de HTML DOM, de sa signification et de sa structure. Nous avons également parlé des propriétés et des méthodes du modèle d'objet de document et des niveaux de DOM.