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écupé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 correspond à "ma

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

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

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

Pour manipuler les composants 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 en gras l'ensemble des éléments issus de la même classe

var _myclass=document.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.appendChild(_message);
_div.appendChild(_close);
afficher la boîte de dialogue
document.body.appendChild(_div);