IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Ma fonction .innerHTML ne modifie pas mon html


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2017
    Messages
    86
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2017
    Messages : 86
    Points : 66
    Points
    66
    Par défaut Ma fonction .innerHTML ne modifie pas mon html
    Bonjour,

    j'aurai besoin de votre aide en ce qui concerne un document html, je souhaite modifier le titre de ma page html via un script.

    Après plusieurs tentatives mon script ne fonctionne pas, je ne vois pas ou peux se situer le problème.

    Voici le code ci-dessus.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <!DOCTYPE html>
    <html lang="fr">
    <head>	
        <script src="scripts.js"></script>
        <title>Document Object Model</title>
    </head>
    <body>
    	<div>
    		<h1 id="titre1" name="titre1">Document Object Model</h1>
    		<p>Le Document Object Model (ou DOM1,2) est un standard du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents HTML3 et XML4. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu'il sera présenté.</p>
    		<hr>
    		<h2>Sommaire</h2>
    		<h3><a href="#1">1 Évolution du DOM au sein des navigateurs web</a></h3>
    		<ul>
    			<li><a href="#2">1.1 DOM 1</a></li>
    			<li><a href="#3">1.2 DOM 2</a></li>
    			<li><a href="#4">1.3 DOM 3 et 4</a></li>
    		</ul>
    		<h3><a href="#5">2 Aspects techniques</a></h3>
    		<h3>3 Événements</h3>
    		<h3>4 Notes et Références</h3>
    		<h3>5 Liens externes</h3>
    		<hr>
    		<h2 id="1">Évolution du DOM au sein des navigateurs web</h2>
    		<p>Avant sa standardisation par le W3C, chaque navigateur web disposait de son propre Document Object Model. Si le langage de base destiné à manipuler les documents web a vite été standardisé autour de JavaScript, il n'en a pas été de même pour la série précise de fonctions à utiliser et la manière de parcourir le document. Par exemple, lorsque Netscape Navigator préconisait de parcourir un tableau indexé nommé document.layers[], Internet Explorer l'appelait plutôt document.all[], et ainsi de suite. En pratique, cela obligeait à écrire (au moins) deux versions de chaque morceau de script si l'on voulait rendre son site accessible au plus grand nombre.</p>
    		<p></p>
    		<p>La standardisation de ces techniques s'est faite en plusieurs étapes, lesquelles étendent chaque fois les possibilités précédentes sans jamais les remettre en cause.</p>
    		<p id="2"><b>DOM 1</b></p>
    		<p>La première est le DOM Level 1 publié en 1998 (le niveau 0 étant considéré comme l'implémentation de base figurant dans Netscape Navigator 2.0), où le W3C a défini une manière précise de représenter un document (en particulier un document XML) sous la forme d'un arbre. Chaque élément généré à partir du balisage comme, dans le cas de HTML, un paragraphe, un titre ou un bouton de formulaire, y forme un nœud. Est également définie une série de fonctions permettant de se déplacer dans cet arbre, d'y ajouter, modifier ou supprimer des éléments. En plus des fonctions génériques applicables à tout document structuré, des fonctions particulières ont été définies pour les documents HTML, permettant par exemple la gestion des formulaires. Le DOM Level 1 a été disponible dans sa plus grande partie dès les premières versions d'Internet Explorer 5 et de Netscape 6.</p>
    		<p></p>
    		<p id="3"><b>DOM 2</b></p>
    		<p>La seconde étape est le DOM Level 2 (publié en 2000), à présent constitué de six parties (en plus de Core et HTML, on trouvera Events, Style, View et Traversal and Range). Dans les évolutions de la brique de base (Core), on notera la possibilité d'identifier plus rapidement un nœud ou un groupe de nœuds au sein du document. Ainsi, pour obtenir un élément particulier on ne le recherchera plus dans un tableau comme dans les DOM propriétaires précédents, mais on appellera la fonction getElementById().</p>
    		<p></p>
    		<p id="4"><b>DOM 3 et 4</b></p>
    		<p>Le troisième niveau, publié au printemps 20045, a ajouté le support de XPath, la gestion d'événements clavier, et une interface de sérialisation de documents XML. Le quatrième niveau est en cours de développement, le Last Call Working Draft ayant été diffusé en février 20146.</p>
    		<p></p>
    		<p></p>
    		<p id="5"><b>Aspects techniques</b></p>
    		<p>DOM permet de construire une arborescence de la structure d'un document et de ses éléments. Il est donc préférable de parcourir et de mémoriser l'intégralité du document avant de pouvoir effectuer les traitements voulus. Pour cette raison, les programmes utilisant DOM ont souvent une empreinte mémoire volumineuse en cours de traitement. À l'inverse, à partir d'un arbre DOM donné, il est possible de générer des documents dans le langage de balisage voulu, qui pourront à leur tour être manipulés par l'interface DOM.</p>
    		<p></p>
    		<p>DOM est utilisé pour pouvoir modifier facilement des documents XML ou accéder au contenu des pages web. Dans les cas ne nécessitant pas de manipuler les documents XML, mais juste de les lire, la méthode SAX peut également être choisie car elle traite les éléments de façon successive sans charger le document en mémoire. Elle s'impose quand la taille du document excède la capacité de la mémoire.</p>
    		<p></p>
    		<p>Source du texte :</p>
    		<p></p>
    		<p><a href="https://fr.wikipedia.org/wiki/Document_Object_Model">https://fr.wikipedia.org/wiki/Document_Object_Model</a></p>
    	</div>
    </body>
    </html>

    le code javascript dans un fichier nommé scripts.js dans le même dossier que le document html:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function affiche_titre() {
    	var docTitle = document.title;
    	alert(docTitle);
    }
    function modfier_titre() {
     
    	//noeud1.innerHTML='ok';
    	alert(document.getElementsById("titre1").innerHTML);
    	document.getElementsById("titre1").innerHTML='test';
    }
     
    window.onload = affiche_titre();
    modfier_titre();
    Je vous remercie par avance.
    Images attachées Images attachées  

  2. #2
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 749
    Points
    4 749
    Par défaut
    innerHTML, c'est de l'anglais, en Français on pourrait traduire par "contenu html"

    le titre d'un document HTML qui s'affiche sur la barre ou/ et l'un des onglets maintenet , ce n'est pas du contenu.
    donc la méthode innerHTML ne s'applique pas sur eux, sinon elle s’appellerait nimportequelTexte.

    http://lmgtfy.com/?q=changer+le+titre+page+html

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.title = "Nouveau Titre de la page."
    https://developer.mozilla.org/en-US/...Document/title

  3. #3
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2017
    Messages
    86
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2017
    Messages : 86
    Points : 66
    Points
    66
    Par défaut
    je te remercie pour la réponse par contre c'est la balise h1 que je veux modifier. Comment fait-on dans ce cas là ?

  4. #4
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 749
    Points
    4 749
    Par défaut
    Visiblement tu n'a même pas été regarder dans le debugger de ton navigateur pour voir ce qui pouvait clocher dans ton code.

    Si, si , c'est pratique un debugger, en tout cas plus pratique que d'aller poser une question dans un forum à chaque fois que tu fais erreur de codage.

    TypeError: document.getElementsById is not a function


    getElementsById => getElementById

  5. #5
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2017
    Messages
    86
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2017
    Messages : 86
    Points : 66
    Points
    66
    Par défaut
    Merci pour la réponse, donc du coup après modification le h1 de ma page HTML ne se change toujours pas

    voici le nouveau code :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <!DOCTYPE html>
    <html lang="fr">
    <head>	
        <script src="scripts.js"></script>
        <title>Document Object Model</title>
    </head>
    <body>
    	<div>
    		<h1 id="titre1">Document Object Model</h1>
    		<p>Le Document Object Model (ou DOM1,2) est un standard du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents HTML3 et XML4. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu'il sera présenté.</p>
    		<hr>
    		<h2>Sommaire</h2>
    		<h3><a href="#1">1 Évolution du DOM au sein des navigateurs web</a></h3>
    		<ul>
    			<li><a href="#2">1.1 DOM 1</a></li>
    			<li><a href="#3">1.2 DOM 2</a></li>
    			<li><a href="#4">1.3 DOM 3 et 4</a></li>
    		</ul>
    		<h3><a href="#5">2 Aspects techniques</a></h3>
    		<h3>3 Événements</h3>
    		<h3>4 Notes et Références</h3>
    		<h3>5 Liens externes</h3>
    		<hr>
    		<h2 id="1">Évolution du DOM au sein des navigateurs web</h2>
    		<p>Avant sa standardisation par le W3C, chaque navigateur web disposait de son propre Document Object Model. Si le langage de base destiné à manipuler les documents web a vite été standardisé autour de JavaScript, il n'en a pas été de même pour la série précise de fonctions à utiliser et la manière de parcourir le document. Par exemple, lorsque Netscape Navigator préconisait de parcourir un tableau indexé nommé document.layers[], Internet Explorer l'appelait plutôt document.all[], et ainsi de suite. En pratique, cela obligeait à écrire (au moins) deux versions de chaque morceau de script si l'on voulait rendre son site accessible au plus grand nombre.</p>
    		<p></p>
    		<p>La standardisation de ces techniques s'est faite en plusieurs étapes, lesquelles étendent chaque fois les possibilités précédentes sans jamais les remettre en cause.</p>
    		<p id="2"><b>DOM 1</b></p>
    		<p>La première est le DOM Level 1 publié en 1998 (le niveau 0 étant considéré comme l'implémentation de base figurant dans Netscape Navigator 2.0), où le W3C a défini une manière précise de représenter un document (en particulier un document XML) sous la forme d'un arbre. Chaque élément généré à partir du balisage comme, dans le cas de HTML, un paragraphe, un titre ou un bouton de formulaire, y forme un nœud. Est également définie une série de fonctions permettant de se déplacer dans cet arbre, d'y ajouter, modifier ou supprimer des éléments. En plus des fonctions génériques applicables à tout document structuré, des fonctions particulières ont été définies pour les documents HTML, permettant par exemple la gestion des formulaires. Le DOM Level 1 a été disponible dans sa plus grande partie dès les premières versions d'Internet Explorer 5 et de Netscape 6.</p>
    		<p></p>
    		<p id="3"><b>DOM 2</b></p>
    		<p>La seconde étape est le DOM Level 2 (publié en 2000), à présent constitué de six parties (en plus de Core et HTML, on trouvera Events, Style, View et Traversal and Range). Dans les évolutions de la brique de base (Core), on notera la possibilité d'identifier plus rapidement un nœud ou un groupe de nœuds au sein du document. Ainsi, pour obtenir un élément particulier on ne le recherchera plus dans un tableau comme dans les DOM propriétaires précédents, mais on appellera la fonction getElementById().</p>
    		<p></p>
    		<p id="4"><b>DOM 3 et 4</b></p>
    		<p>Le troisième niveau, publié au printemps 20045, a ajouté le support de XPath, la gestion d'événements clavier, et une interface de sérialisation de documents XML. Le quatrième niveau est en cours de développement, le Last Call Working Draft ayant été diffusé en février 20146.</p>
    		<p></p>
    		<p></p>
    		<p id="5"><b>Aspects techniques</b></p>
    		<p>DOM permet de construire une arborescence de la structure d'un document et de ses éléments. Il est donc préférable de parcourir et de mémoriser l'intégralité du document avant de pouvoir effectuer les traitements voulus. Pour cette raison, les programmes utilisant DOM ont souvent une empreinte mémoire volumineuse en cours de traitement. À l'inverse, à partir d'un arbre DOM donné, il est possible de générer des documents dans le langage de balisage voulu, qui pourront à leur tour être manipulés par l'interface DOM.</p>
    		<p></p>
    		<p>DOM est utilisé pour pouvoir modifier facilement des documents XML ou accéder au contenu des pages web. Dans les cas ne nécessitant pas de manipuler les documents XML, mais juste de les lire, la méthode SAX peut également être choisie car elle traite les éléments de façon successive sans charger le document en mémoire. Elle s'impose quand la taille du document excède la capacité de la mémoire.</p>
    		<p></p>
    		<p>Source du texte :</p>
    		<p></p>
    		<p><a href="https://fr.wikipedia.org/wiki/Document_Object_Model">https://fr.wikipedia.org/wiki/Document_Object_Model</a></p>
    	</div>
    </body>
    </html>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function affiche_titre() {
    	var docTitle = document.title;
    	alert(docTitle);
    }
    function modfier_titre() {
     
    	//noeud1.innerHTML='ok';
    	alert(document.getElementById("titre1").innerHTML);
    	var noeud = document.getElementById("titre1")
    	noeud.innerHTML="test";
    }
     
    window.onload = affiche_titre();
    window.onload = modfier_titre();

  6. #6
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 749
    Points
    4 749
    Par défaut
    forcement, tu utilise window.onload = ....en plaçant tes scripts dans le header html, donc avant les éléments du body

    donc il exécute tes fonctions avant que la page ne soit entièrement chargée,

    ce qui fait que tu te retrouve dans le debugger avec un document.getElementById(...) is null ( que visiblement toujours tu n'a pas été regarder)

    alors soit tu place ton script juste avant la dernière balise </BODY> .


    Soit, tu utilise le système avec le defer et DOMContentLoaded

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    <!DOCTYPE html>
    <html lang="fr">
     
    <head>
      <meta charset="UTF-8" />
      <title>Document Object Model</title>
     
     
      <script src="scripts.js" defer></script>
     
    </head>
     
    <body>
      <div>
        <h1 id="titre1">Document Object Model</h1>
        <p>Le Document Object Model (ou DOM1,2) est un standard du W3C qui décrit une interface indépendante de tout
          langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts
          d'accéder ou de mettre à jour le contenu, la structure ou le style de documents HTML3 et XML4. Le document peut
          ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu'il sera
          présenté.</p>
        <hr>
        <h2>Sommaire</h2>
        <h3><a href="#1">1 Évolution du DOM au sein des navigateurs web</a></h3>
        <ul>
          <li><a href="#2">1.1 DOM 1</a></li>
          <li><a href="#3">1.2 DOM 2</a></li>
          <li><a href="#4">1.3 DOM 3 et 4</a></li>
        </ul>
        <h3><a href="#5">2 Aspects techniques</a></h3>
        <h3>3 Événements</h3>
        <h3>4 Notes et Références</h3>
        <h3>5 Liens externes</h3>
        <hr>
        <h2 id="1">Évolution du DOM au sein des navigateurs web</h2>
        <p>Avant sa standardisation par le W3C, chaque navigateur web disposait de son propre Document Object Model. Si le
          langage de base destiné à manipuler les documents web a vite été standardisé autour de JavaScript, il n'en a pas
          été de même pour la série précise de fonctions à utiliser et la manière de parcourir le document. Par exemple,
          lorsque Netscape Navigator préconisait de parcourir un tableau indexé nommé document.layers[], Internet Explorer
          l'appelait plutôt document.all[], et ainsi de suite. En pratique, cela obligeait à écrire (au moins) deux
          versions de chaque morceau de script si l'on voulait rendre son site accessible au plus grand nombre.</p>
        <p></p>
        <p>La standardisation de ces techniques s'est faite en plusieurs étapes, lesquelles étendent chaque fois les
          possibilités précédentes sans jamais les remettre en cause.</p>
        <p id="2"><b>DOM 1</b></p>
        <p>La première est le DOM Level 1 publié en 1998 (le niveau 0 étant considéré comme l'implémentation de base
          figurant dans Netscape Navigator 2.0), où le W3C a défini une manière précise de représenter un document (en
          particulier un document XML) sous la forme d'un arbre. Chaque élément généré à partir du balisage comme, dans le
          cas de HTML, un paragraphe, un titre ou un bouton de formulaire, y forme un nœud. Est également définie une série
          de fonctions permettant de se déplacer dans cet arbre, d'y ajouter, modifier ou supprimer des éléments. En plus
          des fonctions génériques applicables à tout document structuré, des fonctions particulières ont été définies pour
          les documents HTML, permettant par exemple la gestion des formulaires. Le DOM Level 1 a été disponible dans sa
          plus grande partie dès les premières versions d'Internet Explorer 5 et de Netscape 6.</p>
        <p></p>
        <p id="3"><b>DOM 2</b></p>
        <p>La seconde étape est le DOM Level 2 (publié en 2000), à présent constitué de six parties (en plus de Core et
          HTML, on trouvera Events, Style, View et Traversal and Range). Dans les évolutions de la brique de base (Core),
          on notera la possibilité d'identifier plus rapidement un nœud ou un groupe de nœuds au sein du document. Ainsi,
          pour obtenir un élément particulier on ne le recherchera plus dans un tableau comme dans les DOM propriétaires
          précédents, mais on appellera la fonction getElementById().</p>
        <p></p>
        <p id="4"><b>DOM 3 et 4</b></p>
        <p>Le troisième niveau, publié au printemps 20045, a ajouté le support de XPath, la gestion d'événements clavier,
          et une interface de sérialisation de documents XML. Le quatrième niveau est en cours de développement, le Last
          Call Working Draft ayant été diffusé en février 20146.</p>
        <p></p>
        <p></p>
        <p id="5"><b>Aspects techniques</b></p>
        <p>DOM permet de construire une arborescence de la structure d'un document et de ses éléments. Il est donc
          préférable de parcourir et de mémoriser l'intégralité du document avant de pouvoir effectuer les traitements
          voulus. Pour cette raison, les programmes utilisant DOM ont souvent une empreinte mémoire volumineuse en cours de
          traitement. À l'inverse, à partir d'un arbre DOM donné, il est possible de générer des documents dans le langage
          de balisage voulu, qui pourront à leur tour être manipulés par l'interface DOM.</p>
        <p></p>
        <p>DOM est utilisé pour pouvoir modifier facilement des documents XML ou accéder au contenu des pages web. Dans les
          cas ne nécessitant pas de manipuler les documents XML, mais juste de les lire, la méthode SAX peut également être
          choisie car elle traite les éléments de façon successive sans charger le document en mémoire. Elle s'impose quand
          la taille du document excède la capacité de la mémoire.</p>
        <p></p>
        <p>Source du texte :</p>
        <p></p>
        <p><a href="https://fr.wikipedia.org/wiki/Document_Object_Model">https://fr.wikipedia.org/wiki/Document_Object_Model</a></p>
      </div>
    </body>
     
    </html>

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function affiche_titre() {
    	var docTitle = document.title;
    	alert(docTitle);
    }
    function modfier_titre() {
     
    	//noeud1.innerHTML='ok';
    	alert(document.getElementById("titre1").innerHTML);           // document.getElementById(...) is null
    	var noeud = document.getElementById("titre1");
    	noeud.innerHTML="test";
    }
     
     
    document.addEventListener("DOMContentLoaded",function(e){
      affiche_titre();
      modfier_titre();
    });

  7. #7
    Membre émérite
    Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    Septembre 2002
    Messages
    1 412
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Chef de projets info
    Secteur : Transports

    Informations forums :
    Inscription : Septembre 2002
    Messages : 1 412
    Points : 2 522
    Points
    2 522
    Par défaut
    Autre possibilité. Utiliser l'évènement onload de body qui se déclenche une fois la page chargée.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <body onload="affiche_titre();modfier_titre();">

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    function affiche_titre() {
     var docTitle = document.title;
     alert("title "+docTitle);
     document.title = "coucou";
     alert("title "+document.title);
    }
    function modfier_titre() {
     
     alert("h1 "+document.getElementById("titre1").innerHTML);
     var noeud = document.getElementById("titre1")
     noeud.innerHTML="test";
    }

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 075
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 075
    Points : 44 657
    Points
    44 657
    Par défaut
    Bonjour,
    il ne faut pas perdre de vue que
    Citation Envoyé par lockmanz
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    window.onload = affiche_titre();
    window.onload = modfier_titre();
    signifie que l'on affecte à la méthode onload de window le résultat de la fonction mentionnée, la deuxième déclaration écrasant la première et ainsi de suite.

    En conservant cette façon de faire il y aurait eu lieu d'écrire
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    window.onload = function() {
      affiche_titre();
      modfier_titre();
    };
    @badaze :
    dans la mesure on l'on souhaite séparer les différentes « couches » HTML-CSS-JS autant ne pas utiliser cette écriture.

  9. #9
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2017
    Messages
    86
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2017
    Messages : 86
    Points : 66
    Points
    66
    Par défaut
    Je tiens à vous remercier pour vos réponses psychadelic, NoSmoking, badaze, finalement j'ai opté pour solution :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function affiche_titre() {
    	var docTitle = document.title;
    	alert(docTitle);
    }
    function modfier_titre() {
    	var noeud = document.getElementById("titre1");
    	noeud.innerHTML="test";
    }
     
    function lancement() {
    	modfier_titre(); 
        affiche_titre();
    }
     
     
    window.onload=function() { affiche_titre(); modfier_titre(); } 
    //window.onload=lancement(); ceci ne fonctionne pas
    le code HTML :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    	<title>Document Object Model</title>
    	<script src="scripts.js"></script>
    </head>
    <body>
    	<div>
    		<h1 id="titre1">Document Object Model</h1>
    		<p>Le Document Object Model (ou DOM1,2) est un standard du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents HTML3 et XML4. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu'il sera présenté.</p>
    		<hr>
    		<h2>Sommaire</h2>
    		<h3><a href="#1">1 Évolution du DOM au sein des navigateurs web</a></h3>
    		<ul>
    			<li><a href="#2">1.1 DOM 1</a></li>
    			<li><a href="#3">1.2 DOM 2</a></li>
    			<li><a href="#4">1.3 DOM 3 et 4</a></li>
    		</ul>
    		<h3><a href="#5">2 Aspects techniques</a></h3>
    		<h3>3 Événements</h3>
    		<h3>4 Notes et Références</h3>
    		<h3>5 Liens externes</h3>
    		<hr>
    		<h2 id="1">Évolution du DOM au sein des navigateurs web</h2>
    		<p>Avant sa standardisation par le W3C, chaque navigateur web disposait de son propre Document Object Model. Si le langage de base destiné à manipuler les documents web a vite été standardisé autour de JavaScript, il n'en a pas été de même pour la série précise de fonctions à utiliser et la manière de parcourir le document. Par exemple, lorsque Netscape Navigator préconisait de parcourir un tableau indexé nommé document.layers[], Internet Explorer l'appelait plutôt document.all[], et ainsi de suite. En pratique, cela obligeait à écrire (au moins) deux versions de chaque morceau de script si l'on voulait rendre son site accessible au plus grand nombre.</p>
    		<p></p>
    		<p>La standardisation de ces techniques s'est faite en plusieurs étapes, lesquelles étendent chaque fois les possibilités précédentes sans jamais les remettre en cause.</p>
    		<p id="2"><b>DOM 1</b></p>
    		<p>La première est le DOM Level 1 publié en 1998 (le niveau 0 étant considéré comme l'implémentation de base figurant dans Netscape Navigator 2.0), où le W3C a défini une manière précise de représenter un document (en particulier un document XML) sous la forme d'un arbre. Chaque élément généré à partir du balisage comme, dans le cas de HTML, un paragraphe, un titre ou un bouton de formulaire, y forme un nœud. Est également définie une série de fonctions permettant de se déplacer dans cet arbre, d'y ajouter, modifier ou supprimer des éléments. En plus des fonctions génériques applicables à tout document structuré, des fonctions particulières ont été définies pour les documents HTML, permettant par exemple la gestion des formulaires. Le DOM Level 1 a été disponible dans sa plus grande partie dès les premières versions d'Internet Explorer 5 et de Netscape 6.</p>
    		<p></p>
    		<p id="3"><b>DOM 2</b></p>
    		<p>La seconde étape est le DOM Level 2 (publié en 2000), à présent constitué de six parties (en plus de Core et HTML, on trouvera Events, Style, View et Traversal and Range). Dans les évolutions de la brique de base (Core), on notera la possibilité d'identifier plus rapidement un nœud ou un groupe de nœuds au sein du document. Ainsi, pour obtenir un élément particulier on ne le recherchera plus dans un tableau comme dans les DOM propriétaires précédents, mais on appellera la fonction getElementById().</p>
    		<p></p>
    		<p id="4"><b>DOM 3 et 4</b></p>
    		<p>Le troisième niveau, publié au printemps 20045, a ajouté le support de XPath, la gestion d'événements clavier, et une interface de sérialisation de documents XML. Le quatrième niveau est en cours de développement, le Last Call Working Draft ayant été diffusé en février 20146.</p>
    		<p></p>
    		<p></p>
    		<p id="5"><b>Aspects techniques</b></p>
    		<p>DOM permet de construire une arborescence de la structure d'un document et de ses éléments. Il est donc préférable de parcourir et de mémoriser l'intégralité du document avant de pouvoir effectuer les traitements voulus. Pour cette raison, les programmes utilisant DOM ont souvent une empreinte mémoire volumineuse en cours de traitement. À l'inverse, à partir d'un arbre DOM donné, il est possible de générer des documents dans le langage de balisage voulu, qui pourront à leur tour être manipulés par l'interface DOM.</p>
    		<p></p>
    		<p>DOM est utilisé pour pouvoir modifier facilement des documents XML ou accéder au contenu des pages web. Dans les cas ne nécessitant pas de manipuler les documents XML, mais juste de les lire, la méthode SAX peut également être choisie car elle traite les éléments de façon successive sans charger le document en mémoire. Elle s'impose quand la taille du document excède la capacité de la mémoire.</p>
    		<p></p>
    		<p>Source du texte :</p>
    		<p></p>
    		<p><a href="https://fr.wikipedia.org/wiki/Document_Object_Model">https://fr.wikipedia.org/wiki/Document_Object_Model</a></p>
    	</div>
    </body>
    </html>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [CR 10] Formule utilisant une fonction JOIN n'accepte pas mon tableau
    Par _cece dans le forum Formules
    Réponses: 6
    Dernier message: 24/05/2010, 13h14
  2. [AJAX] Modifier deux balises <div> avec une fonction innerhtml
    Par johnson95 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 12/08/2008, 18h55
  3. [VBA] Ma fonction ne se lance pas quand je clique sur mon bouton
    Par MeHo_ dans le forum Macros et VBA Excel
    Réponses: 8
    Dernier message: 18/03/2008, 16h28
  4. Configurer firefox pour qu'il ne modifie pas le code HTML
    Par pmithrandir dans le forum Général Conception Web
    Réponses: 4
    Dernier message: 10/01/2008, 15h42
  5. [MySQL] Fonction qui ne convertit pas les balises html
    Par tintin72 dans le forum PHP & Base de données
    Réponses: 3
    Dernier message: 02/10/2007, 20h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo