MooTools DOM Manipulations - MooTools

What is MooTools DOM Manipulations?

We already know that each HTML web page is designed using DOM elements. Using MooTools you can manipulate DOM elements which means you can create, remove and alternate the style of DOM elements.

Basic methods

The following are the basic methods that capture and help to modify the properties of the DOM elements.

get ()

This method is used to retrieve the element properties such as src, value, name, etc. The following statement is the syntax of the get method.

Syntax

You will receive the following list of properties while retrieving the element using the get() method.

  • id
  • name
  • value
  • href
  • src
  • class (will return all classes if the element)
  • text (the text content of an element)

set ()

This method is used to set a value to a variable. This is useful when combined with events and lets you change values. The following statement is the syntax of the set method.

Syntax

erase ()

This method facilitates you erase the value of an element's property. You want to choose which property you need to erase from the detail. The following statement is the syntax of the erase() method.

Syntax

Moving elements

Moving element means moving an existing element from one position to another position around the web page. You can use the inject () technique to move an element around the page. Let us take an example wherein, one HTML page contains three div elements which contain the content A, B, and C respectively in an order. Take a look at the subsequent code.

Example

You will receive the following output −

Output

DOM Manipulations

Now, using the inject() method in MooTools, we can change the order from ABC to ACB. This means, we need to place elementB after elementC and place the elementC before elementB. Take a look at the following code.

Example

You will receive the following output −

Output

DOM Manipulations1

Create new element

MooTools gives an option to create any sort of DOM detail and inserts it into the HTML page. However, we must maintain a proper syntax for every element. Let us take an example in which, the subsequent code snippet is the syntax for creating an (anchor) element.

Syntax


Let us take an example that will create an anchor element using MooTools library. Take a look at the following code.

Example

You will receive the following output −

Output

DOM Manuplations

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

MooTools Topics