通过Mootools 1.2来操纵HTML DOM元素
我们已经学习过如何来选取DOM元素,怎么创建数组,怎么创建函数,怎么把事件添加到元素,今天我们来深入地学习一下如果操纵HTML元素。通过MooTools 1.2,你可以添加新元素到一个HTML页面中,也可以删除元素,以及改变任何样式或者元素参数,这些都非常容易。
基本方法
.get();
这个工具可以让你获取元素的属性(property)。元素的属性是组成一个HTML元素的各种不同部分,例如src、value、name等等。使用.get();方法非常简单:
参考代码:
参考代码:
你可以使用.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');
参考代码:
.erase();
通过.erase();方法,你可以清除一个元素的属性值。它和前面两个方法类似。选取元素,然后选择你要清除的属性。
参考代码:
// 这讲移除id为id_name的元素的href属性
$('id_name').erase('href');
参考代码:
移动元素
.inject();
要移动页面上一个已经存在的元素,你可以使用.inject();方法。和我们看到的其它方法类似,它用起来也非常简单,可以在你的用户界面上给你更多操控权。要使用.inject();方法,首先要设置一些包含元素变量:
参考代码:
上面的代码把下面这个HTML分别赋值给了不同的变量,这样用MooTools来操作时会比较简单。
参考代码:
现在,要改变这些元素的顺序,我们可以通过四种方式来使用.inject();方法。我们可以把元素注入到:
底部(bottom,默认)
顶部(top)
在某个元素的前面(before)
在某个元素的后面(after)
bottom和top将把这个元素注入到一个选中元素的内部,在元素内最底部或者最顶部。相对地,before和after将把一个元素注入到另外一个元素的顶部或者底部,但是不是注入到元素内部。
因此,让我们把元素顺序改变为A-C-B。由于我们不需要把一个元素注入到另外一个元素的内部,我们可以使用before或者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页面。首先,建立一些文本框和按钮。
参考代码:
现在,我们来用MooTools写JavaScript来实现让这个HTML表单可以插入一个新的元素到你的页面中。首先,我们先给这个按钮添加一个事件,并写一个函数来包含我们的代码:
参考代码:
下一件事我们要做的就是指定我们要处理的变量。要使用输入表单中的数据,我们需要使用.get();方法:
参考代码:
现在,上面代码中的变量idValue和textValue就包含了它们指定的输入表单的值。由于我们需要在用户点击“创建一个新的div”按钮时获得输入框的值,我们需要把上面的代码放在newDiv();这个函数中。如果我们需要在这个函数外面获得这个值,我们需要在页面加载时获得,而不是点击时。
参考代码:
接下里,我们需要获得我们新元素要插入到的元素:
参考代码:
我们已经有了我们的输入表单的值了,现在我们可以创建一个新元素了:
参考代码:
剩下我们要做的就是把这个新元素插入到我们的页面中了:
参考代码:
基本方法
.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> <!-- 上面的代码将返回“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"> <!-- 上面的代码将改变链接地址为“http://www.google.com” --> <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包含了处理位置、坐标、尺寸大小等东西的工具
相关推荐
爱读书的旅行者 2020-07-07
liaoxuewu 2020-05-19
lupeng 2020-11-14
sjcheck 2020-11-10
sjcheck 2020-11-03
meylovezn 2020-08-28
owhile 2020-08-18
Francismingren 2020-08-17
pythonclass 2020-07-29
sunzhihaofuture 2020-07-19
行吟阁 2020-07-05
tianqi 2020-07-05
行吟阁 2020-07-04
冰蝶 2020-07-04
lyg0 2020-07-04
owhile 2020-07-04
opspider 2020-06-28
lengyu0 2020-06-28
tianqi 2020-06-21