CodeS-SourceS
Rechercher un code, un tuto, une réponse

manipuler le Document objet model (DOM)

Avril 2017


le Document objet model (DOM)

le Document objet model plus généralement appelé dom permet d'avoir accès dynamiquement a la page. Grâce a lui on peut créer modifier et supprimer les élément d'une page, il fournis aussi plusieurs méthodes afin de se positionner dans une page grâce a la représentation de la page similaire a un arbre généalogique, il permet aussi d'obtenir des information sur un élément comme sa position sa taille ses attributs ...etc

creation d'elements

une balise en html

une balise a une utilité particulière la balise a sert a crée des liens la balise img a afficher une image la balise div sert de conteneur la balise video permet d'afficher une video ...etc et a l'intérieure de chaque balise on retrouve les attributs certains de ces attributs peuvent se retrouvé dans toutes les balises c'est le cas pour id ou pour style et d'autres attributs son spécifique a une balise prenons comme exemple la balise <a> et l'attribut href que l'on retrouve uniquement dans cette balise.

quelques exemples d'attributs

attributs
id name class style evenementstoutes_balises
typeinput
src img, audio, video
hrefa
height width img,canvas, audio, video
controls preload autoplay poster loop bufferedaudio et video
readonly input textarea select


la création d'éléments consiste donc a crée une balise et a lui adjoindre des attributs.

créer une balise

createElement

on crée une balise grâce a la méthode createElement qui appartient a l'objet document elle sera donc toujours précédé de document et on vas stocké cette balise dans une variable temporaire afin de lui adjoindre ces attributs avant insertion dans le document

var elem=document.createElement('input');


pour insérer l'élément on utilise les méthode que propose le dom elles seront vue plus bas mais pour l'exemple on utilisera appendChildqui insère un élément dans un autre.

var elem=document.createElement('input');
document.body.appendChild(elem);



on peut aussi insérer un élément crée dans un autre élément crée

var elem=document.createElement('div');

var elem2=document.createElement('input');

elem.appendChild(elem2);

document.body.appendChild(elem);



createElementNS

createElementNS est utiliser pour les elements ayant un espace de nom particulier c'est le cas pour les elements SVG, Avant de preciser le nom de la balise on precisera en premier l'URI de l'espace de nom. Il est imperatif d'utiliser cette méthode afin d'interpreter du SVG.


var svgNS = "http://www.w3.org/2000/svg";

var gvs = document.createElementNS(svgNS,"svg");

var cercle=document.createElementNS(svgNS,"circle");

gvs.appendChild(cercle);

document.body.appendChild(gvs);

définir les attributs

afin de définir les attributs il existe deux façons de faire


nom de l'attribut

la première consiste a donner le nom de l'attribut puis a le définir seul l'attribut style est géré de manière différente il sera vu plus bas.


var elem=document.createElement('input');

elem.id='un_id';

elem.type='password';

elem.onmouseout=une_fonction


setAttribute

la seconde facon utilise setAttribute et prend comme paramètre le nom de l'attribut et sa definition.

var elem=document.createElement('input');

elem.setAttribute('id','un_id');

elem.setAttribute('type','password');

elem.setAttribute('onmouseout','une_fonction()');


pour le svg seule cette méthode fonctionne.

définir le style

il y a plusieurs façons de définir le style d'un élément


la methode style

la méthode style ne definit pas un style globale mais defini un attribut de style a la fois. Quand un attribut comporte deux mots séparé par un tiret on ne met pas de tiret et le deuxieme mot commence par une majuscule.

background-color devient backgroundColor

margin-left devient marginLeft

pour les attributs css ayant un nom reservé par javascript c'est le cas pour float on rajoute css au début de l'attribut et l'attribut commencera par une majuscule

float devient cssFloat


mon_element.style.height='50px'
mon_element.style.height='50px'
mon_element.style.backgroundColor='blue'
mon_element.style.marginLeft='20px'
mon_element.style.cssFloat='right'



attribuer une class

l'assignation de class se réfère a une feuille de style ou une déclaration de style dans l'entête du document.

className

on spécifie le nom de la ou des class.

mon_element.className='style_a style_b';



setAttrubute

tout comme className il suffit de spécifié le nom de la ou des class.

mon_element.setAttrubute('class','style_a style_b');



classList

avec classList on vas pouvoir assigné une ou plusieurs class a la fois a l'element.

mon_element.classList.add('style_a');
mon_element.classList.add('style_b');



Autres méthodes

setAttribut

on utilise l'attribut style afin de definir le style

elem.setAttribute('style','background-color:blue;font-size:25px;margin:auto;border:2px dashed green;color:white;')
;


cssText

la méthode cssText consiste a placer le style css de la meme facon qu'une feuille de style sur une ligne.

mon_element.style.cssTexte="background-color:blue;font-size:25px;margin:auto;border:2px dashed green;color:white;"

ajouter du texte

creatTextNode

creatTextNode tout comme createElement est une méthode de l'objet document il est donc toujours précédé de celui ci et pour l'insérer dans un élément en cour de création on utilise appendChild et si il s'agit d'une insertion dans le document on utilisera les méthode d'insertion du dom qui seront vu au prochain chapitre.

var elem=document.createElement('span');

var txt=document.creatTextNode('du texte.')

elem.appendChild(txt);

textContent

textContent permet d'inserer du texte sans avoir a creer un node texte sa syntaxe est plus simple.

var elem=document.createElement('span');

elem.textContent='du texte.';

innerHTML

il est aussi possible d'inserer du texte avec innerHTML

var elem=document.createElement('span');

elem.innerHTML="du texte.";


attention tout de meme avec cette méthode qui remplacera tous les élément contenu dans l'élément référent par le texte

selectionner des elements

plusieur méthodes son utilisé

getElementById

appele l'element par son id avec cette methode la balise doit avoir un id

document.getElementById("id_element);

querySelector

Appeler le premier element trouvé correspondant au selecteur css mis en parametre. Cette méthode impose de connaitre les selecteurs css qui donne un tres tres large panel de possibilité dans la selection d'element.

document.querySelector('#element span')



a noter que

document.querySelector('#element')


est équivalent a

document.getElementById("element")


ou bien encore

document.querySelector('.element')


qui est équivalent a

document.getElementsByClassName("element")[0]

récupérer une nodeliste

une nodeliste est un peut comme un tableau javascript dans lequel chaques index possede un lien vers les elements correspondant a la recherche il possede l'attribut length et on utilise une boucle pour le parcourir. Il existe quatre methode.

getElementsByTagName

nodeliste d'éléments correspont a la balise donné en paramètre.

var all_elem=element_referent.getElementsByTagName('div');


on peut aussi selectionner toutes les balise en utilisant l'asterix

var all_elem=element_referent.getElementsByTagName('*');



getElementsByclassName

nodeliste d'éléments ayant en commun la meme class.

var all_elem=element_referent.getElementsByclassName('une_class');



getElementsByName

nodeliste d'éléments ayant en commun le meme nom.

var all_elem=element_referent.getElementsByName('nom_element');



querySelectorAll

nodeliste d'éléments ayant en commun le meme selecteur css.

var all_elem=element_referent.querySelectorAll('#element span');



childNodes

nodeliste de tous les éléments enfant contenu dans l'élément référent. Les enfants des enfants ne sont pas pris en compte

var all_elem=element_referent.childNodes;




pour les exemples qui suivent on utilisera la méthode getElementsByTagName mais c'est le meme principe pour les autres méthodes


si on desire recupere toutes les balise h1 d'une page afin de modifier la couleur de texte on utilisera document associé a getElementsByTagName pour recuperer la nodelist puis pour modifier la couleur on parcourera la liste

var all_elems = document.getElementsByTagName("h1");

for(var i=0; i < all_elems.length; i++){
 
 all_elems[i].style.color=red;

}



si par contre on désire selectionner uniquement les balise input d'un formulaire de type text ayant comme id 'id_du_formulaire' afin par exemple de tester si il on ete remplis on se place dabord dans le formulaire en utilisant pour l'exemple getElementById puis on cree la nodelist avec getElementsByTagName.

var all_elements=document.getElementById('id_du_formulaire').getElementsByTagName("input);


voici un exemple complet pour lequel on recherche dans un formulaire si un input est vide et si on en trouve un on affiche une alerte avertissant que le chanp est vide puis on position le curseur de la souris dans le input vide et enfin on stop la boucle.

var all_elems=document.getElementById('id_formulaire').getElementsByTagName("input");

for(var i=0; i < all_elems.length; i++){

 if(all_elems[i].value==''){
 alert('tous les champs ne sont pas rempli');
 all_elems[i].focus();
 break;
 }
}

sélectionner les éléments enfant

firstChild

selectionne le premier élément enfant du parent

lastChild

selectionne le dernier élément enfant du parent

childNodes(x)

sélectionne l' élément enfant du parent se trouvant a la position mis en paramètre

sélectionner les éléments voisin

previousSibling

selectionne l'element precedent.

nextSibling

selectionne l'element suivant.

inserer supprimer copier des elements

appendChild

permet de placer un élément nouvellement créé dans l'élément cible ou de déplacer un élément dans l'élément cible, si l'élément comporte en son sein plusieurs elementsil sera placé a la fin.

parent.appendChild(enf)

avant

<body>
<div id='leconteneur'>
<img src='une_image.jpg'>
</div>
</body>


code
var contenu=document.createElement('div');

contenu.setAttribute('id','le_contenu');

document.getElementById("leconteneur").appendChild(contenu);


apres

<body>
<div id='leconteneur'>

<img src='une_image.jpg'>

<div id='lecontenu'></div>

</div>
</body>



avant
<body>

<div id='element_a_deplacer'>
</div>

<div id='element_receveur'>

<img src='une_image.jpg'>

</div>

</body>


code
var elem = document.getElementById("element_a_deplacer");

document.getElementById("element_receveur").appendChild(elem);


après

<body>

<div id='element_receveur'>

<img src='une_image.jpg'>

 <div id='element_a_deplacer'>
 </div>

</div>

</body>

insertBefore

permet de placer un élément nouvellement créé avant l'élément spécifié ou de déplacer un élément avant l'élément spécifié.

parent.insertBefore(nouveau, referent)


avant

<body>

<div id='prt'>

<div id='div_1'></div>
<div id='div_2'></div>
<div id='div_3'></div>

</div>
</body>


code

var new_element=document.createElement('div');

new_element.setAttribute('id','le_nouveau_div');

var div_ref=document.getElementById("div_2");

document.getElementById("prt").insertBefore(new_element, div_ref);


après

<body>

<div id='prt'>

<div id='div_1'></div>
<div id='le_nouveau_div'></div>
<div id='div_2'></div>
<div id='div_3'></div>

</div>
</body>

replaceChild

remplace un element par un autre

parent.replaceChild(nvEnf, enf)


avant

<body>

<div id='div_a_remplacer'></div>

</body>




var new_element=document.createElement('div');

new_element.setAttribute('id','le_nouveau_div');

var a_remplacer=document.getElementById("div_a_remplacer")

document.body.replaceChild(new_element, a_remplacer)


apres

<body>

<div id='le_nouveau_div'>

</div>
</body>

removeChild

supprime un element de la page pour supprimer l'element il faut se positionner dans le parent. La syntaxe frequement utilisé se referre a l'element puis on appel son parent (elem.parentNode)et enfin on suprime ce meme element.

parent.removeChild(enf)

avant

<body>

<div id='element_a_supprimer'></div>

</body>


code
var elem = document.getElementById("element_a_supprimer"); 
elem.parentNode.removeChild(elem)


apres

<body>

</body>

cloneNode

stock dans une variable la copie d'un element la copie peut ensuite etre modifié et replacé dans le document.

si l'element cloné contient un id on prendra soins de modifier l'id du clone afin de ne pas avoir deux fois le meme id dans la page.

element.cloneNode

avant

<body>

<div id='element_a_cloner' class='cl1'></div>

</body>


var elem = document.getElementById("element_a_cloner"); 
var le_clone = elem.cloneNode(true);
le_clone.setAttribute('id','nouvelle_id');

document.body.appendChild(le_clone);


apres

<body>

<div id='element_a_cloner' class='cl1'></div>

<div id='nouvelle_id'class='cl1' ></div>

</body>

modifier les elements

modifier un attribut

la modification d'un elements se fait en le redefinissant la méthode est la meme que pour la creation si par exemple j'ai un element qui a un certain id pour le modifier je fait.


var mon_element=document.getElementById("un_element");
mon_element.id='nouvelle_id'


ou

var mon_element=document.getElementById("un_element");
mon_element.setAttribute('id','nouvelle_id')

modifier un attribut de style

pour modifier un attribut de style a la fois tout comme l'attribution on utilise la méthode style

pour déplacer un div en horizontal on pourrait modifie sa position css left.

var mon_element=document.getElementById("un_element");
mon_element.style.left='100px'


dans l'exemple suivant on cree une animation de déplacement en utilisant les marges

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">

var position=0;

function deplacement(){

 position=position+20;
 var mon_element=document.getElementById("element_a_deplacer");

 mon_element.style.marginLeft=position+'px';

 if(position<=300){
  setTimeout(deplacement,50);
 }
}
</script>
</head>
<body>

<div id="element_a_deplacer" style='margin-left:0px;height:30px;width:30px;background:red;'></div>
<br>
<button onclick='deplacement()'>teste</button>
</body>
</html>

supprimer un attribut

removeAttribute

pour supprimer un attribut on utilise removeAttribute en specifiant le nom de l'attribut.

var mon_element=document.getElementById("un_element");
mon_element.removeAttribute('id')

supprimer une class

classList

pour supprimer une class on le fait avec la methode remove de classList.


document.getElementById('un_element').classList.remove('nom_de_la_classe')


une deuxieme methode nomé toggle permet de supprimer une classe si celle ci est attribué a l'element dans le cas contraire elle ajoute cette class

document.getElementById('un_element').classList.toggle("nom_de_la_classe");

information sur les elements

les attributs

il y a deux facon de faire soit comme pour leurs atribution


alert(elem.id)


ou en utilisant getAttribute.


alert(elem.getAttribute(id));


si on ne sait pas si l'element a cette attribut on utilise hasAttribut qui retourne true ou false.

if(elem.hasAttribute("id")){

alert(elem.getAttribute(id))

}

les styles

pour un atrribut de style d'un element il existe deux méthodes.


methode style

style ne fonctionnera que pour les element declaré en tant qu'attribut de balise avec style ou ayant été modifié dynamiquement sans passer par une classe pour simplifier elle ne peut pas avoir acces aux attributs de style provenant d'une feuille de style css.

hormi l'atribution d'un attribut de style la méthode style donne aussi des information sur les des elements.


var stl=document.getElementById("id_element).style.marginLeft
alert(stl)


malheureusement style ne permet pas de connaitre le style definit dans une feuille de style. Pour exemple prenons un div qui au chargement de la page est defini dans la feuille de style comme non affiché (display:none). et un bouton qui au clic renvoi a une fonction qui se charge d'affiché ou de caché le div on ferait comme ceci.



function afficher_cacher(){

var elem=document.getElementById("id_element);

  if (elem.style.display=='none'){
  
    elem.style.display='block';
  }
  
  else
   elem.style.display='none';
 }
}


on se rend compte que sa ne fonctionne pas le style etant defini dans une feuille de style si on met une alert on obtient une chaine vide. pour contourner ce probleme on ajoute un ou logique dans la condition qui teste si la chaine est vide.

function afficher_cacher(){

var elem=document.getElementById("id_element);

  if (elem.style.display=='none' || elem.style.display==''){
  
    elem.style.display='block';
  }
  
  else
   elem.style.display='none';
 }
}



méthode getComputedStyle

la deuxieme methode que le css soit declaré dand le corp de la page, dans l'entete du document ou dans une feuills de style elle fonctionnera systematiquement mais sa syntaxe est lourde.

cette méthode permet de connaitre le style definit dans l'attribut de balise style ou defint dans une feuille de style.

il existe deux variantes soit on utilise la meme syntaxe qu'avec la méthode style.

var elem=document.getElementById("id_element);

function info_style()
{
    var stl=window.getComputedStyle(elem, null).marginLeft;
 }
 
alert(stl)


soit on utilise getPropertyValue et la on se retrouve avec la syntaxe css

var elem=document.getElementById("id_element);

function info_style()
{
    var stl=window.getComputedStyle(elem, null).getPropertyValue(margin-left);
 }
 
alert(stl)

les class

attributs

les class etant des attributs on poura utiliser la meme technique precedement vue sur les attributs en utilisant soit className soit getAttribut.


classList

classList vas un peut plus loin en proposant une liste des class de l'element selectionné que l'on vas pouvoir parcourir comme on le fait pour un array en utilisant une boucle, classList posède l'attribut length qui permet de connaitre le nombre de class que comporte l'element.

<!DOCTYPE html>
<html lang="fr">
<head>

<script>

function liste_class(){

var liste=document.querySelector('p').classList
  
 alert(liste.length)
  
  for(var i=0; i < liste.length; i++){
 
 alert(liste[i]);

}
}
</script>
</head>
<body>
<p class='class1 class2 class3 class4'>Bonjour</p>

<button onclick='liste_class()'>teste</button>
</body>
</html>


classList permet aussi de savoir si une element posede une class en utilisant la methode contains() qui renvoi true ou false

document.getElementById('un_element').classList.contains("nom_de_la_classe");


et enfin la methode toString()retourne la chaîne de texte complète contenu dans la balise de la meme manière que le fait className et getAttribute

document.getElementById('un_element').classList.toString("nom_de_la_classe");

dimension et positionnement

dimension

offsetHeight offsetWidth

afin de connaitre les dimensions reel d'un element on peut utiliser style mais si l'element a des bordures on devra aussi recuperer la valeur des bordure et les additions a la taille de l'element? de plus on devra convertir les valeur en chiffre car style recupere la valeur de css déclaré qui est une chaine de carractere qui contient l'unité de mesure(px,em,%...etc).

pour connaitre les hauteurs et largeurs reels nous allons plutot utilisé offsetHeight et offsetWidth qui prennent en compte la tailles des bordures et fournisses une valeur numérique.

dans l' exemple qui suit on récuper les dimensions d'un carré de 100px ayant une bordure de 10px

<!DOCTYPE html>
<html><head>
<script>

function ces(el){

var elem = document.getElementById(el);

alert('offsetHeight : '+elem.offsetHeight)

alert('offsetWidth : '+elem.offsetWidth)

}
</script>
</head><body>

<button onclick='ces("d1")'>teste</button>

<div id='d1' style='background:red;left:50px;margin:auto;height:100px;width:100px;border-style:solid;border-width:10px'></div>

</body></html>

positionnement

offsetLeft offsetTop offsetParent

Ces propriétés donnes les coordonnées d'un element relatives au parent référent (offsetParent).

pour bien comprendre on prend comme exemple un div avec une marge de 50 pixel que l'on appelera div_1 et a l'interieur de ce div se trouve un autre div qui se nome div_2 avec une marge de 20 pixel. la position css de ces deux div est la position par défault (statique) et si je fait.

alert(document.getElementById(div_2).offsetLeft)


j'obtient 70 (50+20) qui et la position de div_2 par rapport au corp de la page (body) qui est le referent et que l'on appel offsetParent.

maintenant si je met div_1 en position relative et que je refait.

alert(document.getElementById(div_2).offsetLeft)


j'obtient 20 car comme div_1 est en position relative, tous les element se trouvant a l'interieur prennent comme referent div_1.

l'element referent (offsetParent) dans ce cas c'est le div_1

et dans ce cas la pour connaitre la position exact d'un element dans la page on va utiliser une boucle qui controlera si l'element a un offset parent et on additionnera les offset de chaque element ayant un offset parent.

function position_page(el){

var elem = document.getElementById(el);

var coords_left=0
var coords_top=0

while (elem){

 coords_left+= elem.offsetLeft;
 coords_top+= elem.offsetTop;
   
 elem = elem.offsetParent;
}

alert(coords_left)
 
 
}

dimension et positionnement

getBoundingClientRect

Cette méthode permet de connaitre la position ainsi que la taille reel d'un élément dans la page de façon globale elle possede les attributs left top height width.

les information height et width sont similaires a offsetHeight et offsetWidth quand a left et right dans tous les cas de figure l'information se basent par rapport a la fenêtre du navigateur et pas a l'offset parent l'utilisation de cette méthode est plus lente que les méthodes précédentes.


var elem = document.getElementById("un_element");

var posi_taille = elem.getBoundingClientRect()

alert(posi_taille.height)
alert(posi_taille.width)
alert(posi_taille.left)
alert(posi_taille.right)

les tableaux

pour ajouter des lignes ou colonnes dans un tableau on peut soit utiliser la méthode createElement ou utiliser la methode décrite ci dessous qui a l'avantage de créer des ligne ou colonne et de se positionner dans un tableau avec une syntaxe plus simple et plus courte.

se positionner dans un tableau

pour se positionner enttre deux lignes on utilise rows[index] et cols[index] pour les colones de la meme ligne en precisant l'index qui commence a zero.

si je veut me positionner sur la troisieme ligne dans la quatrieme colonne.

var table=document.getElementById("id_table")
table.rows[2].cels[3]

conaitre le nombre de ligne ou cellules d'un tableau

pour ce faire on utilise lenght

pour le nombre de lignes du tableau on fait

var table=document.getElementById("id_table)
alert(table.rows.length);


pour le nombre de cellules d'une ligne on fait

var table=document.getElementById("id_table)
alert(table.rows[2].cells.length);


pour le nombre de cellules du tableau en entié

var table=document.getElementById("id_table")
alert(table.cells.length);

inserer une ligne

pour inserer une ligne on utilise insertRow() en precisant l'endroit (index) du tableau ou doit etre placé la colonne.

placer une ligne en début de tableau index 0

var table=document.getElementById("id_table)
table.insertRow(0);


placer une ligne apres la 3 eme ligne du tableau index 2

var table=document.getElementById("id_table)
table.insertRow(2);


placer une ligne en fin de tableau index -1 ou pas d'index

var table=document.getElementById("id_table)
table.insertRow(-1);

supprimer une ligne.

pour supprimer une ligne on utilise deleteRow(), le principe est le meme que pour inserer une ligne

supprimer la premiere ligne du tableau index 0

var table=document.getElementById("id_table)
table.deleteRow(0);


supprimer la 3 eme la ligne du tableau index 2

var table=document.getElementById("id_table)
table.deleteRow(3);


supprimer la derniere ligne du tableau index -1

var table=document.getElementById("id_table)
table.deleteRow(-1);

inserer une cellule

c'est le meme principe que pour les lignes mais avec insertCell() et au lieux de designer le tableau on designe la ligne.

placer une cellule sur la ligne 3 a la fin, pas d'index ou index -1

var table=document.getElementById("id_table)
table.rows[2].insertCell();


placer une cellule sur la ligne 3 en debut index 0

var table=document.getElementById("id_table)
table.rows[2].insertCell(0);



</body>
</html>

A voir également

Publié par @karamel.
Ce document intitulé «  manipuler le Document objet model (DOM)  » issu de CodeS-SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Ajouter un commentaire

Commentaires

Donnez votre avis
Architecture d'une page html
l'api audio video