Un objet Document représente le document affiché dans cette fenêtre. L'objet Document a diverses propriétés qui font référence à d'autres objets qui permettent l'accès et la modification du contenu du document. Dans cet article, nous allons comprendre HTML DOM.
- Concept HTML DOM
- Qu'est-ce que le DOM HTML
- Ce que le DOM HTML n'est PAS
- D'où vient le DOM
- Propriétés de HTML DOM
- Recherche d'éléments HTML
Concept HTML DOM
Le mode d'accès et de modification d'un contenu documenté est appelé Modèle d'objet de document , ou DOM. Les objets sont organisés en hiérarchie. Cette structure hiérarchique s'applique à l'organisation des objets dans un document Web.
- Objet Fenêtre & moins Haut de la hiérarchie. C'est l'élément le plus important de la hiérarchie des objets.
- Objet Document & moins Chaque document HTML qui est chargé dans une fenêtre devient un objet document. Le document contient le contenu de la page.
- Objet formulaire & moins Tout ce qui est inclus dans les balises… définit l'objet formulaire.
- Éléments de contrôle de formulaire & moins L'objet de formulaire contient tous les éléments définis pour cet objet tels que les champs de texte, les boutons, les boutons radio et les cases à cocher.
Qu'est-ce que le DOM HTML
Le modèle d'objet de document est une API de programmation pour les documents. Le modèle objet lui-même ressemble étroitement à la structure des documents qu'il modélise. Par exemple, considérez ce tableau, tiré d'un document HTML:
| Shady Grove | Éolienne |
| Au-dessus de la rivière, Charlie | Dorian |
Ce que le DOM HTML n'est PAS
Cette section est conçue pour donner une compréhension plus précise du modèle d'objet de document en le distinguant des autres systèmes qui peuvent lui ressembler.
Bien que le modèle d'objet de document ait été fortement influencé par le HTML dynamique, au niveau 1, il n'implémente pas tout le HTML dynamique. En particulier, les événements n'ont pas encore été définis. Le niveau 1 est conçu pour jeter les bases solides de ce type de fonctionnalité en fournissant un modèle robuste et flexible du document lui-même.
Le modèle d'objet de document n'est pas une spécification binaire. Les programmes de modèle d'objet de document écrits dans le même langage seront compatibles avec le code source sur toutes les plates-formes, mais le modèle d'objet de document ne définit aucune forme d'interopérabilité binaire.
Le modèle d'objet de document n'est pas un moyen de conserver des objets au format XML ou HTML. Au lieu de spécifier comment les objets peuvent être représentés en XML, le modèle d'objet de document spécifie comment les documents XML et HTML sont représentés en tant qu'objets, afin qu'ils puissent être utilisés dans des programmes orientés objet.
chef vs marionnette vs ansible
Le modèle d'objet de document n'est pas un ensemble de structures de données, c'est un modèle d'objet qui spécifie des interfaces. Bien que ce document contienne des diagrammes montrant les relations parent / enfant, il s'agit de relations logiques définies par les interfaces de programmation et non de représentations de structures de données internes particulières.
Le modèle d'objet de document ne définit pas «la véritable sémantique interne» du XML ou du HTML. La sémantique de ces langues est définie par les langues elles-mêmes.
Le Document Object Model est un modèle de programmation conçu pour respecter cette sémantique. Le modèle d'objet de document n'a aucune ramification sur la façon dont vous écrivez des documents XML et HTML, tout document pouvant être écrit dans ces langages peut être représenté dans le modèle d'objet de document.
Le modèle d'objet de document, malgré son nom, n'est pas un concurrent du modèle d'objet de composant (COM). COM, comme CORBA, est un moyen indépendant du langage de spécifier des interfaces et des objets. Le modèle d'objet de document est un ensemble d'interfaces et d'objets conçus pour gérer des documents HTML et XML. Le DOM peut êtreimplémenté en utilisant des systèmes indépendants du langage comme COM ou CORBA, il peut également être implémenté en utilisant des liaisons spécifiques au langage comme les liaisons Java ou ECMAScript spécifiées dans ce document.
D'où vient le modèle d'objet de document
Le modèle d'objet de document a été créé en tant que spécification permettant aux scripts JavaScript et aux programmes Java d'être portables entre les navigateurs Web. Le HTML dynamique était l'ancêtre immédiat du modèle d'objet de document, et il était à l'origine pensé en grande partie en termes de navigateurs.
Cependant, lorsque le groupe de travail sur le modèle d'objet de document a été formé, il a également été rejoint par des fournisseurs d'autres domaines, notamment des éditeurs HTML ou XML et des référentiels de documents. Plusieurs de ces fournisseurs avaient travaillé avec SGML avant le développement de XML. Par conséquent, le modèle d'objet de document a été influencé par SGML Groves et le standard HyTime. Certains de ces fournisseurs avaient également développé leurs propres modèles d'objet pour les documents afin de fournirdes API de programmation pour les éditeurs SGML / XML ou les référentiels de documents, et ces modèles d'objet ont également influencé le modèle d'objet de document.
Propriétés de HTML DOM
Voyons les propriétés des objets de document accessibles et modifiés par l’objet de document.
- Objet de fenêtre: L'objet Window est toujours au sommet de la hiérarchie.
- Objet de document: Lorsqu'un document HTML est chargé dans une fenêtre, il devient un objet de document.
- Objet de formulaire: Il est représenté par forme Mots clés.
- Objets de lien: Il est représenté par lien Mots clés.
- Objets d'ancrage: Il est représenté par un href Mots clés.
- Éléments de contrôle de formulaire: Le formulaire peut avoir de nombreux éléments de contrôle tels que des champs de texte, des boutons, des boutons radio et des cases à cocher, etc.
Méthodes de l'objet document :
- write ('chaîne'): écrit la chaîne donnée sur le document.
- getElementById (): renvoie l'élément ayant la valeur id donnée.
- getElementsByName (): renvoie tous les éléments ayant la valeur de nom donnée.
- getElementsByTagName (): renvoie tous les éléments ayant le nom de balise donné.
- getElementsByClassName (): renvoie tous les éléments ayant le nom de classe donné.
Recherche d'éléments HTML
Lorsque vous souhaitez accéder aux éléments HTML avec JavaScript, vous devez d'abord trouver les éléments.
Il y a plusieurs façons de faire ça:
- Recherche d'éléments HTML par identifiant
- Recherche d'éléments HTML par nom de balise
- Recherche d'éléments HTML par nom de classe
Recherche d'un élément HTML par ID
Le moyen le plus simple de trouver un élément HTML dans le DOM est d'utiliser l'ID d'élément.
Exemple
Recherche d'éléments HTML par nom de balise
Cet exemple trouve l'élément avec id = 'main', puis trouve tout
éléments à l'intérieur de «main»:
Avec cela, nous arrivons à la fin de cet article HTML DOM. J'espère que vous avez compris les différents aspects du DOM HTML, le modèle d'objet de document.
Découvrez notre qui vient avec une formation en direct animée par un instructeur et une expérience de projet réelle. Cette formation vous permet de maîtriser les compétences nécessaires pour travailler avec les technologies Web back-end et front-end. Il comprend une formation sur le développement Web, jQuery, Angular, NodeJS, ExpressJS et MongoDB.
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires du blog «Images HTML» et nous vous recontacterons.