English 中文(简体)
MooTools Tutorial

MooTools Useful Resources

Selected Reading

MooTools - DOM Manipulations
  • 时间：2024-11-03

MooTools - DOM Manipulations

Previous Page Next Page  

We already know that every HTML page is designed using DOM elements. Using MooTools you can manipulate DOM elements which means you can create, remove and change 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

//this will return the html tag (span, a, span...) of the element 
$( id_name ).get( tag );

You will receive the following pst 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

//this will set the href of #id_name to "http://www.google.com"
$( id_name ).set( href ,  http://www.google.com );

erase()

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

Syntax

//this will erase the href value of #id_name
$( id_name ).erase( href );

Moving Elements

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

Example

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent( domready , function() {
            var elementA = $( elemA );
            var elementB = $( elemB );
            var elementC = $( elemC );
         })
      </script>
   </head>
   
   <body>
      <span id = "body_wrap">
         <span id = "elemA">A</span>
         <span id = "elemB">B</span>
         <span id = "elemC">C</span>
      </span>
   </body>
   
</html>

You will receive the following output −

Output