[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

Citation:

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

Citation:

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)...

)

Citation:

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

14/06/2011, 13h55	#2
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 572 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 572 Points : 4 074 Points : 4 074	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 ? __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	00

14/06/2011, 14h01	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 019 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 019 Points : 45 114 Points : 45 114	y'a tout ça déja dans jquery non ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

14/06/2011, 14h35	#5
sekaijin Expert Confirmé Urbaniste Inscription : juillet 2004 Messages : 1 421 Détails du profil Informations personnelles : Sexe : Âge : 48 Localisation : France, Yvelines (Île de France) Informations professionnelles : Activité : Urbaniste Secteur : Santé Informations forums : Inscription : juillet 2004 Messages : 1 421 Points : 2 809 Points : 2 809	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
	00

14/06/2011, 14h38	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 019 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 019 Points : 45 114 Points : 45 114	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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

23/07/2011, 19h44	#7
DontShootMe Nouveau Membre du Club Inscription : février 2006 Messages : 33 Détails du profil Informations forums : Inscription : février 2006 Messages : 33 Points : 29 Points : 29	Hmm . . . 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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email