Getting Started with MooTools

Share this article

This tutorial introduces one of the most popular JavaScript frameworks today, MooTools. MooTools, which stands for My Object Oriented Tools, is compatible with Internet Explorer 6+, Firefox, Opera and Chrome. MooTools is designed to be compact, modular, and of course, object oriented. MooTools is designed for intermediate to expert JavaScript programmers, so make sure you have enough experience before diving in.

Getting MooTools

Getting MooTools is fairly simple. MooTools comes in two parts, known as Core and More. Core contains the core classes and modules of the framework, while More contains the additional classes which can be included based on an application’s needs. MooTools has powerful builder pages which can customize Core and More based on our needs. The current stable version (at the time of writing this article) of MooTools Core is 1.4.5 and More is

Element Selectors

One of the most basic operations of any JavaScript framework is the selection of elements. MooTools uses Slick as its selector engine. MooTools supports many different types of selectors. This section covers some of the most useful and important selectors.

Selecting an Element by ID

If we want to select an element by ID in plain JavaScript, we need to use the long document.getElementById('id_of_element') syntax. MooTools, like many other JavaScript frameworks, shortens this by using $ to select elements. Your code ends up looking like this:
var element =  $('id_of_element');
This will create problems if you include MooTools and other libraries that use $ (e.g. jQuery) on the same page. To overcome this situation MooTools has provided as another way to select elements. Your code to select elements by id now looks like this:
var element ='id_of_element');

Selecting Elements by Class

This will return an array of elements of a certain class. To get each individual element, we need to traverse the array, as shown below.

Selecting Elements by Attribute Patterns

The following examples select elements whose id and class attributes begin with a certain pattern.

Similarly, the following examples match elements whose id and class attributes end with a certain pattern.


The DomReady Event

DomReady is an event which can only be bound to the window object. DomReady executes as soon as the DOM is loaded, which can be much earlier than the window.load event, which waits for all other resources to load. I suggest reading this in depth comparison of DomReady and window.load. The following example uses DomReady to wait until the DOM loads before querying it.
window.addEvent('domready', function(){
    alert('Element Exists');

Element Creation

MooTools can create new HTML elements and inject them into the DOM. Creating a new HTML element in MooTools is very simple. For example, the following code creates a new div element.
var new_div = new Element('div', {'class': 'new_div'});
The previous code creates a new element, but does not inject it into the DOM. To perform the injection, you need to call the adopt() method. The following example shows how this is done.
var new_div = new Element('div', {'class': 'new_div'});

When this code gets executed, you can see the new div
added just before the closing body tag.

Event Binding

Event binding causes code to be executed when certain events are performed on an element. Click, double click, and hovering are examples of common events. You can also create your own custom events, but that is beyond the scope of this article. As an example of MooTools event binding, the following code adds a simple click event handler to an element.'id_of_ele').addEvent('click', function(){
  console.log('I was just clicked');
You can also add events to dynamically created elements. The following code adds a click handler to a dynamically created element.
var new_div = new Element('div', {'class': 'new_div'});
new_div.addEvent('click', function(){
  console.log('I was just clicked');

Browser Detection

Last, but not least, is browser detection with MooTools. This is required when you want to write conditional code based on the user’s browser. MooTools provides the Browser object, which gets populated on page load. The following example uses a switch statement to identify the current browser.
  case "safari":
    console.log('I am Safari');
  case "chrome":
    console.log('I am Chrome');
  case "firefox":
    console.log('I am FireFox');
  case "opera":
    console.log('I am Opera');
  case "ie":
    console.log('I am IE');


This article has covered a lot of the MooTools basics. There are some great resources out there for learning to use MooTools effectively. I have learned a lot from the MooTools Docs and The David Walsh Blog. You can also refer to my MooTools work.

Frequently Asked Questions about MooTools

What is MooTools and how does it differ from other JavaScript frameworks?

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well-documented, and coherent API. Unlike other JavaScript frameworks, MooTools is highly customizable and extendable, allowing developers to choose and modify the components they want to use, thereby reducing the size of scripts and improving performance.

How can I get started with MooTools?

To get started with MooTools, you first need to download the library from the official MooTools website. Once downloaded, you can include it in your HTML file using the script tag. After that, you can start writing your JavaScript code using the MooTools API. The SitePoint article provides a detailed guide on how to get started with MooTools.

What are the core features of MooTools?

MooTools comes with a host of powerful features. It provides a consistent and well-documented API for manipulating HTML, CSS, and JavaScript. It also includes a robust effects and animations framework, a flexible event handling system, and utilities for handling arrays, strings, and other JavaScript objects. Moreover, MooTools is highly modular and customizable, allowing you to choose and modify the components you want to use.

Is MooTools compatible with other JavaScript libraries?

Yes, MooTools is designed to be compatible with other JavaScript libraries. It provides a compatibility mode that can be enabled to prevent conflicts with other libraries. This makes it possible to use MooTools alongside other JavaScript libraries like jQuery or Prototype.

How does MooTools handle browser compatibility?

MooTools is designed to be cross-browser compatible. It includes a feature called Browser Abstraction, which normalizes the differences between different browsers. This means that you can write your code once and it will work consistently across all major browsers.

Can I use MooTools for mobile development?

Yes, MooTools can be used for mobile development. It is lightweight and modular, making it a good choice for mobile applications where performance is critical. However, it’s important to note that not all mobile browsers may support all features of MooTools.

How can I extend the functionality of MooTools?

MooTools is designed to be highly extendable. You can extend its functionality by creating your own plugins or by using plugins created by the MooTools community. The MooTools website provides a repository of plugins that you can use to extend the functionality of MooTools.

What kind of support is available for MooTools?

MooTools has a strong and active community of developers who provide support through various channels. You can find help on the official MooTools forum, on Stack Overflow, or by following the #mootools hashtag on Twitter. In addition, the MooTools website provides comprehensive documentation and tutorials.

Is MooTools still being actively developed?

Yes, MooTools is still being actively developed. The latest version, MooTools 1.6.0, was released in November 2015. The development team is constantly working on improving the framework and adding new features.

How does MooTools compare to jQuery?

Both MooTools and jQuery are powerful JavaScript libraries, but they have different philosophies. MooTools is more of a JavaScript framework, providing a structured, Object-Oriented approach to writing JavaScript. jQuery, on the other hand, is more of a utility library, providing a set of tools for manipulating HTML and CSS. Both have their strengths and weaknesses, and the choice between the two often comes down to personal preference and the specific needs of your project.

Avinash ZalaAvinash Zala
View Author

Avinash right now he is working with leading web development company. He likes to share his knowledge about web development at Like him on Facebook at Expert Developer and follow him on twitter at XpertDevelopers.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form