Premiers pas avec DOM

Balisage HTML

exemple d’entrée :

<html>
  <head>
    <title>the title</title>
    <link href='css/app.css' type='text/css' rel='stylesheet'>
    <script src='js/app.js'></script>
  </head>
  <body>
    <h1>header</h1>
    <div>
      <p>hello!</p>
    </div>
  </body>
</html>

Sortie de l’élément DOM :

                             ------------                             
                             | document |    <--- DOM root object.                           
                             ------------                             
                                  |                                   
                                  |                                   
                             ------------                             
                             |   html   |     <--- document.documentElement                  
                             ------------                             
                    ______________|______________                     
                    |                           |                     
               ------------                ------------               
               |   head   |                |   body   |               
               ------------                ------------               
      ______________|______________             |______________       
      |             |             |             |             |       
 ------------  ------------  ------------  ------------  ------------ 
 |  title   |  |   link   |  |  script  |  |    h1    |  |   div    | 
 ------------  ------------  ------------  ------------  ------------ 
                                                              |       
                                                              |       
                                                         ------------ 
                                                         |    p     | 
                                                         ------------ 

Tous les éléments ci-dessus héritent de l’interface HTMLElement et sont personnalisés en fonction d’une balise spécifique

Commencer

Le DOM (Document Object Model) est l’interface de programmation des documents HTML et XML, il définit la structure logique des documents et la façon dont un document est accessible et manipulé.

Les principaux implémenteurs de l’API DOM sont les navigateurs Web. Les spécifications sont normalisées par les groupes W3C et WHATWG, et le modèle objet spécifie la logique modèle pour l’interface de programmation.

La représentation de la structure DOM ressemble à une vue arborescente, où chaque nœud est un objet représentant une partie du balisage, selon le type chaque élément hérite également de fonctionnalités spécifiques et partagées.

Le nom “Document Object Model” a été choisi car il s’agit d’un “modèle objet” au sens traditionnel de la conception orientée objet : les documents sont modélisés à l’aide d’objets, et le modèle englobe non seulement la structure d’un document, mais aussi le comportement d’un document et des objets qui le composent. En d’autres termes, en prenant l’exemple du diagramme HTML, les nœuds ne représentent pas une structure de données, ils représentent des objets, qui ont des fonctions et une identité. En tant que modèle d’objet, le modèle d’objet de document identifie :

  • les interfaces et objets utilisés pour représenter et manipuler un document
  • sémantique de ces interfaces et objets - comprenant à la fois le comportement et les attributs
  • les relations et collaborations entre ces interfaces et objets

Attendre que DOM soit chargé

Récupération des éléments html existants

L’une des tâches les plus courantes consiste à récupérer un élément existant du DOM pour le manipuler. Le plus souvent, ces méthodes sont exécutées sur document, car il s’agit du nœud racine, mais toutes ces méthodes fonctionnent sur n’importe quel élément HTML de l’arborescence. Ils ne renverront que les enfants du nœud sur lequel ils sont exécutés.

Récupérer par identifiant

var element = document.getElementById("logo");

element contiendra le (seul) élément dont l’attribut id est défini sur “logo”, ou contient null si aucun élément de ce type n’existe. Si plusieurs éléments avec cet identifiant existent, le document n’est pas valide et tout peut arriver.

Récupérer par nom de balise

var elements = document.getElementsByTagName("a");

elements contiendra une live HTMLCollection (un objet semblable à un tableau) de toutes les balises de lien du document. Cette collection est synchronisée avec le DOM, donc toutes les modifications apportées au DOM sont reflétées dans cette collection. La collection offre un accès aléatoire et a une longueur.

var element = elements[0];
//Alternative
element = elements.item(0);

element contient le premier élément de lien HTML rencontré, ou null si l’index est hors limites

var length = elements.length;

length est égal au nombre d’éléments de lien HTML actuellement dans la liste. Ce nombre peut changer lorsque le DOM est modifié.

Récupérer par classe

var elements = document.getElementsByClassName("recipe");

elements contiendra une live HTMLCollection (un objet semblable à un tableau) de tous les éléments où leur attribut class inclut “recipe”. Cette collection est synchronisée avec le DOM, donc toutes les modifications apportées au DOM sont reflétées dans cette collection. La collection offre un accès aléatoire et a une longueur.

var element = elements[0];
//Alternative
element = elements.item(0);

element contient le premier élément HTML rencontré avec cette classe. S’il n’y a pas de tels éléments, element a la valeur undefined dans le premier exemple et null dans le deuxième exemple.

var length = elements.length;

length est égal au nombre d’éléments HTML qui ont actuellement la classe “recipe”. Ce nombre peut changer lorsque le DOM est modifié.

Récupérer par nom

var elements = document.getElementsByName("zipcode");

elements contiendra une live NodeList (un objet semblable à un tableau) de tous les éléments avec leur attribut name défini sur “zipcode”. Cette collection est synchronisée avec le DOM, donc toutes les modifications apportées au DOM sont reflétées dans cette collection. La collection offre un accès aléatoire et a une longueur.

var element = elements[0];
//Alternative
element = elements.item(0);

element contient le premier élément HTML rencontré avec ce nom.

var length = elements.length;

length est égal au nombre d’éléments HTML qui ont actuellement “code postal” comme attribut de nom. Ce nombre peut changer lorsque le DOM est modifié.

Utilisez innerHTML