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) /
.
Javascript permet la manipulation de cet arbre, grâce une Interface de Programmation qui s'appelle le
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 .
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
Nous allons commencer par apprendre à récupérer des Éléments HTML : des balises et leur contenu donc.