Modèle Objet de Document : DOM
Notre page HTML est constitué d'un élément root qui est le HTML.
Celui est divisé en 2 éléments HEAD et BODY, structure même d'un page HTML.
On peut donc interage sur ses éléments à notre convenance.
Pour aller choisir un élément dans notre page, la méthode la plus utilisé est : getElementById().
Quelques exemples d'utilisation :
getElementById : Récupérer l'élément par son id
innerhtml
innerhtml : On change le contenu de l'élément.
document.getElementByid('monId').innerhtml="Je change le contenu";
style.display
display : Suppression(none).
document.getElementById('monId').style.display="none";
display : rend visible(block).
document.getElementById('monId').style.display="block";
style.visibility
display : Invisible(hidden).
document.getElementById('monId').style.visibilty="hidden";
display : rend visible(visible).
document.getElementById('monId').style.display="visible";
Nous avons vu que nous pouvions agir, modifier mais nous pouvons aussi créer, ajouter des élément.
Création dynamique d'élément : appendChild
Nous pouvons créer des éléments enfants au BODY
function addDiv(){
//Element texte
var nouveauTexte;
var divTexte
//Element Div
var nouvelElement;
//Instancie et initialise nos textes
nouveauTexte=document.createTextNode('Crée un texte Node dans le body')
divTexte=document.createTextNode('ajout dyn de div')
//Instancie et créons un élément avec son attribut
nouvelElement= document.createElement("div")
nouvelElement.setAttribute('id','divPlus')
nouvelElement.appendChild(divTexte)
//Placement des elements sur leur parent
document.body.appendChild(nouveauTexte)
//on va chercher un élément choisi
document.getElementById('mainPlus').appendChild(nouvelElement)
}