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'); // 獲得某輸入框的值