manipuler le Document objet model (DOM)

Décembre 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

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

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"

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

}

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

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

getComputedStyle est utilisable uniquement en lecture elle est similaire a style avec une difference. Que le css soit declaré dand le corp de la page, dans l'entete du document ou dans une feuille de style permet de connaitre le style d'un element.

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)

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 element d'une page afin de separer les element est leur rendu pour une meilleur lisibilité et maintenance.

la class d'un element 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 precedente

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 connaitre le nombre de class d'un élement avec la propriete length length ainsi que le nom de chaque class du meme element 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()<bold>

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

<bold>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 nouveau node 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,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

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>

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)

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;

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

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

Commenter la réponse de Utilisateur anonyme
Architecture d'une page html
l'api audio video