mootools学习笔记（四）页面元素的控制Element篇（1）

1）、document.Id;页面元素Id的选择

var myElement = document.id('myElement'); // 比较简单，选择页面中某Id名为myElement的元素

var div = document.getElementById('myElement'); //先获取某个元素的Id 赋给变量div ，然后用document.id(div)直接获取变量div中保存的Id值，通过引用来获取
div = document.id(div);
           

2）、$美金选择符这个跟jQuery挺像的，jQuery把这个选择符的功能用到了极致，Mootools里的基本用法也差不多。

var myElement = $('myElement');            // 用$选择符选择页面中Id名为myElement的元素
var myElement2 = document.id('myElement'); // 用document.id 选择页面中Id名为myElement的元素
 
myElement == myElement2; // returns true   // 两种选择方式是通用的
           

由于很多Javascript框架都会用到$选择符，因此，Mootools不建议在页面中将这些框架混用，可能会导致不可预知的错误。比如“Mootools”和“jLib”混用的情况，会导致其中一种框架的$选择符罢工。

3）、$$双美金选择符

可以选择多个元素，这点不像jQuery，$选择符一个、多个都通吃，Mootools相对比较严谨。

$$('a'); // 选择页面中所有的链接元素
           

$$(element1, element2, element3); // 可以同时选择多个元素的Id
           

$$([element1, element2, element3]); // 如果元素的Id保存在数组中，也可以选择多个元素
           

$$(document.getElementsByTagName('a')); // 选择页面中所有的链接元素
           

$$('#myElement'); // 选择Id为myElement的元素
$$('#myElement a.myClass'); // 选择Id为myElement的元素中链接的样式名为myClass的元素
$$('a, b'); // 选择页面中所有的粗体字的链接
           

4）、构造一个页面元素

var myAnchor = new Element('a', { //构造一个链接
    href: 'http://mootools.net',  //href:'链接地址'
    'class': 'myClass',           //'class':'样式表名',
    html: 'Click me!',            //html:'链接文字',
    styles: {                     //style:{样式},
        display: 'block',
        border: '1px solid black'
    },
    events: {                     //events:{ 链接事件，这里定义了click和mouseover 两个事件,多个事件用","隔开 }
        click: function(){
            alert('clicked');
        },
        mouseover: function(){    
            alert('mouseovered');
        }
    }
});
测试这段代码，可以使用doomready方法，在页面加载时自动生成这个链接。当然，也可以通过点击触发。
window.addEvent('domready', function() {
var myAnchor = new Element('a', { href: 'http://mootools.net',  
	'class': 'myClass',           
	html: 'Click me!',            
	styles: {                     
	display: 'block',
        border: '1px solid black'
    },
    events: {                     
	click: function(){
            alert('clicked');
        },
        mouseover: function(){    
            alert('mouseovered');
        }
    }
});
           

5）、getElement  获取第一个指定标签名的元素

var firstDiv = $(document.body).getElement('div'); // 获取第一个div元素
           

6）、getElements 获取页面中所有制定标签名的元素

var allAnchors = $(document.body).getElements('a'); // 获取页面中所有的链接元素
           

7）、getElementById 已知某页面元素的id，可以获取该元素中包含的元素

如果页面中有div元素，并包含a元素

<div id='myParent'><a id="myChild"></a></div>

可以通过以下的例子获取div中包含的a元素

var myChild = $('myParent').getElementById('myChild');
           

8）、set 设置某元素属性

如果页面中有链接元素<a id='myElement'></a>
可以通过下面的例子设置该元素的属性
$('myElement').set('text', 'text goes here');//设置链接元素的文字
$('myElement').set('class', 'active');//设置链接元素的类型，这里设置成锚点
var body = $(document.body).set('styles', { //设置页面body的字体
    font: '12px Arial',
    color: 'blue'
});
           

也可以通过对象的方式来设置

var myElement = $('myElement').set({
    // 设置myElement的style属性
styles: {
        font: '12px Arial',
        color: 'blue',
        border: '1px solid #f00'
    },
    // 为元素添加事件
events: {
        click: function(){ alert('click'); },
        mouseover: function(){ this.addClass('over'); }
    },
    //改变元素的id名
    id: 'documentBody'
});
           

9）、get获取某元素的属性

如果页面中有链接元素<div id='myDiv'></div>
通过下面的例子可以获取的这个元素的标签名
var tag = $('myDiv').get('tag');  变量tag的值为div
var id = $('myDiv').get('id'); // 变量id的值为myDiv
var value = $('myInput').get('value'); // 获得某输入框的值