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

2024-07-21 02:04:23

字体：大中小

来源：转载

供稿：网友

我们已经学习过如何来选取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>
</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">
<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);
});

代码效果演示

id:
text:

你可以试试在id文本框中输入：ilovemilk

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

基本方法

移动元素

创建一个新元素

示例

更多学习...