通过Mootools 1.2来操纵HTML DOM元素


Posted in Javascript onSeptember 15, 2009

我们已经学习过如何来选取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> <!-- 上面的代码将返回“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包含了处理位置、坐标、尺寸大小等东西的工具
Javascript 相关文章推荐
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
webpack的pitching loader详解
Sep 23 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
Mootools 1.2教程 事件处理
Sep 15 #Javascript
Mootools 1.2教程 函数
Sep 15 #Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 #Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 #Javascript
MooTools 1.2介绍
Sep 14 #Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 #Javascript
JavaScript 函数调用规则
Sep 14 #Javascript
You might like
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
requireJS使用指南
2016/04/27 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
使用python3实现操作串口详解
2019/01/01 Python
树莓派实现移动拍照
2019/06/22 Python
python 中如何获取列表的索引
2019/07/02 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
公积金转移接收函
2014/01/11 职场文书
军训自我鉴定100字
2014/02/13 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
2014年副班长工作总结
2014/12/10 职场文书
外科护士长工作总结
2015/08/12 职场文书
交通安全教育心得体会
2016/01/15 职场文书
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技