MooTools教程(6):操縱HTML DOM元素

咱們已經學習過如何來選取DOM元素，怎麼建立數組，怎麼建立函數，怎麼把事件添加到元素，今天咱們來深刻地學習一下若是操縱HTML元素。經過 MooTools 1.2，你能夠添加新元素到一個HTML頁面中，也能夠刪除元素，以及改變任何樣式或者元素參數，這些都很是容易。

基本方法

.get();

這個工具可讓你獲取元素的屬性（property）。元素的屬性是組成一個HTML元素的各類不一樣部分，例如src、value、name等等。使用.get();方法很是簡單：

// 下面這行將返回id爲「id_name」的元素的html標記名（div、a、span……）
$('id_name').get('tag');

<div id="body_wrap">
    <span id="id_name">Element</span> <!-- 上面的代碼將返回&ldquo;span&rdquo; -->
</div>

你可使用.get();方法得到更多屬性，而不僅是html標記名：

• id
• name
• value
• href
• src
• class（若是有多個CSS類名，則將返回所有CSS類名）
• text （一個元素的文本內容）
• 等等…

.set();

.set();方法和.get();方法同樣，不過不是得到一個值，而是設置一個值。當和事件聯合使用時比較有用，經過這個方法你能夠在頁面加載以後改變一些屬性值。

// 這將設置id爲id_name的元素連接地址爲「http://www.google.com」
$('id_name').set('href', 'http://www.google.com');

<div id="body_wrap">
    <!-- 上面的代碼將改變連接地址爲&ldquo;http://www.google.com&rdquo;  -->
    <a id="id_name" href="http://www.yahoo.com">Search Engine</a>
</div>

.erase();

經過.erase();方法，你能夠清除一個元素的屬性值。它和前面兩個方法相似。選取元素，而後選擇你要清除的屬性。

// 這講移除id爲id_name的元素的href屬性
$('id_name').erase('href');

 

<div id="body_wrap">
    <!-- 上面的代碼將清除連接地址 -->
    <a href="http://www.yahoo.com">Search Engine</a>
</div>

 

移動元素

.inject();

要移動頁面上一個已經存在的元素，你可使用.inject();方法。和咱們看到的其它方法相似，它用起來也很是簡單，能夠在你的用戶界面上給你更多操控權。要使用.inject();方法，首先要設置一些包含元素變量：

var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');

上面的代碼把下面這個HTML分別賦值給了不一樣的變量，這樣用MooTools來操做時會比較簡單。

 

<div id="body_wrap">
    <div id="elemA">A</div>
    <div id="elemB">B</div>
    <div id="elemC">C</div>
</div>

 

如今，要改變這些元素的順序，咱們能夠經過四種方式來使用.inject();方法。咱們能夠把元素注入到：

• 底部（bottom，默認）
• 頂部（top）
• 在某個元素的前面（before）
• 在某個元素的後面（after）

bottom和top將把這個元素注入到一個選中元素的內部，在元素內最底部或者最頂部。相對地，before和after將把一個元素注入到另一個元素的頂部或者底部，可是不是注入到元素內部。

所以，讓咱們把元素順序改變爲A-C-B。因爲咱們不須要把一個元素注入到另一個元素的內部，咱們可使用before或者after。

// 下面這句的意思是：把元素C放到元素B以前
elementC.inject(elementB, 'before'); 
 
// 下面這句的意思是：把元素B放到元素C以後
elementB.inject(elementC, 'after');

建立一個新元素

new Element

你可使用「new Element」構造器來建立一個行的HTML元素。這和寫一個正常的HTML元素很是相似，只不過你須要調整一下語法，以便可以在MooTools下正常運行：

// 首先命名一個變量並聲明一個「new Element」
// 而後定義元素的類型（div、a、span...）
var newElementVar = new Element('div', {
    // 在這裏設置元素的全部屬性
    'id': 'id_name',
    'text': 'I am a new div',
    'styles': {
        // 在這裏設置元素的全部樣式參數
        'width': '200px',
        'height': '200px',
        'background-color': '#eee',
        'float': 'left'
    }
});

如今你就有一個元素了，你能夠經過咱們剛纔學的inject();方法把這個元素放在頁面上的某個位置。咱們從下面這個簡單的HTML開始：

 

<div id="body_wrap">
    <div id="content_id">Some div content</div>
</div>

 

如今，咱們把ID爲content_id的元素轉換爲一個變量：

var bodyWrapVar = $('body_wrap');

和咱們剛纔學的同樣，咱們能夠把咱們建立的這個元素注入到當前的HTML中：

// 這句的意思是說：「把newElementVar注入到bodyWrapVar內部，並放置到頂部」
newElementVar.inject(bodyWrapVar , 'top');

這個代碼最終多是這樣的：

<div id="body_wrap">
     <!-- 這個元素被注入到內部頂部 -->
    <div id="id_name">I am a new div</div>
    <div id="content_id">Some div content</div>
</div>

示例

爲了這個例子，咱們來建立一個表單，可讓你添加一個行元素到你的HTML頁面。首先，創建一些文本框和按鈕。

<div id="body_wrap">
         ID:  <input id="id_input" name="id" />
         text:  <input id="text_input" name="text" />
        <button id="new_div">建立一個新的div</button>
</div>

如今，咱們來用MooTools寫JavaScript來實現讓這個HTML表單能夠插入一個新的元素到你的頁面中。首先，咱們先給這個按鈕添加一個事件，並寫一個函數來包含咱們的代碼：

var newDiv = function() {
    // 咱們將把「添加一個新元素」的代碼放在這裏
};
 
window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

下一件事咱們要作的就是指定咱們要處理的變量。要使用輸入表單中的數據，咱們須要使用.get();方法：

var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');

如今，上面代碼中的變量idValue和textValue就包含了它們指定的輸入表單的值。因爲咱們須要在用戶點擊「建立一個新的div」按鈕時 得到輸入框的值，咱們須要把上面的代碼放在newDiv();這個函數中。若是咱們須要在這個函數外面得到這個值，咱們須要在頁面加載時得到，而不是點擊 時。

var newDiv = function() {
    var idValue = $('id_input').get('value');
    var textValue = $('text_input').get('value');
};
 
window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

接下里，咱們須要得到咱們新元素要插入到的元素：

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);
});

咱們已經有了咱們的輸入表單的值了，如今咱們能夠建立一個新元素了：

var newDiv = function() {
    var idValue = $('id_input').get('value');
    var textValue = $('text_input').get('value');
    var bodyWrapVar = $('newElementContainer');
 
    var newElementVar = new Element('div', {
        // 這將設置這個元素的id爲idValue的值
        'id': idValue,
        // 這將設置這個元素的文本爲textValue的值
        'html': textValue
    });
};
 
window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

剩下咱們要作的就是把這個新元素插入到咱們的頁面中了：

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
        });
 
        // 下面這句是說：「把newElementVar插入到bodyWrapVar的內部頂部」
        newElementVar.inject(bodyWrapVar, 'top');
};
 
var removeDiv = function() {
        // 這將刪除內部的html值（就是div標記類的全部東西）
        $('newElementContainer').erase('html');
}
 
window.addEvent('domready', function() {
   $('new_div').addEvent('click', newDiv);
   $('remove_div').addEvent('click', removeDiv);
});

更多學習...

必定要花一些時間看一些MooTools文檔中的Elements這一節：

• Element這一節包含了咱們這裏講到的大多數內容，還有不少其它內容
• Element.style能夠給你在元素樣式屬性上更多的控制權（有些東西咱們將在之後的教程中深刻講解）
• Element.dimentions包含了處理位置、座標、尺寸大小等東西的工具