MooTools - DOM操作

MooTools DOM操作 - 从简介，安装，程序结构，选择器，使用数组，函数，事件处理，DOM操作，样式属性，输入过滤，拖放，正则表达式，期刊，滑块，可排序，手风琴，工具提示开始学习MooTools ，选项卡式内容，类，Fx.Element，Fx.Slide，Fx.Tween，Fx.Morph，Fx.Options，Fx.Events。

我们已经知道每个HTML页面都是使用DOM元素设计的.使用MooTools可以操作DOM元素，这意味着您可以创建，删除和更改DOM元素的样式.

基本方法

以下是捕获并帮助修改DOM元素属性的基本方法.

get()

此方法用于检索元素属性，如作为src，value，name等.以下语句是get方法的语法.

语法

//this will return the html tag (div, a, span...) of the element $('id_name').get('tag');

使用get()方法检索元素时，您将收到以下属性列表.

id
name
value
href
src
class(如果元素将返回所有类)
text(元素的文本内容)

set()

此方法用于将值设置为变量.当与事件结合使用时，这非常有用，并允许您更改值.以下语句是set方法的语法.

语法

//this will set the href of #id_name to "http://www.google.com"$('id_name').set('href', 'http://www.google.com');

erase()

此方法可帮助您删除elements属性的值.您需要从元素中选择要删除的属性.以下语句是erase()方法的语法.

语法

//this will erase the href value of #id_name$('id_name').erase('href');

移动元素

移动元素意味着将现有元素从一个位置移动到页面周围的另一个位置.您可以使用inject()方法在页面周围移动元素.让我们举一个例子，其中一个HTML页面包含三个div元素，它们分别按顺序包含内容A，B和C.请看下面的代码.

示例

                                    window.addEvent('domready', function() {            var elementA = $('elemA');            var elementB = $('elemB');            var elementC = $('elemC');         })                              A

您将收到以下输出 :

输出

现在，使用MooTools中的inject（）方法，我们可以将顺序从ABC更改为ACB。这意味着，我们需要将elementB放在elementC之后，并将elementC放在elementB之前。看一下下面的代码。

示例

                                    window.addEvent('domready', function() {            var elementA = $('elemA');            var elementB = $('elemB');            var elementC = $('elemC');                        //translates to: inject element C before element B            elementC.inject(elementB, 'before');                        //translates to: inject element B after element C            elementB.inject(elementC, 'after');         });                              A         B         C

Create New Element

MooTools提供了创建任意类型的DOM元素并将其插入HTML页面的选项。但是，我们必须为每个元素维护适当的语法。让我们举一个例子，其中，以下代码段是用于创建（锚定）元素的语法。

Syntax

var el = new Element('a', {   id: 'Awesome',   title: 'Really?',   text: 'I\'m awesome',   href: 'http://MooTools.net',      events: {      'click': function(e) {         e.preventDefault();         alert('Yes, really.');      }   },   styles: {      color: '#f00'   }});

让我们举一个使用MooTools库创建锚元素的示例。看一下下面的代码。

示例

                                    window.addEvent('domready', function() {                        var el = new Element('a', {               id: 'Awesome',               title: 'Really?',               text: 'I\'m awesome',               href: 'http://www.IT屋.com',                              events: {                  'click': function(e) {                     e.preventDefault();                     alert('Yes, really.');                  }               },               styles: {                  color: '#f00'               }            });            el.inject(document.body);         });