Exemple de fonctions MooTools VS Javascript

MooTools met lui aussi à disposition une large palette de fonctions très utiles et, comme jQuery, encapsule tous les nœuds DOM dans des objets étendus spécifiques, apportant ainsi des méthodes additionnelles utilisables simplement.

Manipulation de DOM, effets graphiques et AJAX sont au rendez-vous.

Je n’effleurerai ici que les bases de MooTools en reprenant les exemples précédents :

Récupérer un élément par son ID

// Natif
var div = document.getElementById('myDiv');

// MooTools
var div = $('#myDiv');

Récupérer les <p> contenus dans un <div id="myDiv">

// Natif
var div = document.getElementById('myDiv');
var p_list = div.getElementsByTagName('p');

// MooTools
var p_list = $$('#myDiv p');

Supprimer les <p> contenus dans un <div id="myDiv">

// Natif
var div = document.getElementById('myDiv');
var p_list = div.getElementsByTagName('p');

for (var i=0 ; i < p_list.length ; i++)
{
div.removeChild(p_list[i]);
}

// MooTools
var p_list = $$('#myDiv p').each();
Array.each(p_list, function(pObj)
{
pObj.destroy();
});

Cacher/afficher un élément par un clic sur un bouton

// Natif
var button = document.getElementById('button');

button.onclick = function(e)
{
var div = document.getElementById('myDiv');
var display = div.style.display != 'block' ? 'block' : 'none';
div.style.display = display;
};

// MooTools
$('#button').addEvent('click', function(e)
{
var div = $('#myDiv');

if (div.getStyle('display') != 'block')
div.setStyle('display', 'block');
else
div.setStyle('display', 'none');
});

Formation MooTools

Une question ? Venez la poser sur notre forum développement web !

A propos de l'auteur

Antoine Beaumont

Antoine Beaumont est Consultant Web et Développeur indépendant. Fort d'une expérience construite au sein de grandes agences Web-marketing, pour tous types de comptes, il accompagne désormais les professionnels dans leurs projets Web, de façon souple et objective.

Newsletter Marketing

Vous consultez la page Formation MooTools : Exemple Script Cacher Afficher Un élément Clic, Récupération ID. Dans cette formation MooToolsn découvrez comment cacher ou afficher un élément suite à clic ou à récupérer l'id d'un class css.