jasmine214--love

原文：http://www.bianceng.cn/webkf/mootools/201007/18103_2.htm
Mootools DOM操作
Ajax開發中，做的最多的就是對DOM的操作， 增刪節點，設置樣式等等等等，如果按照常規的javascript開發的話，工作量大的足以搞的人頭暈目眩。所以基本上每個javascript框架都會在DOM操作上花比較大的功夫，對我們使用頻率最頻繁的功能操作進行封裝(其中包括修正各個瀏覽器之間的方法差異問題)，讓我們的開發事半功倍。

mootools也提供了一套非常出色的解決方案，并且更OO。

首先，之前，通常我們創建DOM節點，都使用document.createElement()方法，而我們看mootools式的創建方法：

js 代碼

1.var myInput = new Element('input');
非常的優雅啊。

方法： $

美元，又見美元！

$基本上成了javascript框架中的標志性建筑了，短小精悍的語法使我們的代碼看起來舒服不少，也使我們的js文件瘦了下身。

時下，各大javascript框架中都會提供$這個方法，基本上它都有按照id來獲取DOM元素的功能，但各個框架在具體詮釋它的時候各有不同的手法，功能的強弱上也不一樣。比如prototype.js中的$可以根據給出的一個或多個id來獲取這些DOM元素，而jQuery里的$更是非常強，可以按照CSS選擇器的語法來獲取DOM元素(其實mootools和prototype也是可以的，只不過是$$這個方法)。

這是mootools中的$()的最常用用法，它返回id為my_div的元素，并且這個元素被加上了所有mootools所進行的擴展。

js 代碼

1.var mydiv = $('my_div');
如果你使用document.getElmentById來獲取的元素，則此時這個元素將沒有包含mootools的任何擴展，你可以把這個元素對象作為參數調用$方法，之后返回的元素將被加上mootools的擴展。

js 代碼

1.var mydiv_noextend = document.getElementById('my_div');
2.var mydiv_extended = $(mydiv_noextend);
方法： $$

功能：通過CSS選擇器語法來獲取DOM元素(需要mootools的Dom.js模塊的支持)

js 代碼

1.$$('a'); //獲取頁面上所有超鏈接標簽對象
2.$$('a','b'); //獲取頁面上所有超鏈接標簽和粗體標簽
3.$$('#my_div'); //獲取id為my_div的元素
4.$$('#my_div a.myClass'); //獲取id為my_div的元素子元素，并且這些自元素是的所有class="myClass"的標簽

=================================Element擴展方法=====================================

方法： inject

作用：可以用來把當前元素插入到指定元素之前(before)，之中(inside)，之后(after)。

java 代碼

1.$('myDiv3').inject($('myDiv1'),'before'); //把myDiv3插入到myDiv1之前

方法： injectBefore

作用：可以用來把當前元素插入到指定元素之前 (即相當于參數為'before'的inject方法)

js 代碼

1.$('myDiv3').injectBefore($('myDiv1'));

方法：injectAfter

作用：可以用來把當前元素插入到指定元素之后 (即相當于參數為'after'的inject方法)

js 代碼

1.$('myDiv3').injectAfter($('myDiv1'));

方法：injectInside

作用：可以用來把當前元素插入到指定元素之中 (即相當于參數為'inside'的inject方法)

js 代碼

1.$('myDiv3').injectInside($('myDiv1'));

方法：adopt

作用：可以在當前元素中插入指定元素(參數可以是元素id，元素引用，html元素tag名)

js 代碼

1.$('myDiv').adopt($('myDiv1'));
2.$('myDiv').adopt('myDiv1');
3.$('myDiv').adopt('button');

方法：remove

作用：刪除元素

js 代碼

1.$('myDiv').remove();

方法：clone

參數列表：

contents - 是否連帶節點的內容進行復制(deep clone)，如果不指定，則連帶。

作用：復制元素

js 代碼

1.$('myDiv').clone();
2.$('myDiv').clone(false); //只復制myDiv本身，不復制其content和子元素

方法：replaceWith

作用：用其他元素替換當前元素

js 代碼

1.var a = new Element('button');
2.a.value = 'test';
3.$('myDiv1').replaceWith($(a));