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.