domEl() la manipulation magique du DOM en javascript

domEl est une fonction développée par Pawel Knapik : http://pawel.saikko.com/examples/domEldemo.html

Elle permet une utilisation simplifiée du DOM en javascript.
Je vous mets ici la documentation de Pawel en version traduite (par mes soins) et en version originale.
Malheureusement le site de Pawel n’est plus accessible, c’est pourquoi je me permets de mettre sa documentation ici.

Documentation en version française :
Nous savons tous que la manipulation du DOM peut être super amusante, mais cela peut être aussi vraiment douloureux. Ma fonction domEl (), m’aide à faire des manipulations de DOM indolores sans répéter les longs noms de fonctions standards à maintes reprises.

Le code Javascript de DomEl

var domEl = function(e,c,a,p,x) {
    if (!c) c='';
    if(e||c) {
        //c=(typeof c=='string'||(typeof c=='object'&&!c.length))?:c;

        //commentaire 84 sur pawel.saikko.com
       if (typeof c=='string') {
             c = c.length ?  : [];
            } else if (typeof c=='object' && !c.length) {
             c = ;
        }
        //fin commentaire 84

        e=(!e&&c.length==1)?document.createTextNode(c[0]):e;
        var n = (typeof e=='string')?document.createElement(e) :
        !(e&&e===c[0])?e.cloneNode(false):e.cloneNode(true);
        if(typeof e=='string' || e.nodeType!=3) {
            c[0]===e?c[0]='':'';
            for(var i=0,j=c.length;i<j;i++) typeof c[i]=='string'?
            n.appendChild(document.createTextNode(c[i])):
            n.appendChild(c[i].cloneNode(true));
            if(a){
                for (i in a){
                    i=='class'? n.className=a[i] : n.setAttribute(i,a[i]);
                }
            }
        }
    }
    if(!p) { return n; }
    p=(typeof p=='object'&&!p.length)?[p]:p;
    for(var k=(p.length-1);k>=0;k--) {
        if(x){while(p[k].firstChild)p[k].removeChild(p[k].firstChild);
            if(!e&&!c&&p[k].parentNode)p[k].parentNode.removeChild(p[k]);}
        if(n) p[k].appendChild(n.cloneNode(true));
    }
    return true;
}

Télécharger le code JavaScript du domEl dans un fichier texte

Laissez-moi commencer par un exemple :
– une tâche vraiment simple : « créer un nouveau lien redirigeant sur la page d’accueil, qui dit « go Home » et le placer à la fin du « div » content « .
Aucun problème! J’avais fait des douzaines de manipulations semblables avant … juste créer deux ou trois éléments, ajouter les un dans les autres, mettre des attributs et cela donne … regardez juste le code :

var link = document.createElement('a');
link.setAttribute('href','index.html');
link.appendChild(document.createTextNode('go home'));
document.getElementById('content').appendChild(link);

C’est de cette douleur dont je parle : chaque fois que j’ai voulu ajouter/enlever/changer/remplacer un élément j’ai dû écrire un gros paquet de lignes de code pour faire une tâche si simple. Je peux obtenir le même résultat avec l’utilisation de ma fonction personnalisée en écrivant :

domEl('a','go home',[['href','index.html']],document.getElementById('content'));

Et voilà.
Maintenant vous pouvez obtenir la source, regarder quelques exemples ou continuer à lire l’explication.

Syntaxe :
La fonction prend cinq arguments
domEl( e , c , a , p , x );

e: Le type d’élément que vous voulez créer.
Si vous voulez créer un « div », vous devez passer une chaîne de caractère ‘div’ comme premier argument. Mais cela peut-être autre chose qu’une chaîne de caractère: vous pouvez utiliser document.getElementById ('someid') et vous obtiendrez la copie vide du nœud de référence (avec tous les attributs, mais sans élément enfant).

c: Contenu du nouvel élément.
De nouveau vous pouvez utiliser une chaîne de caractère, une référence de nœud ou … un tableau! Ainsi si vous voulez juste écrire ‘salut le monde’ vous le passez comme chaîne de caractère, mais si vous voulez vous la jouer et rassembler tous les liens du document en un seul endroit votre deuxième argument sera simplement document.getElementsByTagName ('a').

a: Les attributs du nouvel élément.
Un tableau de tableaux, par exemple [['class','myclass'], ['id', 'newId'], ['foo', 'bar']]

p: Le nœud (s) où le nouvel élément sera placé.
Vous pouvez passer une référence du noeud (document.body, document.getElementById etc) ou un tableau de nœuds (par exemple document.getElementsByTagName)
– le nouveau nœud sera ajouté à tous ces éléments.

x: Enlever le contenu actuel avant l’addition du nouvel élément
Si x=1, le nouvel élément remplacera le contenu actuel d’élément (s) ‘p’, si x=0 ou n’est pas défini, le nouveau nœud sera ajouté aux nœuds enfant ‘p’.

Cas spéciaux :

DomEl ('', 'just un texte ', '', element) – si ‘e’ n’est pas défini la fonction créera un nouveau nœud de type texte.
Cet exemple est équivalent à : element.appendChild (document.createTextNode ('juste un texte '));

DomEl ('','', '', element, 1) – si ‘e’ et ‘c’ sont vides et ‘x’ est vrai, ‘p’ le nœud (ou les nœuds) sera enlevé du document.
Cet exemple est équivalent à : element.parentNode.removeChild (element);
Mais il est d’une plus grande utilité car il travaillera automagiquement [néologisme de l’auteur] avec le tableau d’éléments.

DomEl ('span', 'content')
– si ‘p’ n’est pas défini, la fonction retournera le nouveau nœud au lieu de le placer quelque part dans le document. Il est utile si vous voulez utiliser le nouvel élément comme un argument d’une autre fonction, par exemple document.body.insertBefore (domEl ('span', 'content'), document.body.firstChild)

DomEl (element, element, '', document.body)
– si ‘e’ et ‘c’ font référence à la même fonction de nœud, cela multipliera ce nœud.
Cet exemple est équivalent à document.body.appendChild (element.cloneNode (true));

Combinaison avec d’autres fonctions :

Pour chaque argument qui peut être une référence de nœud vous pouvez utiliser une fonction qui retourne une référence. Chaque argument qui peut être un tableau, peut être une fonction qui retourne un tableau. Donc la combinaison de cela avec le $ () et getElementsByClass () rend le travail plus amusant.
(note du traducteur :
La fonction $ () correspond à document.getElementById())

Deux exemples :

domEl('div',getElementsByClass('someclass'),'',$('someid')); domEl('div',$('someid'),'',getElementsByClass('someclass'));

Le premier exemple créera un nouveau div contenant tous les éléments avec la classe = « someclass » et le placera dans l’élément qui a l’id = « someid ».
Le deuxième exemple ajoutera les copies d’élément avec l’id = « someid » à chaque élément dont la classe est égale à « someclass ».

Vous pouvez utiliser domEl () comme argument de lui-même, donc vous pouvez créer des éléments contenant de nouveaux éléments (et non pas les copies d’existants), par exemple :

domEl('ul',[domEl('li','first'),domEl('li','second'),domEl('li','third')],'',ex,'');

Complément : $() basé sur l’idée originale de la fonction dollar de prototype.js et optimisée par Pawel Knapik.

function $() {
	var elements = new Array();
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == 'string')
			element = document.getElementById(element);
			if (arguments.length == 1)
				return element;

				elements.push(element);
		}
		return elements
	}

getElementsByClass – algorithme de Dustin Diaz, amélioré par Pawel Knapik

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';

	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp('(^|s)'+searchClass+'(s|$)');

	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

Documentation en version anglaise :
After reading the “TOP 10″ custom functions list by Dustin Diaz I decided to publish this custom function.
Today I can’t imagine DOM scripting without it, and with Dustin’s top-list members $() and getElementsByClass() it gives great control over the DOM.

We all know that manipulating DOM can be great fun, but it may be really painful as well. My domEl() function helps me do painless DOM manipulations without repeating the long names of standard functions over and over again.
Let me begin with an example :
– a really simple task: “create a new link pointing to home page, that says ‘go home’ and place it at the end of main content div”.
No problem! I had done dozens similar manipulations before… just need to create a couple of elements, append one into another, set attributes and it’s done… just look at the code:

var link = document.createElement('a');
link.setAttribute('href','index.html');
link.appendChild(document.createTextNode('go home'));
document.getElementById('content').appendChild(link);

This is the pain I’m referring to: every time I wanted to add/remove/change/replace an element I had to write a multi-liner to do such a simple task. The same result I can get using my custom function by writing:

domEl('a','go home',[['href','index.html']],document.getElementById('content'));

And that’s it.
Now you can get the source, check out some examples or continue reading explanation.Syntax:
Function takes five arguments:
domEl( e , c , a , p , x );
e: type of element you want to create.
If you want to create a «  », you need to pass a string ‘div’ as the first argument, but it doesn’t have to be a string: you can use document.getElementById(’someid’) and you will get empty copy of referenced node (with all attributes, but without child elements).

c: content of the new element.
Now again you can use string, node reference or… an array! So if you want to just write ‘hello world’ you pass it as a string, but if you want to go crazy and collect all links from the document in one place your second argument will be simply document.getElementsByTagName(’a’).

a: attributes of the new element.
An array of arrays, for example [[‘class’,’myclass’] , [‘id’,’newId’] , [‘foo’,’bar’]]

p: node(s) where new element will be placed.
You can pass a node reference (document.body, document.getElementById etc) or an array of nodes (for example document.getElementsByTagName) – the new node will be added to all of these elements.

x: remove current content before adding new element?
if x=1, the new element will replace current content of ‘p’ element(s), if x=0 or is not defined, the new node will be added to ‘p’ child nodes.

Special cases:

domEl("", 'just a text', "" ,element) – if ‘e’ is not defined function will create new text node. This example equals element.appendChild(document.createTextNode('just a text'));

domEl("", "", "", element, 1) – if ‘e’ and ‘c’ are empty, and ‘x’ is true, ‘p’ node (or nodes) will be removed from document. This example equals element.parentNode.removeChild(element); but is more useful because will automagically work with array of elements.

domEl('span', 'content') – if ‘p’ is not defined, function will return new node instead of placing it somewhere in the document. It is useful if you want to use new element as an argument of another function, for example document.body.insertBefore(domEl('span','content'),document.body.firstChild)

domEl(element, element, "", document.body) – if ‘e’ and ‘c’ are references to the same node function will clone that node. This example equals document.body.appendChild(element.cloneNode(true));

Combining with other functions:

For every argument that can be a node reference you can use a function that returns a reference. Every argument that can be an array, can be a function thet returns an array. So combining it with $() and getElementsByClass() makes the work even more fun. Two examples:

domEl('div',getElementsByClass('someclass'),'',$('someid'));
domEl('div',$('someid'),'',getElementsByClass('someclass'));

First example will create a new div containing all elements with class=”someclass” and place it into element with id= »someid ».
Second example will add copies of element with id=”someid” to every element with class=”someclass”.

You can use domEl() as an argument of itself, so you can create elements containing new elements (not copies of existing ones), for example:

domEl('ul',[domEl('li','first'),domEl('li','second'),domEl('li','third')],'',ex,'');
Tagués avec : , , ,
Publié dans JavaScript - AJAX
2 commentaires pour “domEl() la manipulation magique du DOM en javascript
  1. doume dit :

    il manque quelque chose ligne 20 : une instruction for commence, mais n’est pas terminée.

    Dommage, j’aurais bien voulu utiliser cette fonction que je ne trouve nulle part ailleurs

  2. Waldo dit :

    L’erreur à été corrigé!

    Et un lien de téléchargement ajouté!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*