通过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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
vue实现输入框自动跳转功能
May 20 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
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
PHP 命名空间实例说明
2011/01/27 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python实现AES加密和解密
2019/03/27 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
Python实现微信机器人的方法
2019/09/06 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
新闻专业个人自我评价
2013/09/21 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
迎国庆横幅标语
2014/10/08 职场文书
活动宣传稿范文
2015/07/23 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js