Norme imposée pour les élements et l'arboresecence HTML.
Pour ce faire, il vous faut tout d’abord connaître et comprendre ce qu’on appelle le DOM. Le DOM, pour document object model, est une recommandation du W3C qui décrit l’interface que doit avoir tout document au format XML ou HTML.
Le fait par exemple que votre page commence et finisse par les balises <html> et </html> est une norme imposée par le DOM.
Pourquoi?
Pour assurer une représentation schématisée d’un document et d’en manipuler les objets (avec JavaScript).
Si votre document n’est pas valide, il ne vous sera pas possible de le manipuler (et en plus votre site ne sera pas approuvé par Google).
Le DOM est donc la référence absolue. Comme il s’applique aux documents HTML et XML, vous le retrouverez aussi sous le nom DHTML lorsqu’il s’agit du schéma concernant juste le HTML.
Le site http://www.w3.org/ pour en savoir-plus.
Exercice : remplacer un texte
Etape 1 : Avant tout, Il faut placer un id="attribut" sur les éléments HTML que vous souhaitez manipuler.
Exemple :
<p id="idPara">Mon texte</p>
Etape 2 :
Nous allons utiliser le sous objet document de l'objet window, méthode .getElementById()
<script>
document.getElementById('idPara').innerHTML ='Mon nouveau texte';
</script>
document n'est pas un objet mais un sous objet de l'objet window.
.getElementById, c'est la méthode
.innerHTML : Ecrase l'ancien contenu texte et le remplace par le nouveau dans ce cas uniquement
.innerHTML permet de récupérer ou d'écraser le contenu texte d'un élement HTML
Résultat
Original
Mon texte
Remplacé par le nouveau texte
Mon texte
Exemples de id que nous plaçons dans le HTML
Exemple avec un bloc de paragraphe
<h3 id="idTitre">Exemple avec h3</h3>
<p id="idParagraphe">Exemple avec un bloc de paragraphe</p>
<img src="images/javascript.png" alt="Javascript" class="img-thumbnail" id="idImage">
Si la propriété CSS contient un "-", on l'écrira différemment
Ex : font-size s'écrit fontSize
On enléve le "-" et le contenu après ce caractère prend une majuscule.
1. Modifier le style d'un paragraphe
Avant
Exemple avec un bloc de paragraphe
Aprés
Exemple avec un bloc de paragraphe en italique
<script>
document.getElementById('idParagraphe').style.fontStyle="italic";
</script>
2. Modifier la couleur du texte
Avant
Aprés
<script>
document.getElementById('idTitre').style.color="red";
</script>
3. Exemple modifier la taille d'un texte
Avant
Mon texte en taille standard
Aprés
Mon texte qui n'est plus en taille standard avec Javascript
<script>
document.getElementById('id_Texte').style.fontSize="20px";
</script>
4. Modifier le source d'une image
Avant
Aprés
<script>
document.getElementById('idImage').src='images/jquery.jpg';
</script>
5. Modifier un lien, son texte et son title