Maîtrisez Les Bases du DOM avec AJAX

Comme vous le savez surement, le concept AJAX regroupe plusieurs technologies, à savoir le DOM.

Apprenez à accéder aux éléments du DOM, de la page HTML, pour les utiliser via AJAX.

Tout est dans la formation ci-dessous.

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

Maîtrisez Les Bases du DOM avec AJAX

Bonjour à tous et bienvenu sur Développement Facile.

Ensemble on continu à acquérir, petit à petit, au fur et à mesure les bases pour savoir utiliser Ajax dans vos applications web, et ce nouveau cours est consacré au DOM, Document Object Model, c’est la faculté d’accéder à n’importe quel élément de votre page HTML, via JavaScript.

Le DOM

Enfaite, le DOM, c’est un mode standardisé comme je vous l’ai dit, pour accéder et mettre à jour tous les éléments d’un document HTML, Xhtml ou XML.
Avec le DOM, tous les éléments HTML, XML, Xhtml, constituent un nœud, node en anglais. Le document tout entier est traité comme un nœud appelé document node. Chaque balise ou élément est un nœud élément, element node. Ainsi les balises comme p, ul, li sont des nœud élément et vous pouvez y accéder grâce au DOM, le texte contenu entre les balises est un nœud texte, text node, ainsi entre deux balises p vous avez écrit texte du paragraphe, les mots texte du paragraphe constituent un nœud texte. Chaque attribut d’une balise ou élément est un attribut nœud, attribut node, par exemple pour une balise image, href height sont des nœuds attributs, et les commentaires deviennent des nœuds de commentaires, comment node.

Les nœuds, il faut savoir qu’ils ont une relation hiérarchique entre eux, et tous les nœuds créés l’arborescence ou l’arbre du document, sa structure, la structure de votre document HTML, XHTML, ou XML.

Les propriétés de l’objet Node

Vous avez des propriétés sur l’objet node, parentNode ça renvoie le nœud parent d’un nœud,
firstChild c’est le premier enfant d’un nœud,
lastChild ça renvoie le dernier enfant d’un nœud,
childNodes ça va stocker une liste de tous les nœuds enfants disponibles à partir d’un nœud parent,
previousSibling ça renvoie le nœud frère ou sœur précédent d’un nœud,
nextSibling ça renvoie le nœud frères ou sœurs suivant d’un nœud.

Ensuite vous avez les propriétés de l’objet node, node.name c’est le nom du nœud sélectionné donc le nom de la balise toujours retournée en majuscule,
nodeType c’est le type de nœud rencontré, ce type peut prendre plusieurs valeurs.
1 si le nœud est un élément,
2 si la sélection porte sur un attribut,
3 s’il s’agit du nœud de texte,
4 pour un nœud de section CDATA,
5 pour un nœud de référence à une entité,
6 pour un nœud d’entité,
7 pour un nœud d’instruction de traitement,
8 pour un nœud de commentaire,
9 pour un nœud de document,
10 pour un nœud de type document,
11 pour un nœud de fragment de document,
12 pour un nœud de notation.

NodeValue ça permet d’obtenir ou de changer la valeur d’un nœud de type texte, vous allez également l’utiliser très souvent.

Accéder aux noeuds

Pour accéder aux nœuds, vous devez connaitre, getElementById, ça va parcourir le document HTML ou Xhtml à la recherche d’un nœud unique qui a été spécifié par l’attribut id, un identifiant id est unique dans votre page HTML normalement, getElementByName, ça sélectionne les éléments portant un nom donné, spécifié par l’attribut name, il peut y avoir plusieurs éléments qui portent le même nom tous les éléments sont stockés dans une liste de nœuds, dans un tableau un array.

Qu’est-ce que vous avez de getElementByTagName, ça parcourt toujours votre document HTML à la recherche de toutes les balises spécifiques, spécifiées en argument, les balises sont contenues dans une liste ou dans un tableau, et plusieurs éléments peuvent avoir name type dans le document, dans votre page HTML. Vous avez la propriété inner HTML qui est énormément utilisée en Ajax, vous allez, je ne vais pas dire vous allez l’utiliser à chaque fois, mais presque. Inner HTML il faut savoir que ce n’est pas un standard du W3C, mais tellement pratique pour changer rapidement le contenu d’une balise div, page, paragraphe, que les développeurs l’utilise tout ne temps, vous allez également l’utiliser car il est hyper pratique, retenez bien cette propriété inner HTML.

Accéder aux attributs

Les attributs sont des propriétés de l’élément, la propriété attributes elle renvoie une liste des attributs de l’élément spécifié, si vous voulez accéder aux attributs de votre nœud XML, rappelez-vous le cours XML que vous avez vu il y a quelques semaines, vous pouvez récupérer l’attribut, c’était un nœud personne, classe, l’attribut classe, développeurs vous pouvez récupérer cet attribut et sa valeur. Les attributs sont accessibles par leur nom, je vous ai mis un exemple, donc document.getElementByIdTagName, paragraphe.attributes pour récupérer les attributs du paragraphe ou attributs.getNamedItem langue, je vous donne … on va voir ensemble un exemple de code source ce sera beaucoup plus simple.

Exemple d’application

Qu’est-ce que vous avez sur votre page HTML ?
Vous avez un formulaire nom, prénom, une liste déroulante, le nom, on va mettre développement, voilà, le prénom Mathieu, on va sélectionner CSS3, et vous avez trois boutons. Qu’est-ce que font ces trois boutons ?
Il suffit de regarder ici, alors on fait un callGetElement by Id quand on appuie sur le bouton valider by Id, qu’est-ce que ça fait ?
On fait un document.getElementById, donc document.getElementById title, .nodeName.
On va sur Id qui est là, et le nom du nœud, on va récupérer tout simplement.
Valider by name, getElementByName, qu’est-ce qu’on fait ?
getElementByName, on récupère le nom formget, ici, il y a en deux, formget, et on va afficher la valeur, dans la console.

Je rajoute la console, juste ici, ça va vous servir, et dans le troisième bouton, pour trouver la langue, qu’est-ce qu’on fait ?
GetAttributes, qu’est-ce qu’on fait ?
getElementById, Id liste elle est là la liste, et vous avez un langage PHP associé à la langue EN, HTML 5 FR, JavaScript DE, CSS 3 IT italien, donc moi ce sera Italien qui va s’afficher. On récupére la valeur l’option sélectionnée avec getElementByTagName option, option tout simplement, select liste option choose Attribute, on récupère tous les attributs, il n’y en a qu’un donc là c’est facile, la langue, et sa valeur, la valeur de l’attribut langue donc la valeur, regardez ça ressemble à du XML, magique, on affiche la langue associée, pour ById c’est très simple, c’est ce que je vous ai dit, byName, Mathieu, tout simplement, et trouver la langue, italien, voilà un peu comment ça se passe pour utiliser le DOM, pour accéder à des éléments. Là on récupère juste la valeur 1, si je change je mets 0 ici, je recharge la page, je vais mettre dev mat by name, ça affiche dev, j’aurais dû mettre le nom mais vu qu’on récupère un tableau ici comme je vous l’ai dit, je vais remettre 1. Voilà.

Votre plan d’actions !

Au moins le document DOM vous saurez ce que c’est, vous l’avez déjà vu dans les cours JavaScript mais si vous n’avez pas vu les cours JavaScript, ça vous fait un très bon rappel pour utiliser les bases des documents DOM, très facile surtout avec Ajax.
Si vous avez des questions, comme d’habitude, posez-les sous ce cours vidéo moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple du DOM

Et voici le code source commenté avec l’utilisation du DOM.

Comment utilisez-vous le DOM ?

Dans vos applications, comment manipulez-vous le DOM, partagez vos exemples de code dans les commentaires ci-dessous.