Références :

 

Le Document Object Model (DOM) est une interface de programmation pour les documents HTML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.

 

dom js

Il existe de nombreuses méthodes js pour accéder et modifier le DOM.

Accéder à un élément en utilisant son identité

const element = document.getElementById("id-de-l-element-html");

Supprimer un élément du DOM

element.remove();

Créer un élément du DOM (ici une section)

const section = document.createElement("section");

Ajouter un élément à l'arbre du document (DOM), ici le body

window.document.body.appendChild(section);

Ajouter du texte à un élément du dom (section par exemple)

section.textContent = "Texte à ajouter";

Ajouter un attribut (ici l'identité "news à l'élement stocké dans la const section)

section.setAttribute("id","news");

Récupérer la valeur d'un attribut 

section.getAttribute("id");

Sélection avancée des éléments du DOM

document.querySelector(".open-close > h2"); permet de récupérer le premier élément du DOM qui correspond au sélecteur passé en paramètre

document.querySelectorAll(".open-close > h2"); permet de récupérer un tableau d'éléments qui correspondent au sélecteur passé en paramètre

elt.nextElementSibling : permet de récupérer l'élément suivant l'élément elt

Exercice 1 

Créer en js une balise "nav" qui contient 4 boutons avec les textes "Item 1", "Item 2", "Item 3", Item 4". Placez cet élément du dom dans le header.

Faites en sorte que le premier item soit de couleur rouge (utilisez querySelector puis la propriété "style.color".

Utilisez pour cela uniquement du javascript. Ré-utilisez la fonction createMarkup dont voici le code :

/**
   * Crée un élément du dom, lui ajoute du texte, le place comme dernier
   * enfant de parent et ajoute un attribut en utilisant le paramètre attribute
   * @param {String} markup_name 
   * @param {String} text 
   * @param {domElement} parent 
   * @param {Object} attribute  (doit comprendre les propriétés name et value)
   * @returns domElement
   */
  function createMarkup(markup_name, text, parent, attribute) {
    const markup = document.createElement(markup_name);
    markup.textContent = text;
    parent.appendChild(markup);
    if (attribute && attribute.hasOwnProperty("name")) {
      markup.setAttribute(attribute.name, attribute.value);
    }
    return markup;
  }

Exercice 2

Améliorez la fonction createMarkup de façon à ce que l'on puisse ajouter plusieurs attributs. Le paramètre attribute sera remplacé par "attributes" et ne sera plus de type "Objet" mais de type "Array".

Pour finir, faites en sorte que cette fonction n'attende qu'un seul paramètre de type "Object"