DOMDémarrer avec DOM

Remarques

Le DOM, ou modèle d'objet de document, est l'API utilisée par les navigateurs Web et d'autres applications pour accéder au contenu d'un document HTML.

Le DOM représente la structure sous la forme d'un arbre, les nœuds peuvent contenir des nœuds enfants, les nœuds sans enfants sont les nœuds feuilles.

Avec cela, on peut manipuler la structure et les propriétés du document et de ses parties constitutives.

Les sujets principaux incluent la recherche d'éléments, l'accès aux informations de style et l'animation.

La plupart du travail avec le DOM se fait en utilisant le langage JavaScript , mais l'API est ouverte à tous les langages.

Versions

DOM W3C

Version Date de sortie
1 1998-10-01
2 (Core) 2000-11-13
3 (Core) 2004-04-07
4 2013-11-07

Niveau API des sélecteurs

Version Date de sortie
1 2013-02-21

Commencer

Le DOM (Document Object Model) est l'interface de programmation pour les documents HTML et XML. Il définit la structure logique des documents et la manière 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 d'objet spécifie le modèle logique de 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 d'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 et les 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 ayant des fonctions et une identité. En tant que modèle d'objet, le modèle d'objet de document identifie:

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

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 du tag spécifique

Récupération d'éléments HTML existants

L'une des tâches les plus courantes consiste à récupérer un élément existant dans le DOM pour le manipuler. Le plus souvent, ces méthodes sont exécutées sur un document , car il s'agit du nœud racine, mais toutes ces méthodes fonctionnent sur tout é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 l' element (uniquement) dont l'attribut id 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 est invalide et tout peut arriver.

Récupérer par nom de tag

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

elements contiendront une HTMLCollection direct (un objet de type 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 fournit 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 numéro peut changer lorsque le DOM est modifié.

Récupérer par classe

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

elements contiendront une HTMLCollection direct (un objet de type tableau) de tous les éléments dont l'attribut de 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 fournit 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 second 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 contiendront un NodeList direct (un objet de type tableau) de tous les éléments dont l'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 fournit 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 dont l'attribut name est "zipcode". Ce nombre peut changer lorsque le DOM est modifié.

Utilisez innerHTML

HTML

<div id="app"></div>
 

JS

document.getElementById('app').innerHTML = '<p>Some text</p>'
 

et maintenant HTML ressemble à ceci

<div id="app">
    <p>Some text</p>
</div>
 

Attendez que DOM soit chargé

Utilisez DOMContentLoaded lorsque le code <script> interagissant avec DOM est inclus dans la section <head> . S'il n'est pas DOMContentLoaded dans le rappel DOMContentLoaded , le code lancera des erreurs comme

Impossible de lire quelque chose de null

document.addEventListener('DOMContentLoaded', function(event) {
    // Code that interacts with DOM
});
 

https://html.spec.whatwg.org/multipage/syntax.html#the-end

Alternative à DOMContentLoaded

Une alternative (adaptée à IE8 )

// Alternative to DOMContentLoaded
document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // initialize your DOM manipulation code here
    }
}
 

https://developer.mozilla.org/en/docs/Web/API/Document/readyState