[DOM]prepend et enrichissement du Dom
Suite à une discussion sur ce forum j'ai repensé à la problématique de façon plus générale.
la question était comment insérer un ligne en première position dans un tableau.
de façon plus globale avec DOM on peut se poser la question
"Comment insérer un Element comme premier fils ?"
la solution est relativement simpe puisque insertBefore permets d'insérer avant un Element et firstChild donne le premier.
insérer avant le premier réponds donc bien à la problématique.
on peut sen faire une petite fonction. mais en fait on peut aller plus loin:
enrichir le DOM une méthode prepend sur n'importe quel Element serait bienvenue
c'est l’approche que je vous propose.
Ajouter des méthodes au DOM c'est possible et c'est efficace.
Code:
1
2
3
4
5
6
7
| Element.constructor.prototype.prepend = function(el) {
if (this.hasChildNodes()) {
this.insertBefore(el, this.firstChild);
} else {
this.appendChild(el)
}
} |
Nous ajoutons au prototype du constructeur d'Element DOM la méthode insertFirst
rien de plus que ce que nous aurions écrit pour un élément donnée.
l'avantage c'est qu'à partir de là tout objet DOM bénéficie de cette méthode.
un exemple :
Code:
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" charset=iso-8859-1>
Element.constructor.prototype.prepend = function(el) {
if (this.hasChildNodes()) {
this.insertBefore(el, this.firstChild);
} else {
this.appendChild(el)
}
}
</script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>test</title>
<script type="text/javascript" charset=iso-8859-1>
function test() {
//ajout d'un HR comme premier fils du parent de l'élément d'id 1 (ici le body)
doc = document.getElementById(1).parentNode;
doc.prepend(document.createElement('hr'));
// ajout d'un premier fil à l'élément d'id 1 (qui n'en a pas encore)
h1 = document.getElementById(1);
h1.prepend(document.createTextNode('Hello'));
}
</script>
</head>
<body onload="test()">
pour test
<h1 id='1' />
</body>
</html> |
Cette approche consistant à ajouter des méthode au DOM peut être employée pour tout ce qui vous parait nécessaire. par exemple vous ajoutez souvent des paquets d'attribut à des éléments rien de plus simple
Code:
1
2
3
4
5
| Element.constructor.prototype.setAttributes(attributes) {
for (key in attributes) {
this.setAttribute(key, attributes[key]);
}
} |
du coup
Code:
1
2
3
4
5
6
| document.getElementById(1).setAttributes({
align: "center",
className: "truc",
lang: "fr",
dir: "ltr"
}); |
A+JYT
