Le DOM et son API

Le Document Object Model est la représentation arborescente du contenu du document affiché dans un onglet, avec des noeuds de type Element. Par exemple :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Mon titre</title>
  </head>

  <body>
    <h1>Première partie</h1>

    <p>Paragraphe pour l'exemple</p>
    <br/>
  </body>
</html>

Le DOM associé à ce document HTML est le suivant :

Interface Window

Elle représente la fenêtre associée à un onglet.

  • window.document, ou simplement document, contient le DOM de cet onglet
  • window.innerHeight, window.innerWidth : dimensions de la zone d’affichage
  • window.open([<url>]) : créé un nouvel onglet ; optionnellement y charge <url>

Example :

const newWindow = window.open()

Interface Document

Elle représente le document affiché dans un onglet

Propriétés

  • document.documentElement : élément racine du document
  • document.body : élément <body> du document
  • document.URL : url du document
  • document.cookies : cookies du document
  • document.domain : domain name du document
  • document.lastModified : date de dernière modification du document
  • document.title : titre du document

Example :

const newWindow = window.open()
newWindow.document.title = "Hello"
newWindow.document.documentElement.textContent = "Hello World!"

Remarque : Il est préférable de travailler à partir d’un template minimal, en particulier pour l’accès aux éléments tels que <body>.

Méthodes

  • document.createElement(<tagName>) : Ex: document.createElement("li")
  • document.getElementById(<id>) : renvoie l’élément du document d’identifiant <id>
  • document.querySelector(<sélecteur CSS>) : renvoie le premier élément correspondant au sélecteur
  • document.querySelectorAll(<sélecteur CSS>) : renvoie la liste des éléments correspondants au sélecteur

Interface Element

C’est l’interface de base pour tous les objets d’un document

  • element.textContent : contenu texte de l’élément. Ex: document.body.textContent = "Hello World!"
  • element.innerHTML : sérialization HTML des descendants de element
  • element.tagName : tag de l’élément (ex: h1)
  • element.style : dictionnaire des styles de l’élément. Ex: element.style.color = 'blue'
  • element.appendChild(<element>) : ajoute un élément fils à <element>
  • element.addEventListener(<eventType>, <callbackFunc>) : ajoute à l’élément un écouteur des événements typeEvent ; à chaque occurence d’un événement de ce type, la fonction callbacFunc sera appelée.

Example :

index.html

<!DOCTYPE html>
<html>
   <body>
      <h1 id='btn'>ClickMe</h1>
   </body>
</html>
<script>
const btn = document.getElementById('btn')
btn.addEventListener('click', (event) => {
   console.log('click', event)
})
</script>

Autres APIs du DOM

https://developer.mozilla.org/en-US/docs/Web/API