manipuler le Document object model (DOM)

Dernière mise à jour le par @karamel .

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

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 evenements toutes_balises
type input
src img, audio, video
href a
height width img,canvas, audio, video
controls preload autoplay poster loop buffered audio et video
readonly input textarea select

créer une balise

la création consiste a crée une balise et a lui adjoindre des attributs.

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);

les attributs méthode 1

la gestion des attributs se fait de deux facons.

nom de l'attribut

la première consiste a donner le nom de l'attribut.

a la creation

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

elem.id='un_id';

elem.type='password';

elem.onmouseout=une_fonction

de la meme facon on peut modifier ou ajouter l'attribut d'un element existant

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

elem.id='un_id';

elem.type='password';

elem.onmouseout=une_fonction

et enfin cette méthode permet de connaitre la valeur d'un attribut.

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

alert(elem.id) //renvoie "un_element"

pour la creation ou la modification d'element svg cette méthode ne fonctionne pas.

les attributs méthode 2

setAttribute

setAttribute creer un attribut 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()');

ou si l'element existe

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

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

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

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

si l'element possede déja un des attributs il sera remplacé

pour la creation ou la modification d'element svg seule cette méthode fonctionne.

hasAttribute

hasAttribute sans S a la fin permet de savoir si un element pocede l'attribut donné en parametre retourne true ou false.

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

alert("l'element a un id")

}

hasAttributes

hasAttributes avec un S a la fin indique si l'element courant a au moins un attribut. retourne true ou false.

if(elem.hasAttributes()){

alert("l'element a au moins un attribut")

}

attributes

attributes retoune une nodeliste de l'element spécifié contenant tous les attribut de l'element. On parcoure cette liste grace a une boucle qui retourne le nom de chaques attributs ainsi que la valeur grace a name et value.

Comme une nodeliste possede l'attribut length on s'en servira pour connaitre le nombre d'attributs que possede l'element sélectionné.

function liste_class(){

 var liste=document.getElementById("un_element").attributes
 alert(liste.length)

 for(var i=0; i < liste.length; i++){
 
  alert(liste[i].name + "=" + liste[i].value); 

 }
}

getAttribute

getAttribute sert a connaitre la valeur d'un attribut.

var elem=document.getElementById("un_element");
alert(elem.getAttribute(id));  //renvoie "un_element"

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')

dataset

dataset permet d'acceder et de modifier les attribut préfixé avec "data-"

<div id="le_div" data-un_nom="le_nom">
du contenu.....
</div>

pour acceder a la valeur d'un data-attribut on spécifie l' élément, puis le dataset concerné.

pour modifier la valeur d'un data-attribut on spécifie l' élément puis le dataset concerné et on ajoute la nouvelle valeur.

var element = document.getElementById('le_div');
 
var valeur_du_data_attribut=element.dataset.un_nom;   // le_nom

element.dataset.un_nom="nouvelle_valeur";

le style d'un element

pour définir le style d'un élement il y a plusieurs façons de proceder.

methode style

la méthode style ne definit pas un style globale mais defini un attribut de style a la fois.cette méthode permet d'ajouter de modifier et de connaitre un attribut de style avec une syntaxe unique.

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'
alert(mon_element.style.height) //retourne 50px
mon_element.style.height='70px'
alert(mon_element.style.height) //retourne 70px
mon_element.style.backgroundColor='blue'
mon_element.style.marginLeft='20px'
mon_element.style.cssFloat='right'

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>

style ne permet pas de connaître le style définit dans une feuille de style. Pour exemple prenons un div qui au chargement de la page est défini 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 étant défini dans une feuille de style si on met une alert on obtient une chaîne vide. pour contourner ce problème on ajoute un ou logique dans la condition qui teste si la chaîne 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

getComputedStyle est utilisable uniquement en lecture elle est similaire a style avec une différence. Que le css soit déclaré dans le corps de la page, dans l’entête du document ou dans une feuille de style permet de connaître le style d'un élément.

il existe deux variantes soit on utilise la même 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)

la class definition

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 définissant le style de l'ensemble des élément d'une page afin de séparer les élément de la page de la définition de leurs rendu pour une meilleur lisibilité et maintenance.

la class d'un élément méthode 1

className

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

mon_element.className='style_a style_b';

la méthode remplace la les class précédente

la class d'un element méthode 2

setAttrubute

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

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

la méthode remplace la les class de l'element.

la class d'un element méthode 3

classList

avec classList on vas pouvoir assigné ou supprimer une class a la fois.

utilisé seul classList fournit une nodeliste qui permet de connaître le nombre de class d'un élément avec la propriété length length ainsi que le nom de chaque class du même élément en fournissant un tableau que l'on parcoure avec une boucle.

<!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>

méthodes de classList

ajouter une class add().

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

supprimer une class remove().

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

remplacer une class par une autre replace().

document.getElementById('un_element').classList.replace("nom_ancienne_class", "nom_nouvelle_class")

connaitre l'existance d'une class contains()

permet de savoir si une class est presente sur un element en renvoyant true ou false

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

connaitre l'ensemble des class d'un element <bold>toString()<bold>

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");

interchanger une class 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");

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 modifier supprimer 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);

s'agissant de la creation d'un noeux de texte si l'element possede déja du texte creatTextNode ajoute du texte a la suite du texte.

textContent

textContent permet d'inserer un texte si il n'y en a pas ou de remplacer un texte si l'element comporte du texte.

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

elem.textContent='du texte.';

on peut aussi recupere le texte de l'element

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

alert(elem.textContent)

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

on peut aussi recupere le texte et le html de l'element.

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

alert(elem.innerHTML);

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 les nodes de texte sont compris.

firstElementChild

selectionne le premier élément enfant du parent contrairement a firstChild les nodes de texte ne sont pas compris.

lastChild

selectionne le dernier élément enfant du parent les nodes de texte sont compris.

lastElementChild

selectionne le dernier élément enfant du parent contrairement a lastChild les nodes de texte ne sont pas compris.

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 voisin precedent de l'element referent.

previousElementSibling

selectionne l'element voisin precedent de l'element referent contrairement a previousSibling les nodes de texte ne sont pas compris.

nextSibling

selectionne l'element voisin suivant de l'element referent.

nextElementSibling

selectionne l'element voisin suivant de l'element referent contrairement a nextSibling les nodes de texte ne sont pas compris.

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>

remove

supprime un element de la page en precisant l'element a supprimer cette méthode simplifie la suppression d'un élémant comparé a removeChild la méthode étant recente attention a la compatibilité avec de plus ou moins vieux navigateurs.

avant

<body>

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

</body>

code

var elem = document.getElementById("element_a_supprimer"); 
elem.remove()

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>

dimension et positionnement

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>

clientHeight clientWidth

donne la hauteur intérieure d'un élément. comprenant les marges intérieures (padding),contrairement a offsetHeight et offsetWidth les bordure ne sont pas pris en compte.

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

function ces(el){

var elem = document.getElementById(el);

alert('clientHeight : '+elem.clientHeight)

alert('clientWidth : '+elem.clientWidth)

}
</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>

offsetLeft offsetTop offsetParent

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

l'offsetParent est representé par l'element referent le parent pour le calcule de la position des elements (les enfants) se trouvant a l'interieur du parent.

Dans un page l'offset parent est pour tous les element par defaut le bord haut gauche de la fenetre, pour definir un element en tant qu'offsetParent il suffit de mettre l'element en position relative grace a l'attribut css position (position:relative;) qui aurra pour consequence que tous les elements enfant auront leur position de depart nom plus en haut a gauche de la fenetre mais en haut a gauche du parent.

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 il est devenu l'offsetParent et en conséquence tous les element se trouvant a l'interieur prennent comme point de depart div_1.

il est possible de connaitre la position par rapport a la page d'un element ayant un ou plusieur offsetParent en utilisant une boucle qui controlera si l'element a un offset parent et on additionnera la position de chaque element.

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)
 
 
}

getBoundingClientRect

Cette méthode permet de connaitre la position toujours par rapport au bord haut gauche de la fenetre ainsi que la taille reel d'un élément dans la page 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 au bord haut gauche de 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)

valeur d'elements de formulaire

dans un fomulaire l'utilisateur entre et valide des donnés et il est interessant de pouvoir recuperer ces donnés

value

value corespond au contenu des balises textarea et input. il correspond aussi a la valeur selectionné d'une balise select.

recuperation de valeur

var un_input= = document.getElementById("id_input");
alert(un_input.value);

var un_textarea= = document.getElementById("id_textarea");
alert(un_textarea.value);

var un_select= = document.getElementById("id_select");
alert(un_select.value);

value permet aussi de definir le contenu des balises textarea et input.

var un_input= = document.getElementById("id_input");
un_input.value="du texte";

var un_textarea= = document.getElementById("id_textarea");
un_textarea.value="du texte";

checked

checked est utilisé avec les balises radio et checkbox et permet de savoir si ces balise on eté selectionné, coché.

les valeur retourné son true si l'element est coché ou false si l'element n'est pas coché.

var un_bouton_radio= = document.getElementById("id_bouton_radio");
alert(un_bouton_radio.checked);

var un_checkbox = document.getElementById("id_checkbox");
alert(un_checkbox.checked);

checked permet aussi de valider la selection ou deselection des balises radio et checked.

var un_bouton_radio= = document.getElementById("id_bouton_radio");
un_bouton_radio.checked;

var un_checkbox = document.getElementById("id_checkbox");
un_checkbox.checked;

disabled

rend un element innactif dans le cas d'un bouton il ne sera pas possible de cliquer dessus pour un textarea on ne poura pas ecrire dedans de meme pour un input....etc les valeur possible sont true pour rendre l'element inactif ou false pour le rendre actif.

var un_bouton_radio= = document.getElementById("id_bouton_radio");
un_bouton_radio.disabled=true;

var un_checkbox = document.getElementById("id_checkbox");
un_checkbox.disabled=true;

pour savoir si l'element est actif ou inactif on teste disabled qui renvoi true ou false.

var un_bouton_radio= = document.getElementById("id_bouton_radio");
console.log(un_bouton_radio.disabled);

var un_checkbox = document.getElementById("id_checkbox");
console.log(un_checkbox.disabled);

focus

focus permet de positionner le curseur de la souris su l'element selectionné il s'agira d'elements permettant de faire une saisie avec le clavier (textarea, input de type password ou text...etc) l'interet est de pouvoir effectuer la saisir dans l'element sans avoir a cliquer dessus.

var un_textarea = document.getElementById("id_textarea");
un_textarea.focus();

blur

a l'inverse de focus Supprime le focus clavier de l' élément.

var un_textarea = document.getElementById("id_textarea");
un_textarea.blur();

select

Sélectionne le contenu d'une zone de texte. comme un textarea ou des input de type text password...etc,

var un_textarea = document.getElementById("id_textarea");
un_textarea.select();

click

declenche un clique de souris. Pour les éléments input de type Button, Checkbox, Radio, Reset et Submit.

var un_bouton = document.getElementById("id_bouton");
un_textarea.select();

submit

avant transmission il est frequent de controler les donné d'un formulaire par l'intermédiaire d'un fonction pour ce faire on creer un bouton qui lancera la fonction chargé de controler la validité des donné du formulaire et en fin de fonction lors que tout est conforme le formulaire pourra etre transmit avec submit().

var un_formulaire = document.getElementById("id_formulaire");
var un_textarea= document.getElementById("id_textarea");

if(un_textarea.value=""){
un_textarea.focus();
}

else{
un_formulaire.submit();
}

barre de défilement (scroll)

la barre de scroll permet de faire defiler le contenu d'un conteneur. Par defaut la fenetre du navigateur contient une barre de scroll qui s'affiche quand le contenu est superieur a la taille de la page mais ce n'est pas le cas pour les elements d'une page. Il est possible de donner a un element conteneur ayant aubligatoirement l'attribut css display a block comme une balise div la possibilité d'etre scrollable pour ce faire il suffit de preciser l'attribut css overflow a hidden, scroll ou auto afin de cacher le contenu lors ce que celui ci est supperieur a la taille de l'element conteneur. Contrairement a scroll hidden n'affichera pas les barre de scroll quand a auto la barre sera affiché seulement si le contenu est superieur a la taille du conteneur comme pour la fenetre du navigateur. si l'on désire avoir uniquement la barre honrizontal ou verticale Il est possible de le préciser plus finement avec les attribut css overflow-x et overflow-y.

la gestion du scroll ce fait par l'intermediaire de l'evenement onscroll.


<div id="dv" style="height: 250px;width:200px;background:blue;margin:auto;overflow-y:scroll" onscroll="une_fonction()">
 
 Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
 </div>

scroll de la page ou d'un element

pour recuperer la valeur de scroll d'un element il suffit juste de préciser l'element.

pour recuperer la valeur de scroll de la fenetre du navigateur on notera une différence en fonction du mode de fonctionnement du navigateur mode standards ou quirks (compatible), la différence ce situe au niveau de l'element referent. l'element referent peut soit etre le document racine la balise html (document.documentElement) qui est la valeur standard soit le corp de la page la balise body (document.body). Pour etre certains que l'on ai le bon element referent il est preferable de faire un teste pour recuperer l'element referent en utilisant une condition.

if(document.body.scrollTop){

var element_scroll=document.body
}
else{
var element_scroll=document.documentElement

}

on peut simplifier de cette facon

var element_scroll=document.body.scrollTop ? document.body : document.documentElement

scroll

permet de specifier une position a la barre de scroll.

l'utilisation se fait en precisant l'element puis on indique les valeur de scroll en parametre le premiere parametre correspondant au scroll honrizontal et le second au scroll verticale.

document.getElementById('dv').scroll(0, 100);

scrollLeft scrollTop

tout comme scroll permet de specifier une position a la barre de scroll mais permet en plus de donne la position de la barre de scroll en hauteur (scrollTop) ou en largeur scrollLeft.

document.getElementById("un_div").scrollTop=50
alert(document.getElementById("un_div").scrollTop)

==scrollHeight scrollWidth===

donne la taille totale en hauteur (scrollHeight) ou en largeur (scrollWidth) du scroll.


alert(document.getElementById("un_div").scrollHeight)
alert(document.getElementById("un_div").scrollWidth)

scrollIntoView

permet de positionner la barre de scroll en fonction d'un element donné en parametre.
L'element devant etre visible sera positioné par defaut en haut du conteneur on peut forcer la position en bas en specifiant en parametre la valeur false.


document.getElementById("un_element").scrollIntoView();

document.getElementById("un_element").scrollIntoView(false);

liens redirection ancre

l'objet location contient des méthodes permettant de recharger la page en court ou bien de charger une nouvelle page par l'intermediaire de script.

href

href permet de connaitre l'adresse de la page et permet le chargement d'une nouvelle page.

alert(location.href) //donne l'adresse de la page courante
location.href="https://une_nouvelle_page.com";

href permet aussi de positionner une page par rapport a une encre definit dans une balise A de la page par l' id poue ce faire on specifie l'id de l'ancre precedé par diése (hashtag).

<h2><a id="nom_de_l_encre">une position dans la page</a></h2>
location.href="#nom_de_l_encre";

assign()

assign() permet uniquement le chargement d'une nouvelle page.

location.assign("https://une_nouvelle_page.com");

replace()

replace() permet uniquement le chargement d'une nouvelle page avec une difference par rapport a assign() et href qui est la supression dans l'historique des page du navigateur de la page remplacé donc en utilisant le bouton retour du navigateur la page remplacé n'apparaitra pas.

location.replace("https://une_nouvelle_page.com");

reload()

recharge la page courante

location.reload();

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 ligne du tableau index 2

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

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);

supprimer une cellule

pour supprimer une ligne on utilise deleteCell()

supprimer la premiere colone de la premiere ligne du tableau index 0

var table=document.getElementById("id_table)
table.row[0].deleteCell(0);

supprimer la 3 eme colone de la premiere ligne du tableau index 2

var table=document.getElementById("id_table)
table.row[0].deleteRow(2);

supprimer la derniere colone de la premiere ligne du tableau index -1

var table=document.getElementById("id_table)
table.row[0].deleteCell(-1);
Ce document intitulé « manipuler le Document object 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.
Architecture d'une page html
l'api audio video
Rejoignez-nous