Le JavaScript et le DOM

JavaScript et le D.O.M

Définition

Le DOM signifie Document Object Model. Il s'agit d'une cartographie de la page HTML (I.E l'ensemble des balises, leur propriétés leur contenu)

Ce qui signifie que si je créé une liste <ul> le DOM me donnera accès à un objet ul pour le manipuler

Si j'ajoute un list item à cette liste j'aurais ce model

ul
- li

Si j'ajoute un lien à ce list item j'aurais ce model

ul
- li
  - a

Pour être plus précis ce sera ce model

document
- body
  - ul
    - li

Réupérer les éléments du D.O.M

Pour récupérer un composant de votre page, il faut utiliser la classe document. Il s'agit de l'interface qui represente la page web une fois chargée sur la navigateur et sert de point d'accès pour tout les composants de la page.

var madiv=document.getElementById("madiv");

Dans cet exemple nous avons récupérer un élément dont l'attribut ID corespond à "ma

il existe un certain nombre de méthodes permetant de récupérer les composants de différentes manières

méthode	défintion
getElementById	récupére un élément via son ID <div ID="madiv">
getElementsByTagName	récupére les éléments via le nom de leur balise document.getElementByTagName("a"); // récupère toutes les balises </a>
getElementsByclassName	récupére les éléments appartenant à la même classe document.getElementByClassName("menu"); // récupére les élément ayant une classe ".menu"
getElementsName	récupére les éléments ayant le même attribut name document.getElementsName("test");
querySelector	récupére un élément gràce à son selecteur CSS document.querySelector("#madiv"); // equivaut à document.getElementById("madiv");
querySelectorAll	récupére l'ensemeble élément gràce à au selecteur CSS document.querySelectorAll(".menu"); // equivaut à document.getElementByClassName("menu");

Manipuler les éléments du D.O.M

Pour manipuler les composant du D.O.M, il suffit de modifier certaine de leur propriété

Par exemple afficher le nom saisi dans une balise <div/>

var _nom=prompt("quel est votre nom");
document.querySelector("#madiv").innerHTML="Bienvenue "+_nom;

Par exemple afficher l'ensemble des éléments issus de la même classe en gras

var _myclass=ocument.querySelectorAll(".maClasse");
for(var i = 0; i < _myclass.length; i++){
- _myclass[i].style.fontWieght="bold";
}

créer un élément via D.O.M

Il est possible de créer des composant dynamiquement sur la page. Pour ce faire, on utilise la méthode createElement appendChild pour les associer les uns aux autres

Par exemple créer une boîte de dialogue

//créer les éléments nécessaires
var _div=document.createElement("div");//contient la boîte de dialogue
var _close=document.createElement("button");//bouton qui fermera la boîte de dialogue
var _message=document.createElement("p");//message de la boîte de dialogue
//paramétrer les éléments de texte
_message.innerHTML="Bienvenue";
_close.innerHTML="OK";
//gérer l'événement
_close.onclick=function() {
- document.removeChild(_div); //retire la div dès que l'utilisateur clique sur "OK"
}
//Le style du bloc
_div.style["position"]="absolute";
_div.style["padding"]="12px";
_div.style["background"]="#FAE7B0";
//associer les éléments entre eux
_div.appendChil(_message);
_div.appendChild(_close);
afficher la boîte de dialogue
document.body.appendChild(_div);