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.
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();
<!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>
tu peux mettre du code en utilisant le petit bouton "code", c'est pas mal.
quand tu ajoute une balise script en html, c'est exécuté directement (sauf si tu le précise). Tu appelle modifier_titre quand le dom n'est pas encore chargé. Si tu console.log(document.getElementById('titre1')) dans ta fonction, ça doit te renvoyer null ou undefined. Puis la méthode document.getElementById) ne prends pas de "s", ça ne récupère qu'un seul élément.
tu peux mettre du code en utilisant le petit bouton "code", c'est pas mal.
quand tu ajoute une balise script en html, c'est exécuté directement (sauf si tu le précise). Tu appelle modifier_titre quand le dom n'est pas encore chargé. Si tu console.log(document.getElementById('titre1')) dans ta fonction, ça doit te renvoyer null ou undefined. Puis la méthode document.getElementById) ne prends pas de "s", ça ne récupère qu'un seul élément.
je vous remercie pour votre réponse donc du coup je vais devoir charger la page avec window.onload puis lancer le code ?
c'est ça, tu devrais pouvoir sélectionner le dom qui t'intéresse.
je vous remercie pour votre réponse par contre après modification de mon code il ne donne modifie toujours pas le titre.
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();
le code html :
<!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>
C'est parce que ta balise script est dans le head, déplace la dans le body
- Edité par piero5673 il y a environ 10 heures
Je te remercie pierro5673 pour ta réponse, finalement j'ai trouvé la solution le problème venait de l'appel de la fonction :
<!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>
et javascript
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
Ma fonction .innerHTML ne modifie pas mon html
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)