Dombuilder.js : solution crossbrowser pour la création du dom

Télécharger le projet
Commenter

Description

Voici ma première source depuis vraiment longtemps.

DOMBuilder permet de créer des noeuds (éléments) HTML, textes et commentaires à l'aide d'une seule méthode, le tout supportant IE6+, FF3+, Safari 3+, Opera 8+ et Chrome. Le tout vise à régler l'ensemble des bugs présents (surtout pour Internet Explorer) quant aux fonctions du DOM.

L'explication sur l'utilisation de la fonction DOMBuilder est disponible dans la section "source".

La source est disponible en trois versions dans le ZIP :

- DOMBuilder.js (16KO) : Version normale, légèrement commentée
- DOMBuilder-min.js (5,4 KO) : Version compressé avec UglifyJS, qui devrait être utilisée sur des sites web
- DOMBuilder-crushed.js (3.7 KO) : Version compressé avec JSCrush, NON RECOMMANDÉ, car potentiellement dangereuse et plus lente

VERSION 1.1

AUSSI DISPONIBLE SUR GITHUB, MAIS EN RETARD (sans espaces) : https://github.com/JDMCreator/DOMBuilder

Source / Exemple : 


La création d'un élément est simple et s'effectue de cette manière :

Noeud texte. Notons que les apostrophes n'ont pas besoin d'être précédés d'un backslash s'ils sont répétés.

DOMBuilder("'texte'"); // Créer un noeud "texte"

Noeud commentaire :

DOMBuilder("<!--commentaire-->");

Les noeuds HTML sont créés à l'aide des sélecteurs CSS de tags, d'ID, de classe et d'attribut. Exemple :

DOMBuilder("INPUT#monID.maClasse[type=checkbox][checked]");

La fonction DOMBuilder accepte aussi un deuxième argument pour les éléments HTML, soit un objet optionnel. Si l'argument est une chaîne de caractère, alors cette valeur sera la propriété "content". Les propriétés de l'objet sont les suivantes :

- attr : Un objet d'attributs avec leurs valeurs. Exemple :

DOMBuilder("img", {
    attr : {
        "class" : "classe",
        "href" : "monimage.jpeg"
    }
});

Si vous souhaitez retirer les guillements des propriétés de cet objet, vous devez remplacer "class" par "className" et "for" par "htmlFor"

- childNodes : un Array contenant les éléments enfants. Si les éléments de l'Array sont des Strings ou d'autres Arrays, ceux-ci seront passés à la fonction DOMBuilder

DOMBuilder("table", {
    childNodes: [
        ["tr", {
                childNodes: [
                    ["td", {
                            childNodes: "'test'"
                        }
                    ]
                ]
            }
        ],
        ["tr", {
                childNodes: [
                    ["td", {
                            childNodes: "'test2'"
                        }
                    ]
                ]
            }
        ]
    ]
});

- content : Équivalent de "html", "css", "script" ou "value" selon l'élément

- css : Pour tous les éléments, sauf <STYLE>, voir "style". Pour <STYLE>, le contenu de la balise

- documentFragment : Enrobe l'élément d'un documentFragment
- fragment : voir "documentFragment"
- html : le contenu HTML d'une balise (équivalent dans la majorité des cas à .innerHTML). Ne fonctionne pas pour les balises ne se fermant pas (ex : <BR>, <HR>, <IMG>...), pour <SCRIPT> (utiliser "script" ou "content"), <STYLE> (utiliser "css" ou "content", <INPUT> et <TEXTAREA> (utiliser "value" ou "content")
- jQuery : Si spécifié, JQuery sera utilisé pour attacher les événements Javascript aux éléments par la méthode .on()

DOMBuilder("div", {
    jQuery : window.jQuery
});

- on : un objet d'événements

DOMBuilder("div", {
    on: {
        mouseover: function () {
            this.style.background = "green";
        },
        mouseout: function () {
            this.style.background = "red";
        }
    }
});

- style : STRING. le contenu de l'attribut STYLE de l'élément

- tableBeautifier : Valeur Booléenne (true ou false). Si false, permet de désactiver le système permettant de faire en sorte que la création de <table> fonctionne sous Internet Explorer en ajoutant automatiquement les balises <TBODY>, <TR> ou <TD> lorsque cela est nécessaire seulement.

- text : Le contenu du seul noeud texte enfant de l'élément

DOMBuilder("div", {
    text : "<mon texte>"
});

- value : la valeur de la propriété defaultValue

Conclusion :


La source est très peu commentée et utilise des techniques avancées de Javascript, tels que des closures. Si vous désirez des explications sur certaines lignes, je me ferai un plaisir de vous répondre.

Cette fonction vise à donner un résultat identique (ou très semblable) sur IE6+, FF3+, Opera 8+, Safari 3+ et Chrome. Pourquoi (surtout au moment où jQuery 2.0 abandonne IE <9) ? Par pur défi et parce que le DOM ne repose pas sur des fonctionnalités dont sont dotées exclusivement les navigateurs modernes. Bref, je n'ai jamais eu à couper dans les fonctionnalités en raison d'IE6.

Ainsi, je vous demanderais de rapporter tout bug, préférablement sur Github, mais sinon en commentaires.
Télécharger le projet

Codes Sources

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (jdmcreator)