Aller au contenu

Tout savoir sur utilisation du document DOM avec JavaScript

Le document DOM est aussi un des piliers de JavaScript à absolument connaître. Vous allez pouvoir modifier des balises html en direct sans recharger la page et bien d’autres choses encore…

Tout est dans le cours vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Tout savoir sur utilisation du document DOM avec JavaScript

Bonjour à tous et bienvenu sur Développement Facile.

Encore un cours consacré au langage de programmation JavaScript, pour vous permettre de progresser en développement JavaScript et de créer des sites interactifs pour vos internautes. Ce cours est dédié aux documents DOM, vous allez l’utiliser, ou vous l’avez déjà utilisé.

Le document DOM

C’est très utilisé notamment lorsqu’on fait des interactions avec Java, Ajax pardon, en Web 2.0 donc DOM ça définit une organisation hiérarchique des éléments dans une page Web entre les formulaires, les div, etc. Et avec le Dom vous pouvez accéder à n’importe quel élément via les méthodes dédiées, il y a les identifiants, le nom, et le DOM ça vous permet de faire de l’ajax, d’effectuer des modifications en direct dans la page web sans avoir besoin de la recharger, très pratique.

Méthodes DOM pour accéder aux éléments

getElementById ça dépend si vous êtes déjà expérimenté en JavaScript vous les avez forcément vus à un moment ou à un autre ces méthodes.
Si vous êtes débutant sachez que c’est la base pour l’ajax, le Web 2.0, modifier les paramètres, le contenu d’une page HTML en direct sans recharger la page.
GetElementById ça permet de récupérer un élément. Qu’est-ce que c’est un élément ? Je vous l’ai précisé rapidement il y a quelques instants, ça peut être un formulaire, un champ de texte, le champ de texte d’un formulaire, un bouton de formulaire, une liste déroulante, un div qui contient du flash par exemple, ou autres, tous les éléments qui ont un nom dans une page web.
getElementById ça c’est déjà un élément par son identifiant.
getElementByName ça sélectionne un élément par son nom, l’attribut name dans sa balise.
getElementByTagName ça sélectionne un ou plusieurs éléments par nom de balise.
innerHTML ça c’est une méthode utilisée, justement, par l’Ajax, ça permet de lire ou d’assigner une valeur à un élément, quand vous faites innerHTML dans une balise div, ça va modifier le contenu de la balise complètement avec ce que vous avez donné, très utile pour insérer du contenu HTML texte dans un élément d’une page Web, comme ça vous pouvez faire modifier une zone div qui contient un formulaire, vous cliquez sur le bouton envoyez, vous mettez un message à la place du formulaire, merci j’ai bien reçu votre message, vous allez recevoir une réponse dans quelques jours, par exemple, innerHTML, très utilisé en Ajax.

Pour modifier le contenu HTML d’une page Web, vous avez un div avec un identifiant id, ça c’est l’élement txt ou il y a écrit : « bonjour dev facile », donc vous avez un JavaScript qui affiche une alerte : « modifiez le contenu texte» dès que l’utilisateur appuie sur OK, ça va appeler la fonction modif html, qui va faire un document, on accède aux DOM, getElementById donc on récupère une div, qui a un id qui s’appelle élément txt, et on fait inner.HTML texte modifié par le DOM, on modifie complètement le contenu du div, il y a un id element txt.
Là vous commencez à entrevoir la puissance de l’Ajax pour modifier en direct n’importe quel élément d’une page web avec le DOM, très pratique.

Alors un autre exemple, ça permet d’afficher le nombre d’éléments d’une page avec leur nom, qu’est-ce que vous faites ? document.all.lenght, pour récupérer le nombre d’éléments qu’il y a dans la page, vous faites ensuite une boucle for, et sNameElement, cette variable, vous faites un += c’est pour assembler à chaque boucle, vous assemblez le résultat donc les chaînes de caractères entres elles, nombre d’éléments document.all[i].tagName, ça récupère le nom de l’élément et ensuite vous affichez le nombre d’éléments de cette page, c’est nombre + sName élément, tous les éléments en même temps.

Votre plan d’actions !

Les méthodes du DOM, c’est vraiment la base pour l’Ajax, l’HTML 5, c’est utilisé tout le temps pour Web 2.0, Ajax, HTML 5, tout ça c’est le même principe de fonctionnement avec le JavaScript, avec le DOM, avec innerHTML, comme d’habitude vous retrouverez un exemple de code source sous cette vidéo, si vous avez des questions, posez-les aussi sous ce cours vidéo, et moi je dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source JavaScript

Voici un exemple d’utilisation du document DOM avec JavaScript.

Téléchargement du code source Exemple JavaScript avec le document DOM

Cliquez ici pour télécharger le code source Exemple JavaScript avec le document DOM

Partagez vos codes JavaScript qui utilisent le Document DOM

Il y a tellement de possibilités avec DOM, que je suis très curieux de voir comment vous l’utilisez. Partagez votre code via la zone commentaires ci-dessous.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>