DOM – Apprentissage progressif

Apprendre à manipuler DOM

DOM schèma

Je propose un apprentissage progressif pour comprendre  et manipuler DOM à partir d’un squelette HTML.

Une composition simple pour ne pas noyer l’essentiel

DOM et JavaScript

1 - Se positionner à la racine d’une page HTML.

          Création d’un squelette html

Dom fenetre initialisation

Ecrire le code JavaScript qui permet de référencer le premier nœud du document (HTML)

schema de la page
Ref root page html

typeof : permet de connaître le type de la variable

root.firstChild.nodeName : Teste si l’objet a bien pour nom HTML ,  balise racine du document.

Dans la mesure du possible chaque bloc, de codes,  identifié comme étant réutilisable donnera lieu à une création de fonction.

DOMRoot() : Retourne la référence du premier élément de la fenêtre.

Même résultat avec une autre forme d’écriture :

Fonction domroot

Accès à un élément de ma page 

En JavaScript, le DOM HTML est un ensemble d'objets normalisé par le W3C. Des objets manipulables, avec le langage JavaScript,  qui vont permettre de modifier tout ce qui apparait dans la fenêtre d'un navigateur.

 

L'API définit des méthodes pour accéder aux nœuds DOM, c'est-à-dire aux éléments HTML présents, à l'aide de fonctions de recherche. Leur intérêt est de faciliter la manipulation des nœuds en JavaScript, et d'aller bien au-delà des quelques fonctions qui équipaient les premières versions de l'interface DOM :

 

 

Acces a un élément DOM

Nous allons écrire une fonction qui permet de gérer les différentes méthodes pour accéder à un élément

Fonction générale pour différents types d'accès

Ecrire la fonction

        1 - Déclaration des constantes

Constantes programme dom élément

        2 - Fonction principale

Fonction principale pour accéder aux éléments DOM

          3 - fonction qui permet de traiter les messages

                          Cette fonction est un relai qui permet dissocier le traitement et l'affichage pour assurer une présentation

                          en fonction de la langue

 
Affiche les messages traitement DOM

              4 - Usage & Résultat

Résultat Affichage et  usage

 

 

Merci de partagerShare on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0Email this to someone
Partager sur les réseaux sociaux
 
×
Demande de rappel ?

Ceci est une boutique de démonstration pour test — aucune commande ne sera honorée. Rejeter