Utilisation du DOM pour remplacer document.write

Pour toutes les discussions javascript, jQuery et autres frameworks
Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Utilisation du DOM pour remplacer document.write

Message par Jpe54 » 30 janv. 2020, 12:15

Bonjour,

Fait suite au post : viewtopic.php?f=3&t=817

j'essaie de me former à l'utilisation du DOM pour un codage sans les instructions document.write.

Reste ce cas de figure du tableau en div affichant des listes de vignettes. Noter qu'au départ j'utilisais Class et non Id pour identifier les éléments...

Initialement class était utilisé à la place de id... donc utilisation de document.getElementsByClassName sans aucun résultat !

Bref je tourne en rond malgré diverses lectures et recherches d'exemple qui malheureusement ne listent que les instructions DOM une par une.

Merci par avance d'un éclairage nouveau.

Amitiés à vous tous

Code css :

Code : Tout sélectionner

/* =================================== */
/* =================================== */
/*  Formatage liens des Cartes G et ?  */
/*  avec les espaces (margin-l ou r)   */
/* =================================== */
/* =================================== */

.TxtL {
	margin-left: 2em;
	color: red;
    font-weight: bold;
    text-decoration: none;
    padding: 2px 2px 2px 2px; /*Définition des marges intérieures du lien */
}

.TxtR {
	margin-right: 2em;
	color: red;
    font-weight: bold;
    text-decoration: none;
    padding: 2px 2px 2px 2px; /*Définition des marges intérieures du lien */
}

/* =================================== */
/* =================================== */
/*   Construction div cache diapos     */
/* =================================== */
/* =================================== */

#EspaceVignettes {
	text-align: center;
    display: block;
	width: 1140px;  /* Déterminé dynamiquement dans la feuille HTML */
	margin: auto; 
	/* border: 1px solid #000; /* A Supprimer - Visu pour test */
}

#container {
	position: relative; 
	margin-top: 15px; 
	margin-left: 10px; 
	height: 185px;
    width: 184px;
    border-radius: 8px;
    background: #F4F4F4;
	box-shadow: 5px 5px 5px #777;
	float: left; 
}

#DiaEtiquetteH {
	height: 20px;
	color: blue;
	font-weight: bold;
	margin-top: 4px; 
	font-size: 12px
	/* border: 1px solid #000; /* A Supprimer - Visu pour test */
}

#DiaEtiquetteB {
	height: 20px;
	color: blue;
	font-weight: bold;
	margin-top: 4px; 
	font-size: 12px
	/* border: 1px solid #000; /* A Supprimer - Visu pour test */
}

.DiaEtiquette {
	height: 20px;
	color: blue;
	font-weight: bold;
	margin-top: 4px; 
	font-size: 12px
	/* border: 1px solid #000; /* A Supprimer - Visu pour test */
}

#DiaVignette {
   /*  border: 1px solid #000; /* A Supprimer - Visu pour test */
    margin: auto; 
    width: 182px;
	height: 140px;
	display: table-cell; /* Comportement visuel de cellule */
	vertical-align: middle;
}

#DiaVignette img {
		max-width: 158px;
        max-height: 134px;
        border: 1px solid #000; 
        box-shadow: -1px -1px 1px 1px #777; 
    }

	/* =================================== */
/* =================================== */
/*      Pour info Bulle uniquement     */
/* =================================== */
/* =================================== */

/* Définition taille police indispensable pour info Bulle */
p {
    font-size: 1.1em;
}


/* Rendre invisible tout le bloc span */
a.Exif span {
    position: absolute;
    top: -2000em;
    left: -2000em;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: #DDEEFF; /* Définition du fond, sinon on a le même que notre lien */
    border: 1px solid #6699FF; /* Définition des bordures */
}

a.Exif {
    color: black;
    font-weight: bold;
	margin-left: 1em;
    text-decoration: none;
    padding: 2px 2px 2px 2px; /*Définition des marges intérieures de notre lien */
    /* Définition de l'arrière plan de notre lien */
    /*	background: transparent url('comment.gif') no-repeat right center;  */
    position: relative; /* Indispensable pour le bon positionnement de l'info-bulle */
}

    /* ligne qui corrige le bug d'IE6 et inférieur */
    a.Exif:hover {
        border: 0;
    }

        /* Rend visible tout le bloc span et lui attribue une taille */
        a.Exif:hover span, a.Exif:focus span, a.Exif:active span {
            top: -144px;
            left: -122px;
            width: 162px;
            height: 140px;
            overflow: visible;
        }

/* =================================== */
/* =================================== */
Code HTML :

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Version 0.01 30/01/2020</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>

<div id="EspaceVignettes">
	<div id="container">	
		<div id="DiaEtiquetteH"></div>							
		<div id="DiaVignette"></div>				
		<div id="DiaEtiquetteB"></div>		
	</div>
</div>

<script>

// Initialement class était utilisé à la place de id... donc utilisation de document.getElementsByClassName...
// sans résultat
// EspaceVignettes delimite la place disponible pour les vignettes
// container est la forme donnée à la diapo à dupliquer

/*
// Code exemple de référence issu du site ToutJavaScript
<style type="text/css">
div#parent, div#parent div {
 border:1px solid #999;
 margin:4px;
}
</style>
<div id="parent">Div parent</div>
<script>

var p=document.getElementById("parent");
for (var i=1; i<=10; i++) {
 var e=document.createElement("div");
 e.innerHTML="Element n°"+i;
 p.appendChild(e);
}

*/
// Variables pour test
GPSlat = "45.699801";
GPSlon = "6.645525";
GPSAlt = "1622m"
file = "Diapo "; 
image = "";
url = "222";
caption = "Absente";
DateExif = "22/10/2018 - 11h35";
InfoBulle = "Barrage de Roselend";

UrlRetour = "xxx"

for (i = 1; i < 12; i++) {
	// Pour Test : alterner orientation image
	if ((i % 2) == 0 ) {
	image = "001H.jpg";
	} else {
	image = "001V.jpg";
	}
}
// document.write('<div id="container">');

// document.getElementById("container").innerHTML = '';
				
document.getElementById("DiaEtiquetteH").innerHTML = '<a class="TxtR" href="https://www.google.com/maps?q=' + GPSlat + ',' + GPSlon + '&spn=0.05,0.05&t=h&om=1" target="_blank">G</a>';		
document.getElementById("DiaEtiquetteH").innerHTML += '' + file + i + '.jpg';
document.getElementById("DiaEtiquetteH").innerHTML += '<a class="TxtL" href="POIs_GeoPortail_SAT.htm?' + UrlRetour + '&IconJpg=' + image + '&Lat=' + GPSlat + '&Lon=' + GPSlon + '&Alt=' + GPSAlt + '">?</a>';

document.getElementById("DiaVignette").innerHTML = '<a href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a>';

document.getElementById("DiaEtiquetteB").innerHTML = '' + DateExif + '';
document.getElementById("DiaEtiquetteB").innerHTML += '<a class="Exif" href="#">[EXIF]<span><br>' + InfoBulle + '</span></a>';

// document.write('</div>');

// -->
    </script>
</body>
</html>
Fichier pour test : Fichier obsolète supprimé...
Modifié en dernier par Jpe54 le 31 janv. 2020, 20:22, modifié 1 fois.

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Utilisation du DOM pour remplacer document.write

Message par webmaster » 30 janv. 2020, 13:09

Bonjour,

Je n'ai pas vraiment compris la question...
D'apres l'exemple, tout fonctionne bien, sans erreur dans la console.

Tout ce que je peux dire c'est que la syntaxe getElementsByClassName retourne un tableau
Il faut donc penser à utiliser le premier element avec [0] pour pouvoir le manipuler
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Re: Utilisation du DOM pour remplacer document.write

Message par Jpe54 » 30 janv. 2020, 14:16

Bonjour,

Merci d'avoir pris le temps de visionner ce post.

Effectivement aucune erreur dans la console !

Si je place le code DOM dans la boucle, je ne sais pas comment transformer en DOM le div "container" du fait de son div de fermeture après ceux de construction de la diapositive. De fait une seule diapo - numéro 11 - s'affiche dans la page.

En outre même avec le codage qui suit - instructions document.write résiduelle sur container - seule la première diapo numéro 11 s'affiche dans la page, les 10 autres restent vierge d'information et d'image.

Code : Tout sélectionner

// exemple de boucle avec le DOM et un document.write qui fonctionnait en tout document.write...
for (i = 1; i < 12; i++) {
	// Pour Test : alterner orientation image
	if ((i % 2) == 0 ) {
	image = "001H.jpg";
	} else {
	image = "001V.jpg";
	}
	
	document.write('<div id="container">');

// document.getElementById("container").innerHTML = '';
				
document.getElementById("DiaEtiquetteH").innerHTML = '<a class="TxtR" href="https://www.google.com/maps?q=' + GPSlat + ',' + GPSlon + '&spn=0.05,0.05&t=h&om=1" target="_blank">G</a>';		
document.getElementById("DiaEtiquetteH").innerHTML += '' + file + i + '.jpg';
document.getElementById("DiaEtiquetteH").innerHTML += '<a class="TxtL" href="POIs_GeoPortail_SAT.htm?' + UrlRetour + '&IconJpg=' + image + '&Lat=' + GPSlat + '&Lon=' + GPSlon + '&Alt=' + GPSAlt + '">?</a>';

document.getElementById("DiaVignette").innerHTML = '<a href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a>';

document.getElementById("DiaEtiquetteB").innerHTML = '' + DateExif + '';
document.getElementById("DiaEtiquetteB").innerHTML += '<a class="Exif" href="#">[EXIF]<span><br>' + InfoBulle + '</span></a>';

	document.write('</div>');
}
La réponse vient peut être du fait qu'il me faut rester avec des identifiants "class" et non "id"...

Dans ce cas faut-il un code html des div avec des noms de class en mode tableau comme ci-dessous ?

Code : Tout sélectionner

<body>

<div id="EspaceVignettes">
	<div class="container[0]">	
		<div class="DiaEtiquetteH[0]"></div>							
		<div class="DiaVignette[0]"></div>				
		<div class="DiaEtiquetteB[0]"></div>		
	</div>
</div>

<script>
... puis class=DiaEtiquetteH[1] etc... pour démarrer la boucle d'affichage DOM avec la variable ?

Code : Tout sélectionner

document.getElementsByClassName ("DiaEtiquetteH[i]").innerHTML = '<a class="TxtR" href="https://www.google.com/maps?q=' + GPSlat + ',' + GPSlon + '&spn=0.05,0.05&t=h&om=1" target="_blank">G</a>';		
document.getElementsByClassName ("DiaEtiquetteH[i]").innerHTML += '' + file + i + '.jpg';
document.getElementsByClassName ("DiaEtiquetteH[i]").innerHTML += '<a class="TxtL" href="POIs_GeoPortail_SAT.htm?' + UrlRetour + '&IconJpg=' + image + '&Lat=' + GPSlat + '&Lon=' + GPSlon + '&Alt=' + GPSAlt + '">?</a>';
Merci par avance

EDIT 18h11 : Correction fautes d'orthographe...
Modifié en dernier par Jpe54 le 30 janv. 2020, 18:12, modifié 2 fois.

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Utilisation du DOM pour remplacer document.write

Message par webmaster » 30 janv. 2020, 14:26

Ok, j'ai compris le besoin :)

Il faut créer dans la boucle les éléments du DOM à la volée
En utilisant createElement, on fabrique un élément du DOM en JS
https://www.toutjavascript.com/referenc ... lement.php

En utilisant appendChild, on ajoute cet élément dans le DOM
https://www.toutjavascript.com/referenc ... dchild.php

Cela nécessite pas mal de programmation, mais c'est la bonne manière de manipuler la page sans utiliser document.write (qui va finir d'ailleurs par etre desactivé du JS, d'après les infos visibles dans la console)
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Re: Utilisation du DOM pour remplacer document.write

Message par Jpe54 » 31 janv. 2020, 19:02

Bonjour,

J'ai suivi vos remarques et effectivement j'avance puisque les contenus - de l'élément "container" représentant une image d'une diapositive - sont correctement générés.

Il me reste ce cas retord de la div "container", élément ajouté dans le DOM qui reste figé en unique exemplaire visible sur la page.

Pourtant le code css est identique à celui du développement HTML avec les document.write mais est inopérant avec le DOM ! Modifier l'emplacement de la balise de fin div de l'élément "container" dans le body de la page HTML ne change rien.

Bref je sèche !

CSS

Code : Tout sélectionner

/* =================================== */
/* =================================== */
/*  Formatage liens des Cartes G et ?  */
/*  avec les espaces (margin-l ou r)   */
/* =================================== */
/* =================================== */

.TxtL {
	margin-left: 2em;
	color: red;
    font-weight: bold;
    text-decoration: none;
    padding: 2px 2px 2px 2px; /*Définition des marges intérieures du lien */
}

.TxtR {
	margin-right: 2em;
	color: red;
    font-weight: bold;
    text-decoration: none;
    padding: 2px 2px 2px 2px; /*Définition des marges intérieures du lien */
}

/* =================================== */
/* =================================== */
/*   Construction div cache diapos     */
/* =================================== */
/* =================================== */

#EspaceVignettes {
	text-align: center;
    display: block;
	width: 1140px;  /* Déterminé dynamiquement dans la feuille HTML */
	margin: auto; 
	/* border: 1px solid #000; /* A Supprimer - Visu pour test */
}

#container {
	position: relative; 
	margin-top: 15px; 
	margin-left: 10px; 
	height: 185px;
    width: 184px;
    border-radius: 8px;
    background: #F4F4F4;
	box-shadow: 5px 5px 5px #777;
	float: left; 
}

.containerId {
	position: relative; 
	margin-top: 15px; 
	margin-left: 10px; 
	height: 185px;
    width: 184px;
    border-radius: 8px;
    background: #F4F4F4;
	box-shadow: 5px 5px 5px #777;
	float: left; 
}

.DiaEtiquetteH {
	height: 20px;
	color: blue;
	font-weight: bold;
	margin-top: 4px; 
	font-size: 12px
	/* border: 1px solid #000; /* A Supprimer - Visu pour test */
}

.DiaEtiquetteB {
	height: 20px;
	color: blue;
	font-weight: bold;
	margin-top: 4px; 
	font-size: 12px
	/* border: 1px solid #000; /* A Supprimer - Visu pour test */
}

.DiaVignette {
   /*  border: 1px solid #000; /* A Supprimer - Visu pour test */
    margin: auto; 
    width: 182px;
	height: 140px;
	display: table-cell; /* Comportement visuel de cellule */
	vertical-align: middle;
}

.DiaVignette img {
		max-width: 158px;
        max-height: 134px;
        border: 1px solid #000; 
        box-shadow: -1px -1px 1px 1px #777; 
    }

/* =================================== */
/* =================================== */
/*      Pour info Bulle uniquement     */
/* =================================== */
/* =================================== */

/* Définition taille police indispensable pour info Bulle */
p {
    font-size: 1.1em;
}


/* Rendre invisible tout le bloc span */
a.Exif span {
    position: absolute;
    top: -2000em;
    left: -2000em;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: #DDEEFF; /* Définition du fond, sinon on a le même que notre lien */
    border: 1px solid #6699FF; /* Définition des bordures */
}

a.Exif {
    color: black;
    font-weight: bold;
	margin-left: 1em;
    text-decoration: none;
    padding: 2px 2px 2px 2px; /*Définition des marges intérieures de notre lien */
    /* Définition de l'arrière plan de notre lien */
    /*	background: transparent url('comment.gif') no-repeat right center;  */
    position: relative; /* Indispensable pour le bon positionnement de l'info-bulle */
}

    /* ligne qui corrige le bug d'IE6 et inférieur */
    a.Exif:hover {
        border: 0;
    }

        /* Rend visible tout le bloc span et lui attribue une taille */
        a.Exif:hover span, a.Exif:focus span, a.Exif:active span {
            top: -144px;
            left: -122px;
            width: 162px;
            height: 140px;
            overflow: visible;
        }

/* =================================== */
/* =================================== */
HTML

Code : Tout sélectionner

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Version 0.01 30/01/2020</title>
    <link rel="stylesheet" type="text/css" href="styles_en_DOM.css" />
</head>

<body>
	
<div id="EspaceVignettes">
	<div id="container" class="container">
		<div class="DiaEtiquetteH"></div>							
		<div class="DiaVignette"></div>				
		<div class="DiaEtiquetteB"></div>		
	</div>
</div>

<script>
// Variables pour test
GPSlat = "45.699801";
GPSlon = "6.645525";
GPSAlt = "1622m"
file = "Diapo "; 
image = "";
url = "";
caption = "Absente";
DateExif = "/10/2018 - 11h35";
InfoBulle = "Barrage de Roselend";

UrlRetour = "xxx"

/*
var p0=document.getElementById("container");
var p1=document.getElementById("container");
var p2=document.getElementById("container");
var p3=document.getElementById("container");
*/
var p0=document.getElementById("EspaceVignettes");
var p1=document.getElementById("EspaceVignettes");
var p2=document.getElementById("EspaceVignettes"); 
var p3=document.getElementById("EspaceVignettes");


// Référence à l'élément dans lequel insérer un nouveau noeud
var parentContainer = document.getElementById('container');
// var parentContainer = document.getElementsByClassName('container[0]');
// Mémoriser cette Référence au premier enfant pour placer 
// appendChild dans id container
var theFirstChild = parentContainer.firstChild;


 var e=document.createElement("div");
for (var i=1; i<=10; i++) {

// =========================================
// Pour Tester résultat de la boucle
	url = "Url_Num_" + i;
	DateExif = (10 + i) + "/10/2018 - 11h35";
	if ((i % 2) == 0 ) {
	image = "001H.jpg";
	} else {
	image = "001V.jpg";
	}
// =========================================

 e=document.createElement("div");
 e.className = 'container';
 e.innerHTML ='';
 p0.appendChild(e);
 // cette ligne suivante en service ou non est sans effet visible pour cet élément...
// parentContainer.insertBefore(e, theFirstChild);


 e=document.createElement("div");
 e.className = 'DiaEtiquetteH';
 e.innerHTML ='<a class="TxtR" href="https://www.google.com/maps?q=' + GPSlat + ',' + GPSlon + '&spn=0.05,0.05&t=h&om=1" target="_blank">G</a>';
 e.innerHTML += '' + file + i + '.jpg';
 e.innerHTML += '<a class="TxtL" href="POIs_GeoPortail_SAT.htm?' + UrlRetour + '&IconJpg=' + image + '&Lat=' + GPSlat + '&Lon=' + GPSlon + '&Alt=' + GPSAlt + '">?</a>';
 p1.appendChild(e);
 // Insérer le nouvel élément avant le premier enfant soit container
parentContainer.insertBefore(e, theFirstChild);


 e=document.createElement("div");
 e.className = 'DiaVignette';
 e.innerHTML = '<a href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a>';
 p2.appendChild(e);
  // Insérer le nouvel élément avant le premier enfant soit container
parentContainer.insertBefore(e, theFirstChild);
 
 e=document.createElement("div");
 e.className = 'DiaEtiquetteB';
 e.innerHTML = '' + DateExif + '';
 e.innerHTML += '<a class="Exif" href="#">[EXIF]<span><br>' + InfoBulle + '</span></a>';
 p3.appendChild(e);
  // Insérer le nouvel élément avant le premier enfant soit container
parentContainer.insertBefore(e, theFirstChild);
}


// +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=
// Pour visu console
VisuConsole("9")

// +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=
function VisuConsole(NumTab) {
	var tab=document.getElementsByClassName("container[" + NumTab + "]");
	// var tab=document.getElementsByClassName(NumClass);
		for (var i=0; i<tab.length; i++) {
			with (o=tab[i]) {
			console.log("propriété classList de DIV id="+o.id+" : ");
			console.log(o.classList);
			}
		}
}
// +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=
// +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=
        </script>
    </body>
</html>
Contenu zip pour test avec le développement "document.write" et l'actuel en DOM :
2020-01-31 Fichiers Test.zip
(28.52 Kio) Téléchargé 570 fois

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Utilisation du DOM pour remplacer document.write

Message par webmaster » 02 févr. 2020, 11:21

Bonjour

Quand on ouvre l'inspecteur d'élément, on se rend compte qu'il n'y a pas la même structure
Sur le dom valide, on a :
Capture d’écran 2020-02-02 à 11.16.44.png
Capture d’écran 2020-02-02 à 11.16.44.png (30.92 Kio) Vu 14197 fois
Sur le dom manipulé avec appendChild, on a :
Capture d’écran 2020-02-02 à 11.18.33.png
Capture d’écran 2020-02-02 à 11.18.33.png (42.54 Kio) Vu 14197 fois
Je pense que l'origine du probleme vient d'élements qui ont le meme id.
Ainsi, dans ce code, p0 a p4 pointent sur le même objet, le premier div appelé EspaceVignettes

Code : Tout sélectionner

var p0=document.getElementById("EspaceVignettes");
var p1=document.getElementById("EspaceVignettes");
var p2=document.getElementById("EspaceVignettes"); 
var p3=document.getElementById("EspaceVignettes");
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Re: Utilisation du DOM pour remplacer document.write

Message par Jpe54 » 03 févr. 2020, 11:53

Bonjour,

Effectivement c'est bien la structure div imbriqués des éléments du container que je n'arrive pas à reproduire en DOM. Faire pointer avec le code source du post précédent les éléments imbriqués sur container (ou container[n]) var p1=document.getElementById("container"); ne change rien…

Je bloque complétement depuis l'origine de ce post pour insérer les div DiaEtiquetteH , DiaVignette et DiaEtiquetteB dans le container bien que dans le code du fichier Index_en_DOM_DIV.htm et son code css personnalisé, je dispose, - grâce à votre intervention -, de tous les éléments correctement générés dans la page, après avoir pris soin de masquer le div container du body.

Code: Index_en_DOM_DIV.htm

Code : Tout sélectionner

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Version 0.01 02/02/2020</title>
    <link rel="stylesheet" type="text/css" href="styles_en_DOM_DIV.css" />
</head>

<body>
	
<div id="EspaceVignettes">
	<div id="container" class="container">	
		<div class="DiaEtiquetteH"></div>							
		<div class="DiaVignette"></div>				
		<div class="DiaEtiquetteB"></div>		
	</div>
</div>

<script>
// Variables pour test
GPSlat = "45.699801";
GPSlon = "6.645525";
GPSAlt = "1622m"
file = "Diapo "; 
image = "001H.jpg";
url = "Url_Num_0";
caption = "Absente";
DateExif = "/10/2018 - 11h35";
InfoBulle = "Barrage de Roselend";

UrlRetour = "xxx"


// Référence à l'élément dans lequel insérer un nouveau noeud
var parentContainer = document.getElementById('EspaceVignettes');
// var parentContainer = document.getElementsByClassName('container[0]');
// Mémoriser cette Référence au premier enfant pour placer 
// appendChild dans id container
var theFirstChild = parentContainer.firstChild;


 var p=document.getElementById("EspaceVignettes");


 var e=document.createElement("div");
for (var i=1; i<=10; i++) {
 
 e=document.createElement("div");
 e.className = 'container';
 e.innerHTML ='num' + i + '';
 p.appendChild(e);
 
 e=document.createElement("div");
 e.className = 'DiaEtiquetteH';
 e.innerHTML ='<a class="TxtR" href="https://www.google.com/maps?q=' + GPSlat + ',' + GPSlon + '&spn=0.05,0.05&t=h&om=1" target="_blank">G</a>';
 e.innerHTML += '' + file + i + '.jpg';
 e.innerHTML += '<a class="TxtL" href="POIs_GeoPortail_SAT.htm?' + UrlRetour + '&IconJpg=' + image + '&Lat=' + GPSlat + '&Lon=' + GPSlon + '&Alt=' + GPSAlt + '">?</a>';
 p.appendChild(e);
 // parentContainer.insertBefore(e, theFirstChild);

 e=document.createElement("div");
 e.className = 'DiaVignette';
 e.innerHTML = '<a href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a>';
 p.appendChild(e);
 // parentContainer.insertBefore(e, theFirstChild);
 
 e=document.createElement("div");
 e.className = 'DiaEtiquetteB';
 e.innerHTML = '' + DateExif + '';
 e.innerHTML += '<a class="Exif" href="#">[EXIF]<span><br>' + InfoBulle + '</span></a>';
 p.appendChild(e);
 // parentContainer.insertBefore(e, theFirstChild);

}
        </script>
    </body>
</html>
J'ai également tenté un mode de fonctionnement DOM avec pour seul div Container et tout le reste en Class, fichier (Index_en_DOM_Class.htm . La génération des vignettes est correcte mais je me retrouve confronté à l'impossibilité de gérer un positionnement correct et fixe en css des éléments. En fait ce codage revient à la création de tableaux et non de DIV …

Code: Index_en_DOM_Class.htm

Code : Tout sélectionner

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Version 0.01 03/03/2020</title>
    <link rel="stylesheet" type="text/css" href="styles_en_DOM_Class.css" />
</head>

<body>
	
<div id="EspaceVignettes">
	<div id="MyContainer" class="Container"></div>
</div>

<script>
// Variables pour test
GPSlat = "45.699801";
GPSlon = "6.645525";
GPSAlt = "1622m"
file = "Diapo "; 
image = "001H.jpg";
url = "Url_Num_0";
caption = "Absente";
DateExif = "/10/2018 - 11h35";
InfoBulle = "Barrage de Roselend";

UrlRetour = "xxx"

 var p=document.getElementById("EspaceVignettes");

 var e=document.createElement("div");
for (var i=1; i<=12; i++) {

// =========================================
// Pour Tester résultat de la boucle
	url = "Url_Num_" + i;
	DateExif = (10 + i) + "/10/2018 - 11h35";
	if ((i % 2) == 0 ) {
	image = "001H.jpg";
	} else {
	image = "001V.jpg";
	}
// =========================================
 
 // Créer Class Container depuis son div masqué
 e=document.createElement("div");
 e.className = 'Container';
 e.innerHTML ='';
 p.appendChild(e);

// Class DiaEtiquetteH
 e.innerHTML += '<a class="TxtR" href="https://www.google.com/maps?q=' + GPSlat + ',' + GPSlon + '&spn=0.05,0.05&t=h&om=1" target="_blank">G</a>';
 e.innerHTML += '<b class= "DiaEtiquetteH">' + file + i + '.jpg</b>';
 e.innerHTML += '<a class="TxtL" href="POIs_GeoPortail_SAT.htm?' + UrlRetour + '&IconJpg=' + image + '&Lat=' + GPSlat + '&Lon=' + GPSlon + '&Alt=' + GPSAlt + '">?</a>';
 // e.innerHTML += '<br />'

 // Class DiaVignette
 e.innerHTML += '<a class="DiaVignette" href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a>';

 // Class DDiaEtiquetteB
 e.innerHTML += '<br />'
 e.innerHTML += '<b class= "DiaEtiquetteB">' + DateExif + '</b>';
 e.innerHTML += '<a class="Exif" href="#">[EXIF]<span><br>' + InfoBulle + '</span></a>';

}

// +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=
// +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=
        </script>
    </body>
</html>
Fichier test avec ces 2 codages :
2020-02-03 Fichiers Test.zip
(28.14 Kio) Téléchargé 580 fois

Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Re: Utilisation du DOM pour remplacer document.write

Message par Jpe54 » 04 févr. 2020, 20:20

Bonsoir,

Utilisation du DOM en lieu et place des documents.write totalement fonctionnel en utilisant une seul ligne div dans le body avec le codage css qui va bien…

Pas évident de développer ces codes avec comme seuls outils Notepad++ et les fonctions de débogage des navigateurs… en particulier pour le css.

code Css :

Code : Tout sélectionner

/* =================================== */
/*          V 1.00 04/02/2020          */
/* =================================== */

html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px; /* old Navigateur */
    font-size: 1.8vh; /* CSS3 Navigateur */
}

/* =================================== */
/* =================================== */
/*   Construction div cache diapos     */
/* =================================== */
/* =================================== */

#EspaceVignettes {
	text-align: center;
    display: block;
	width: 1000px;  	/* A Déterminer dynamiquement pour trouver nombre de container */
						/* selon leur taille soit : height + box-shdow + margin-left   */
						/* soit 185 + (5 + 5) + 10 = 200 x 5 = 1000px                  */
	margin: auto; 
}

#MyContainer {
	display: none;
}

.Container {
	position: relative; 
	margin-top: 15px; 
	margin-left: 10px; 
	height: 185px;
    width: 184px;
    border-radius: 8px;
    background: #F4F4F4;
	box-shadow: 5px 5px 5px #777;
	float: left;
}

.DiaEtiquetteH {
	position: absolute; 
	height: 20px;
	width: 184px;
}
b.DiaEtiquetteH {
	position: absolute;
	margin-top: 5px;
	margin-left: -90px;
	color: blue;
    font-weight: bold;
}

.DiaVignette {
    margin: auto;
	width: 184px;
	height: 165px;
	display: table-cell; 
	vertical-align: middle;
}

.DiaVignette img {
	margin-top: 20px;
	max-width: 158px;
    max-height: 134px;
    border: 1px solid #000; 
    box-shadow: -1px -1px 1px 1px #777; 
    }

.DiaEtiquetteB {
	color: blue;
	font-weight: bold;
	font-size: 1.8vh;
}

/* =================================== */
/* =================================== */
/*  Formatage liens des Cartes G et ?  */
/*  avec les espaces (margin-l ou r)   */
/* =================================== */
/* =================================== */

.TxtL {
	position: absolute;
	margin-top: 5px;
	margin-left: 65px; 
	color: red;
    font-weight: bold;
    text-decoration: none;
    padding: 2px 2px 2px 2px; /*Définition des marges intérieures du lien */
}

.TxtR {
	position: absolute;
	margin-top: 5px;
	margin-left: -75px;
	color: red;
    font-weight: bold;
    text-decoration: none;
    padding: 2px 2px 2px 2px; /*Définition des marges intérieures du lien */
}

/* =================================== */
/* =================================== */
/*      Pour info Bulle uniquement     */
/* =================================== */
/* =================================== */

/* Définition taille police indispensable pour info Bulle */
p {
    font-size: 1.1em;
}


/* Rendre invisible tout le bloc span */
a.Exif span {
    position: absolute;
    top: -2000em;
    left: -2000em;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: #DDEEFF; /* Définition du fond, sinon on a le même que notre lien */
    border: 1px solid #6699FF; /* Définition des bordures */
}

a.Exif {
    color: black;
    font-weight: bold;
	margin-left: 1em;
    text-decoration: none;
    padding: 2px 2px 2px 2px; /*Définition des marges intérieures de notre lien */
    /* Définition de l'arrière plan de notre lien */
    /*	background: transparent url('comment.gif') no-repeat right center;  */
    position: relative; /* Indispensable pour le bon positionnement de l'info-bulle */
}

    /* ligne qui corrige le bug d'IE6 et inférieur */
    a.Exif:hover {
        border: 0;
    }

        /* Rend visible tout le bloc span et lui attribue une taille */
        a.Exif:hover span, a.Exif:focus span, a.Exif:active span {
            top: -144px;
            left: -122px;
            width: 162px;
            height: 140px;
            overflow: visible;
        }

/* =================================== */
/* =================================== */
Code HTML + Javscript :

Code : Tout sélectionner

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>JpE - Version 1.00 04/03/2020</title>
    <link rel="stylesheet" type="text/css" href="styles_en_DOM_Class.css" />
</head>

<body>
	
<div id="EspaceVignettes">
	<div id="MyContainer" class="Container"></div>
</div>

<script>
// Variables pour test
GPSlat = "45.699801";
GPSlon = "6.645525";
GPSAlt = "1622m"
file = "Diapo "; 
image = "001H.jpg";
url = "Url_Num_0";
caption = "Absente";
DateExif = "/10/2018 - 11h35";
InfoBulle = "Barrage de Roselend";

UrlRetour = "xxx"

 var p=document.getElementById("EspaceVignettes");

 var e=document.createElement("div");
for (var i=1; i<=12; i++) {

// =========================================
// Pour Tester résultat de la boucle
	url = "Url_Num_" + i;
	InfoBulle = "Barrage de Roselend " + i;
	DateExif = (10 + i) + "/10/2018 - 11h35";
	if ((i % 2) == 0 ) {
	image = "001H.jpg";
	} else {
	image = "001V.jpg";
	}
// =========================================
 
 // Créer Class Container depuis son div masqué
 e=document.createElement("div");
 e.className = 'Container';
 e.innerHTML ='';
 p.appendChild(e);

// Class DiaEtiquetteH
 e.innerHTML = '<a class="TxtR" href="https://www.google.com/maps?q=' + GPSlat + ',' + GPSlon + '&spn=0.05,0.05&t=h&om=1" target="_blank">G</a>';
 e.innerHTML += '<b class= "DiaEtiquetteH">' + file + i + '.jpg</b>';
 e.innerHTML += '<a class="TxtL" href="POIs_GeoPortail_SAT.htm?' + UrlRetour + '&IconJpg=' + image + '&Lat=' + GPSlat + '&Lon=' + GPSlon + '&Alt=' + GPSAlt + '">?</a>';

 // Class DiaVignette
 e.innerHTML += '<a class="DiaVignette" href="' + url + '"><img src="' + image + '" alt="' + caption + '"></a>';

 // Class DDiaEtiquetteB
 e.innerHTML += '<b class= "DiaEtiquetteB">' + DateExif + '</b>';
 e.innerHTML += '<a class="Exif" href="#">[EXIF]<span><br>' + InfoBulle + '</span></a>';

}

        </script>
    </body>
</html>
Fichier résultant à disposition de tous :
2020-02-04 Sources.zip
(25.92 Kio) Téléchargé 590 fois
NB : Un grand merci au webmaster pour ces interventions sur ce post.

Le codage css des class DiaEtiquetteH TxtR TxlL est ignoré avec internet explorer 11 alors qu'il passe parfaitement avec le nouvel Edge Chrominum (qui ma supprimé Edge sans avis comme d'hab !) et Chrome … J'ignore si d'autres navigateurs sont concernés.

Tout type de commentaires et remarques hautement souhaités !
Je n'intercepte aucune erreur en débogage sous IE !
RAS avec Chrome sur le css des Eléments
Les outils de validation W3C ne détecte aucune erreur sur la seule structure testée du css hormis une balise lang absente dans le HTML.

Code : Tout sélectionner

.DiaEtiquetteH {
	position: absolute; 
	height: 20px;
	width: 184px;
}
b.DiaEtiquetteH {
	position: absolute;
	margin-top: 5px;
	/* ================================================================================= */
	margin-left: -90px; /* C'est cette instruction qui perturbe Internet Explorer 11     */
	/* ================================================================================= */
	color: blue;
    font-weight: bold;
}
.TxtL {
	position: absolute;
	margin-top: 5px;
	margin-left: 65px; 
	color: red;
    font-weight: bold;
    text-decoration: none;
    padding: 2px 2px 2px 2px; 
}

.TxtR {
	position: absolute;
	margin-top: 5px;
	margin-left: -75px;
	color: red;
    font-weight: bold;
    text-decoration: none;
    padding: 2px 2px 2px 2px; 
}

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Utilisation du DOM pour remplacer document.write

Message par webmaster » 05 févr. 2020, 10:41

IE11 est amené à disparaitre et même microsoft veut le tuer.
C'est en partie car ils n'arrivent plus à le maintenir sans erreur d'interprétation.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Re: Utilisation du DOM pour remplacer document.write

Message par Jpe54 » 18 févr. 2020, 11:36

Bonjour,

HTML revu et adapté pour charger - avec Internet explorer - un fichier css spécifique… De fait le code placé dans "head" autorise un fonctionnement correct sur tout navigateur…

Code : Tout sélectionner

        // **************************************************************************
        // Correction du Bogue Internet Explorer version 11 constaté
        // lors de la génération des vignettes sur css margin négatif
        // **************************************************************************
        // Modifier css uniquement sur détection Internet Explorer
        var lien_css = document.createElement('link');
        lien_css.rel = "stylesheet";
        lien_css.type = "text/css";
        if (navigator.userAgent.indexOf("NET4") >= 1) {
            lien_css.href = "styles_en_DOM_Class_IE.css";
        } else {
            lien_css.href = "styles_en_DOM_Class.css";
            document.getElementsByTagName("head")[0].appendChild(lien_css);
        }
        document.getElementsByTagName("head")[0].appendChild(lien_css);
        // **************************************************************************
L'utilisation d'un getElementsByClassName[n].style.margin = "npx npx" était une autre solution...

Un grand merci pour m'avoir mis le pied à l'étrier avec le DOM. Le codage complet de mon programme est beaucoup plus clair et simple en appelant des fonctions générique destinées à créer des éléments div ou tableau sans codage html.

Codage final : Voir Fichier correct dans page suivante...
Modifié en dernier par Jpe54 le 21 mars 2020, 15:56, modifié 1 fois.

Répondre