Discussion :

[lefou123456]

Bonjour !
je suis en train de programmer toute une librairie permettant un emploi plus facile des éléments du DOM.
Cependant, un problème dont je ne trouve pas la source à fait surface il y a quelques heures; une fois que je créer deux éléments,
le premier n'est plus détecté et il m'est impossible de modifier son innerHTML, son style...

Voici le code qui semble poser problème :

element.js

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
"use strict";
 
class Element {
	constructor(tagName, HTMLContent = "", container = document.getElementsByTagName("body")[0]) {
		this.tagName = tagName;
		this.container = container;
		this.initBody(container);
		this.contentHandler = new HTMLContentHandler(this);
		this.styleHandler = new StyleHandler(this);
 
		this.contentHandler.set(HTMLContent);
	}
 
	initBody() {
		let tmpId = new Id("tmp");
 
		writeElementIn(this.tagName, [tmpId], "", this.container);
		this.body = document.getElementById(tmpId.value);
		tmpId.removeOf(this);
	}
}
 
/* ### FUNCTIONS ### */
 
function writeSimpleElementInById(tagName, content, elementContainerId) {
	writeElementInById(tagName, [], content, elementContainerId);
}
 
function writeSimpleElementIn(tagName, content, elementContainer) {
	writeElementIn(tagName, [], content, elementContainer);
}
 
function writeElementInById(tagName, attributes, content, elementContainerId) {
	writeElementIn(tagName, attributes, content, document.getElementById(elementContainerId));
}
 
function writeElementIn(tagName, attributes, content, elementContainer) {
	elementContainer.innerHTML += "<" + tagName + " " + getHTMLCodeFromAttributes(attributes) + ">" + content + "</" + tagName + ">";
}

voici deux autres classes qui ne me semble pas être la cause du problème, mais voilà tout de même :


html_content_handler.js

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
18
19
20
21
22
23
24
25
 
"use strict";
 
class HTMLContentHandler {
	constructor(element) {
		this.element = element;
		this.set("");
	}
 
	clear() {
		this.set("");
	}
 
	add(HTMLCode) {
		this.element.body.innerHTML += HTMLCode;
	}
 
	set(HTMLCode) {
		this.element.body.innerHTML = HTMLCode;
	}
 
	get() {
		return this.element.body.innerHTML;
	}
}

style_handler.js

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
18
19
20
21
22
23
24
25
26
 
"use strict";
 
class StyleHandler {
	constructor(element) {
		this.element = element;
	}
 
	setColors(backgroundColor, color) {
		this.backgroundColor = backgroundColor;
		this.color = color;
	}
 
	set backgroundColor(color) {
		this.element.body.style.backgroundColor = color.getCSS();
	}
 
	set color(color) {
		this.element.body.style.color = color.getCSS();	
	}
 
	get style() {
		return this.element.body.style;
	}
 
}

Merci beaucoup de l'attention !

J'espère que l'on aura pas trop de difficultés à trouver...

[lefou123456]

Désolé, j'ai oublié des fichiers indispensables à l'exécution de la page :

color.js

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
"use strict";
 
class Color {
	constructor(r, g, b) {
		this.r = r;
		this.g = g;
		this.b = b;
	}
 
	getCSS() {
		return "rgb(" + this.r + ", " + this.g + ", " + this.b + ")";
	}
}
 
function changeBackgroundColor(color) {
	body.style.backgroundColor = color.getCSS();
}

id.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
'use strict';
 
class Id extends Attribute {
	constructor(value) {
		super("id", value);
	}
}

attribute.js

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
"use strict";
 
class Attribute {
	constructor(label, value) {
		this.label = label;
		this.value = value;
	}
 
	removeOf(element) {
		element.body.removeAttribute(this.label);
	}
 
	setAt(element) {
		element.body.setAttribute(this.label, this.value);
	}
}

initialize.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
"use strict";
 
let body = document.getElementsByTagName("body");
window.onload = init;
 
function init() {
	let button1 = new Button("Bouton1"); // => Bouton1
	button1.contentHandler.add(" :o)"); // => Bouton1 :o)
	let button2 = new Button("Bouton2"); // => Bouton2
	button2.contentHandler.add(" ;o)"); // => Bouton2 ;o)
	button1.contentHandler.add(" ;o("); // => Bouton1 ;o)
}

index.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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<title>Titre de la page</title>
 
	<script src="inc/element.js"></script>
	<script src="inc/attribute.js"></script>
	<script src="inc/id.js"></script>
	<script src="inc/html_content_handler.js"></script>
	<script src="inc/style_handler.js"></script>
	<script src="inc/color.js"></script>
	<script src="inc/initialize.js"></script>
</head>
<body id="body">
</body>
</html>

[Watilin]

Il y a beaucoup à examiner, et j’avoue que je n’ai regardé que ton premier code, mais je pense que j’ai déjà une réponse à ton problème.

innerHTML, utilisé en écriture, écrase le contenu d’un élément. Même si tu l’as copié avant ou si tu utilises l’opérateur +=, le contenu sera remplacé, et tu perdras toutes les références sur les éléments qui étaient dedans. C’est un phénomène qu’on appelle parfois corruption du DOM, et la méthode insertAdjacentHTML permet de s’en protéger. Pour plus de détails, voir insertAdjacentHTML() Enables Faster HTML Snippet Injection.


Tu as une bonne initiative en voulant créer ta propre représentation des structures HTML. C’est un bon exercice de conception, et ça te donnera une bonne compréhension du DOM. Cependant, avec innerHTML, tu ne vas pas dans une bonne direction. Je te conseille plutôt de te baser sur la méthode native document.createElement.

D’autres méthodes qui pourraient t’intéresser :

• insertAdjacentElement
• querySelector et querySelectorAll

[lefou123456]

Super, merci beaucoup !

Il reste cependant un problème; je ne trouve pas de fonction sécurisé
telle que insertAdjacentHTML() servant à remplacer tout le contenue de l'élément...

[lefou123456]

J'ai peut-être mal compris; c'est le fait d'ajouter du texte qui peut corrompre ?
Si c'est ça, je peux utiliser l'instruction element.innerHTML = "" pour supprimer le contenue !