[DOM]prepend et enrichissement du Dom

**sekaijin** · 14/06/2011, 13h27

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 :

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

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 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
<!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 :

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

1
2
3
4
5
  Element.constructor.prototype.setAttributes(attributes) {
    for (key in attributes) {
      this.setAttribute(key, attributes[key]);
    }
  }

du coup

Code :

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

1
2
3
4
5
6
document.getElementById(1).setAttributes({
  align: "center",
  className: "truc",
  lang: "fr",
  dir: "ltr"
});

A+JYT

**RomainVALERI** · 14/06/2011, 13h55

Le principe me plait ^^
Par contre si je ne m'abuse, les versions d'IE ne veulent pas de la surcharge des éléments DOM.... si ?

**Bovino** · 14/06/2011, 14h01

Envoyé par RomainVALERI

Par contre si je ne m'abuse, les versions d'IE ne veulent pas de la surcharge des éléments DOM.... si ?

Les interfaces Element sont accessibles depuis la version 8 il me semble

**SpaceFrog** · 14/06/2011, 14h01

y'a tout ça déja dans jquery non ?

**sekaijin** · 14/06/2011, 14h35

non JQuer n'agit pas ainsi lorsque tu fait un

Code :

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

$(myID)

tu obtient un objet jQuery (un simple objet javascript)
cet objet contient une référence à l'élément DOM correspondant
les méthodes sont des méthodes de l'objet jQuery.

A+JYT

**SpaceFrog** · 14/06/2011, 14h38

Oui mais non ^^
je veux dire au niveau du prepend

Mais surcharger le DOM ... je m'en méfierais, d'une part comme le dit Beef au niveau de la compatibilité, d'autre part je me suis déja fait avoir ensuite sur des boucles sur les propriétés des éléments en oubliant hasOwnPorperty

**DontShootMe** · 23/07/2011, 19h44

Il existe PrototypeJS qui fait cela à merveille, on lui reproche justement de modifier le DOM.

Je t'invite à lire la critique de Kangax qui a fait partie de l'équipe de PrototypeJS.

Je suis trés interresé par ton avis, si tu pouvais nous en faire part aprés ta lecture, je t'en remercie d'avance.

**RomainVALERI** · 23/07/2011, 21h05

Envoyé par DontShootMe

Il existe PrototypeJS qui fait cela à merveille, on lui reproche justement de modifier le DOM.

Je t'invite à lire la critique de Kangax qui a fait partie de l'équipe de PrototypeJS.

Je suis trés interresé par ton avis, si tu pouvais nous en faire part aprés ta lecture, je t'en remercie d'avance.

Excellent article ^^

(même si déjà relativement connu (enfin, ici en tout cas)...

)

"What’s wrong with extending the DOM" [... article ...]
April 5th, 2010

[DOM]prepend et enrichissement du Dom

JavaScript

Discussions similaires

Partager

Partager