Manipulating HTML DOM elements via Mootools 1.2来 _mootools

We've learned how to choose DOM elements, how to create arrays, how to create functions, how to add events to elements, and today we're going to take a deep look at manipulating HTML elements. With MooTools 1.2, you can add new elements to an HTML page, delete elements, and change any style or element parameters, which is very easy.
Basic methods
. get ();
This tool allows you to get the attributes of an element. The attributes of an element are a variety of different parts that make up an HTML element, such as SRC, value, name, and so on. Using. get (); The method is simple:
Reference code:

Copy Code code as follows:

The following row returns the HTML tag name (Div, a, span ...) for the element with ID "Id_name". ）
$ (' id_name '). Get (' tag ');

Reference code:

Copy Code code as follows:

<div id= "Body_wrap" >
<span id= "Id_name" >Element</span> <!--the code above will return to "span"-->
</div>

You can use. Get () method to obtain more properties, not just HTML tag names:
Id
Name
Value
Href
Src
Class (if more than one CSS class name is available, all CSS class names will be returned)
Text (the textual content of an element)
Wait a minute...
. set ();
. Set (); Method and. Get (); method, but instead of getting a value, set a value. When used in conjunction with events, you can change some of the property values after the page is loaded.
Reference code:
This sets the element link address with ID id_name as "http://www.google.com"
$ (' Id_name '). Set (' href ', ' http://www.google.com ');

Reference code:

Copy Code code as follows:

<div id= "Body_wrap" >
<!--the above code will change the link address to "http://www.google.com"-->
<a id= "Id_name" href= "http://www.yahoo.com" >search engine</a>
</div>

. Erase ();
By using the. Erase () method, you can clear the attribute value of an element. It is similar to the previous two methods. Select the element, and then select the attribute you want to clear.
Reference code:
This tells you to remove the href attribute of an element with ID Id_name
$ (' id_name '). Erase (' href ');

Reference code:

Copy Code code as follows:

<div id= "Body_wrap" >
<!--The above code clears the link address-->
<a href= "http://www.yahoo.com" >search engine</a>
</div>

Moving elements
. inject ();
To move an already existing element on the page, you can use the. Inject () method. Similar to the other methods we see, it is very simple to use and can give you more control over your user interface. To use the. Inject () method, first set some containing element variables:
Reference code:

Copy Code code as follows:

var Elementa = $ (' Elema ');
var elementb = $ (' elemb ');
var ELEMENTC = $ (' ELEMC ');

The code above assigns the following HTML to different variables, so it's easier to operate with MooTools.
Reference code:

Copy Code code as follows:

<div id= "Body_wrap" >
<div id= "Elema" >A</div>
<div id= "Elemb" >B</div>
<div id= "ELEMC" >C</div>
</div>

Now, to change the order of these elements, we can use the. Inject () method in four different ways. We can inject the elements into:
Bottom (bottom, default)
Top (TOPS)
In front of an element (before)
After an element (after)
Bottom and top will inject this element into the interior of a selected element, at the bottom or topmost of the element. In contrast, before and after will inject an element into the top or bottom of another element, but not into the interior of the element.
So let's change the order of the elements to a-c-b. Since we do not need to inject an element into the interior of another element, we can use before or after.
Reference code:

Copy Code code as follows:

Put the element c before the element b
Elementc.inject (ELEMENTB, ' before ');
After the element B is placed in the element C, the following sentence means
Elementb.inject (ELEMENTC, ' after ');

Create a new element
New Element
You can use the "new Element" constructor to create an HTML element for a row. This is very similar to writing a normal HTML element, except that you need to adjust the syntax so that you can work under MooTools:
Reference code:
First name a variable and declare a "new Element"
Then define the type of the element (Div, a, span ...). ）
var newelementvar = new Element (' div ', {
Set all properties for the element here
' ID ': ' id_name ',
' Text ': ' I am a new div ',
' Styles ': {
Set all style parameters for the element here
' Width ': ' 200px ',
' Height ': ' 200px ',
' Background-color ': ' #eee ',
' Float ': ' Left '
}
});
Now that you have an element, you can put this element somewhere on the page by using the inject () method we just learned. Let's start with this simple HTML:
Reference code:
<div id= "Body_wrap" >
<div id= "content_id" >some div content</div>
</div>
Now, we convert the element with ID content_id to a variable:
Reference code:
var Bodywrapvar = $ (' body_wrap ');
As we have just learned, we can inject this element we created into the current HTML:
Reference code:
"Inject Newelementvar into the bodywrapvar and put it to the top."
Newelementvar.inject (Bodywrapvar, ' top ');
This code could end up being like this:
Reference code:
<div id= "Body_wrap" >
<!--This element is injected into the top of the interior-->
<div id= "Id_name" >i am a new div</div>
<div id= "content_id" >some div content</div>
</div>

Example
For this example, let's create a form that allows you to add a line element to your HTML page. First, create some text boxes and buttons.
Reference code:

Copy Code code as follows:

<div id= "Body_wrap" >
ID: <input id= "Id_input" name= "id"/>
Text: <input id= "Text_input" name= "text"/>
<button id= "New_div" > Create a new div</button>
</div>

Now we're going to use MooTools to write JavaScript to get this HTML form to insert a new element into your page. First, we add an event to the button and write a function to contain our code:
Reference code:

Copy Code code as follows:

var newdiv = function () {
We'll put the code "add a new element" here
};
Window.addevent (' Domready ', function () {
$ (' New_div '). Addevent (' click ', Newdiv);
});

The next thing we're going to do is specify the variables we're going to be dealing with. To use the data in the input form, we need to use the. Get () Method:
Reference code:

Copy Code code as follows:

var idvalue = $ (' id_input '). Get (' value ');
var TextValue = $ (' text_input '). Get (' value ');

Now, the variables idvalue and TextValue in the code above contain the values of the input form they specify. Since we need to get the value of the input box when the user clicks on the "Create a new div" button, we need to put the above code in the Newdiv (); If we need to get this value out of this function, we need to get it when the page loads, not when clicked.
Reference code:

Copy Code code as follows:

var newdiv = function () {
var idvalue = $ (' id_input '). Get (' value ');
var TextValue = $ (' text_input '). Get (' value ');
};
Window.addevent (' Domready ', function () {
$ (' New_div '). Addevent (' click ', Newdiv);
});

Next, we need to get the element we want to insert into the new element:
Reference code:

Copy Code code as follows:

var newdiv = function () {
var idvalue = $ (' id_input '). Get (' value ');
var TextValue = $ (' text_input '). Get (' value ');
var Bodywrapvar = $ (' Newelementcontainer ');
};
Window.addevent (' Domready ', function () {
$ (' New_div '). Addevent (' click ', Newdiv);
});

We already have the value of our input form, and now we can create a new element:
Reference code:

Copy Code code as follows:

var newdiv = function () {
var idvalue = $ (' id_input '). Get (' value ');
var TextValue = $ (' text_input '). Get (' value ');
var Bodywrapvar = $ (' Newelementcontainer ');
var newelementvar = new Element (' div ', {
This will set the value of this element's ID to Idvalue
' ID ': idvalue,
This will set the text of this element to be a TextValue value
' HTML ': TextValue
});
};
Window.addevent (' Domready ', function () {
$ (' New_div '). Addevent (' click ', Newdiv);
});

All that remains to be done is to insert this new element into our page:
Reference code:

Copy Code code as follows:

var newdiv = function () {
var Bodywrapvar = $ (' Newelementcontainer ');
var idvalue = $ (' id_input '). Get (' value ');
var TextValue = $ (' text_input '). Get (' value ');
var newelementvar = new Element (' div ', {
' ID ': idvalue,
' Text ': TextValue
});
The following sentence says, "insert Newelementvar into the top of the Bodywrapvar."
Newelementvar.inject (Bodywrapvar, ' top ');
};
var removediv = function () {
This will delete the internal HTML value (that is, everything in the div tag class)
$ (' Newelementcontainer '). Erase (' HTML ');
}
Window.addevent (' Domready ', function () {
$ (' New_div '). Addevent (' click ', Newdiv);
$ (' Remove_div '). Addevent (' click ', Removediv);
});

Learn more ...

Be sure to take some time to look at some of the elements sections in the MooTools document:

• element This section contains most of what we're talking about here, and lots of other things
• Element.style can give you more control over element style attributes (some of which we'll delve into later tutorials)
• element.dimentions tools that contain things such as location, coordinates, size, and so on