Le Document Object Model ( DOM)



Le langage JavaScript peut manipuler (c’est-à-dire contrôler ou modifier) le code HTML des pages web.

Le DOM (Document Object Model ou « modèle objet de document ») permet à JavaScript d’accéder au contenu d’une page web afin de manipuler ses éléments.


Les navigateurs l’utilisent pour savoir comment sont articulés les éléments d’une page web (tels que les paragraphes, les titres et d’autres éléments HTML).


Quand on ouvre un document HTML dans un navigateur, celui-ci transforme le contenu du document en une structure en

forme d’arbre . Le navigateur offre aux développeurs JavaScript un outil pour accéder à cet arbre et le modifier : le DOM.




L’attribut HTML  "id"  donne un nom unique à un élément HTML ; c’est son identifiant. Par exemple, l’élément  h1 suivant a

un attribut  id:



Un id permet de manipuler un élément avec JavaScript  grâce à une fonction du DOM appelée  document.getElementById  (qui signifie « récupérer un élément par son id »), exemple:


var elementTitre = document.getElementById("titre-principal");


Dans l’exemple suivant, on modifie le titre de la page avec un script ( partie jaune).



<html>

    <head>

        <title> Les bases</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet"  href="newcss1.css" />

    </head>

<body>

<center> <h1 id="titre-principal">Le titre de la page</h1> </center>

<p> Voici un paragraphe comme contenu de la page </p>


<script>

var elementTitre = document.getElementById("titre-principal");

var texteNouveauTitre = prompt("Veuillez entrer un nouveau titre :");

elementTitre.innerHTML = texteNouveauTitre;

elementTitre.style.backgroundColor = 'yellow';

elementTitre.style.color = 'red';

</script>


</body>

</html>



Explication:


La propriété innerHTML représente le contenu HTML de l'objet  elementTitre , c’est-à-dire le contenu de l’élément sélectionné par  getElementById. On remplace ensuite ce contenu par celui de la variable texteNouveauTitre.

Les lignes suivantes modifient  les propriétés ( couleur de texte et couleur de fond) avec l'attribut style de la balise h1  avec JavaScript.


Exécution



























































Créé avec HelpNDoc Personal Edition: Générateur complet d'aides multi-formats