Aller au contenu

1NSI : Javascript. Le DOM - Document Object Model⚓︎

Le DOM - Document Object Model⚓︎

Le langage Javascript modélise le code HTML d'une page web comme un arbre composé de (briques élémentaires appelées des) Noeuds 🇫🇷 / Nodes 🇬🇧.
Javascript permet la manipulation de cet arbre, grâce une Interface de Programmation qui s'appelle le DOM - Document Object Model. Intuitivement, le DOM peut être vu simplement comme l'arbre modélisant la page web, muni des fonctionnalités du Javascript permettant de le manipuler.

Enfants de noeuds

Chaque noeud peut avoir un ou plusieurs enfants, qui sont eux-mêmes des noeuds.

Le mot-clé document⚓︎

Le mot-clé document

Le mot clé document en javascript fait référence au point d'entrée dans le contenu de la page web, dans le DOM - Document Object Model 🇬🇧.

Différents Types de Noeuds du DOM⚓︎

Les noeuds du DOM peuvent être de plusieurs types. Il en existe une douzaine de types différents, mais seulement quelques uns sont vraiment utiles :

  • Le type Élément HTML 🇫🇷 / HTML Element 🇬🇧 : ce sont les balises HTML (et leurs enfants).
  • Le type Noeud Texte 🇫🇷 / TextNode 🇬🇧 : ce sont les noeuds des textes inclus dans la page web: qu'ils soient inclus dans une balise, ou pas. Au sens du DOM, Les textes sont des contenus distincts des balises.
  • Le type Noeud d'Attribut 🇫🇷 / AttributeNode 🇬🇧 : ce sont les noeuds des attributs des balises de la page web. Les textes sont des contenus distincts des balises.

Interactions avec les Noeuds⚓︎

Javascript doit avant tout récupérer les noeuds, les stocker dans des variables Javascript, pour ensuite pouvoir interagir avec eux via les variables Javascript.
Des exemples d'interactions avec des noeuds sont :

  • La modification du contenu d'un noeud
  • La modificaction du style CSS, depuis le Javascript, qui survient après l'application des règles du/des fichiers CSS (Les règles CSS calculées par le Javascript auront donc le dernier mot).
  • La création et/ou la suppression de noeuds
  • La détection et la gestion des Interactions entre l'utilisateur (Humain) et la Machine (IHM), via les événements 🇫🇷 / events 🇬🇧.

Des exemples d'événements sont :

  • un clic sur un noeud
  • un survol d'un noeud
  • la sortie d'un noeud
  • le focus d'un noeud
  • l'appui (keydown) sur une touche, etc..
  • etc..

Programmation Événementielle

On dit que Javascript est un langage de Programmation Événementielle (qui permet la détection et la gestion d'événements)

Nous allons commencer par apprendre à récupérer des Éléments HTML : des balises et leur contenu donc.