DOM Tutoriel
Démarrer avec DOM

Remarques

Versions

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é.

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

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}

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>

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