MooTools DOM 之 Manipulating elements(操纵元素)

根据在《MooTools DOM 基本分类》 日志中的分类方法,在上一节中我们介绍了《MooTools DOM 之 Accessing elements(访问元素)》。既然,我们已经学会了如何获得元素,那我们对元素进行操作就没有问题了。操作元素,包括添加或删除一个element 的 css class 和
获取或设置元素的属性,以及如何获取表单相关元素的值
等等的操作。由于我们一直用原始的JavaScript来操作元素,它给我们带来了繁琐和复杂的操作,还有一些不兼容的问题一直困扰着我们。
然而,JavaScript
Libraries 的出现,为我们提供了丰富的,快捷的,实用的wrapper functions(包装函数),
让我们更加专注于元素的行为处理。

正如我们下面所介绍的:

属性操作

对于目前的规范是使用setAttribute方法来设置属性,使用getAttribute方法来获取属性。根据W3C标准,假如我们不论实际情况如何,都用它们来进行属性操作的话,我会遇到一些问题,因为它没有很好的落实在所有的浏览器 中。但是MooTools早已注意到这一点,增加了更多的选项和功能,其中最为强大是set() ,get()和erase()它们是’动态参数’方法。其它的setProperty(),setProperties(),getProperty(),getProperties(),removeProperty(),removeProperties()它们是’静态参数’方法,顾名思义,你可以看出’静态参数’方法,就只是针对HTML元素的常用属性进行操作。

1.获取属性和设置属性

Element.set

用于设置元素的属性值.

这是一个’动态参数’方法. 传入的参数可以是任意在Element.Properties中定义过类型.

当和事件联合使用时比较有用,通过这个方法你可以在页面加载之后改变一些属性值。

语法:

Element.set(‘property’, value);

Example:

使用’属性-值':

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('myElement').set('html', '<div>new html!我是一个类似于JavaScript中innerHTML属性的操作.</div>');
$('myElement').set('text', '文本内容在这里,我是一个类似于JavaScript中innerText属性的操作.');
 
$('myElement').set('class', 'active');
 
$('myElement').setStyle('border', '1px solid blue');
$('myElement').set('styles', {'border': '1px solid blue'});
 
//'styles'属性设置的对象值会进一步传递给Element:setStyles方法
var body = $(document.body).set('styles', { 
    'font': '12px Arial',
    'color': 'blue'
});
 
$('mylink').set('href',newHref);
$('myImg').set('src', newUrl);
$('myImg').set('alt', 'The cake is a lie');

使用属性键值对对象:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$('myImg').set({
    'src': '/foo.jpg',
    'alt': 'this is foo',
    //Class is a reserved word in JS,
    //so we must use quotes
    'class': 'fooClass',
    //In addition to standard attributes, you can also
    //use set for some special attributes defined by
    //MooTools
    'events': {
   		click: function(){ alert('click!');}
    },
    'styles': {
        border: '1px solid blue',
        marginTop: '10px'
    },
    etc...
});
 
//另一个例子
var myElement = $('myElement').set({
    //'styles'属性设置的对象值会进一步传递给Element:setStyles方法
    'styles': {
        'font': '12px Arial',
        'color': 'blue',
        'border': '1px solid #f00'
    },
    //'events'属性设置的对象之会进一步传递给Element:addEvents方法
    'events': {
        'click': function(){ alert('click'); },
        'mouseover': function(){ this.addClass('over') }
    },
    //其他设置的属性值会传递给Element:setProperty方法
    'id': 'documentBody'
});

备注:你可以通过set()设置 events, styles ,properties(src, href, value,title,alt,class,id,for 等等)和自定义属性,通过get()获取元素的属性(property) 。

Element.get

用于获取元素的属性值.

这是一个’动态参数’方法.

传入的参数可以是任意在Element.Properties中定义过类型.

它一次只能获得一个属性值。

语法:

myElement.get(property);

Example:

获取自定义的属性:

1
2
3
var tag = $('myDiv').get('tag'); //返回 "div".
var ih=$('myElement').get('html');//'myElement'元素的HTML代码
var it=$('myElement').get('text');//'myElement'元素的文本内容

获取原生属性:

1
2
3
4
5
6
//返回 "myDiv".
var id = $('myDiv').get('id');             
//返回 myInput元素的value属性值(myInput为input元素,具有原生value属性).
var value = $('myInput').get('value');  
//返回图片的 ‘http://.... ’  
$('myImg').get('src');

注意:

通过get()获取元素的属性(property) ,元素的属性是组成一个HTML元素的各种不同部分,例如id,name,value,href,src,class(如果有多个CSS类名,则将返回全部CSS类名,text等等,而不只是html标签名。

Element.setProperty

设置元素的一个属性。

语法:

var myProp = myElement.setProperty(property);

Example:

1
2
//设置ID 为‘myImage’的元素src属性
$('myImage').setProperty('src', 'mootools.png');

Element.getProperty

获取本元素的一个指定属性值。

语法:

var myProp = myElement.getProperty(property);

Example:

1
2
var imgProps = $('myImage').getProperty('src');
//返回ID 为‘myImage’的元素src属性值: 'mootools.png'.

Element.setPropertys

一次可以为同一个元素设置多个属性。

将一个 “名:值” 形式的对象设置为匹配元素的属性。

语法:

var myProps = myElement.setProperties({property :value,…});

Example:

HTML

1
<img id="myImage" />

JavaScript

1
2
3
4
5
//设置ID 为‘myImage’的元素的多个属性
$('myImage').setProperties({
   'src': 'whatever.gif',
   'alt': 'whatever dude'
});

Element.getPropertys

获取元素的多个属性值。

语法:

var myProps = myElement.getProperties(properties);

Example:

HTML

<img id="myImage" src="mootools.png" title="MooTools, the compact JavaScript framework" alt="" />

JavaScript

1
2
3
4
5
6
7
8
9
var imgProps = $('myImage').getProperties('id', 'src', 'title', 'alt');
/**返回: 
 *{ 
 *  'id': 'myImage', 
 *  'src': 'mootools.png', 
 *  'title': 'MooTools, the compact JavaScript framework', 
 *  'alt': '' 
 *}
 */

2.删除属性

在某些情况下,我们需要删除文档中元素的特定属性,它们是set(),setProperty()setProperties()的相反操作。我们可以使用 ‘动态参数’方法 erase() ,如果要删除的属性在Element.Properties中未定义, 则使用Element:removeProperty()和Element:removePropertys()来删除一个或多个属性。

Element.erase

用于删除元素的属性值.

这是一个’动态参数’方法. 传入的参数可以是任意在Element.Properties中定义过类型.

语法:

myElement.erase(property);

Example:

1
2
$('myDiv').erase('id');    //删除myDiv上的id
$('myDiv').erase('class');     //删除myDiv上的class属性

Element.removeProperty

删除元素的一个属性。

语法:

myElement.removeProperty(property);

Example:

1
$('img').removeProperty('alt');

Element.removeProperties

删除元素的多个属性。

语法:

myElement.removeProperties(properties);

Example:

HTML

<a id="myAnchor" href="#" title="hello world"></a>

JavaScript

1
$('myAnchor').removeProperties('id', 'href', 'title');

结果 HTML

<a></a>

样式操作

我们知道JavaScript允许你改变站点的CSS表示层。当我们想拥有更绚丽的页面和更吸引人的特效时,改变样式是极佳的做法。

我们最终的目的就是“把用户的注意力吸引到这些元素上”。

对于样式的操作无非就是修改,移除,添加,切换,获取 。

以上操作中我们经常用到的就是修改,而修改样式我们通常都采用修改style属性或改变class或id的方式。

在CSS中,我们通常不建议使用内嵌样式来设计元素的显示效果。同样,在JavaScript中也不推荐使用style属性来呈现元素的显示效果。

下面的代码就是使用元素的内联样式:

1
<div style="background-color:#F00;color:#FFF;width:200px;height:100px;"></div>

用JavaScrip改变元素显示效果的最佳方法是修改类。对于style属性的使用背景是在:‘需要动态计算CSS值的情况下才建议使用的’。例如,在页面上移动对象(如跟随鼠标指针),或者对特定属性实现动画效果(如黄褪技术,也就是让元素先为黄色,然后逐渐淡出,渐渐恢复成背景色)。

注意: HTML元素的style属性让我们得以访问该元素的内联样式。

以下就是MooTools为我们提供的样式操作方法,它给我们的开发带来了极大方便。

注意:MooTools提供的setStyle(),setStyles()方法设置的样式为内联样式。如果不想设置为内联样式,我可以通过上面学过的set(),setProperty()方法来设置元素的class和id选择器,最终结果是通过内嵌样式表或是链入式样式表来设置样式的。当我们的元素想拥有多个css class类时,我们需要addClass()方法来追加样式。

作为Example演示的HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">(X)Html / Css</a></li>
      <li><a href="#">Ajax / RIA</a></li>
      <li><a href="#">GoF</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">JavaWeb</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">MooTools</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">Resources</a></li>
</ul>

1.获取和设置样式表属性

Element.setStyle

这个函数可以允许你设置一个元素的样式属性。我们在前面的一些例子中已经使用过了。你要做的就是把它放在你的 选择器之后,那么它将改变一个元素或者多个元素的样式属性。

语法:

myElement.setStyle(property, value);

Example:

1
2
3
4
//给id为‘menu’的ul元素设置背景色
$('menu').setStyle('background-color', '#eeeeee'); 
//给所有的li元素下的a元素设置背景色
$$('li a').setStyle('background-color', '#369');

Element.getStyle

同样,这个方法就像它的字面意思一样。.getStyle();将返回一个元素的一个CSS属性值。

语法:

var style = myElement.getStyle(property);

Example:

1
2
3
//获得id为'menu'的ul元素的背景色
$('menu').getStyle('background-color'); 
//返回“#eeeeee”

Element.setStyles

.setStyles();就像你所想象的那样,可以让你一次给一个元素或者一个元素数组设置多个属性值。为了能够同时设置多个样式表属性值,.setStyles();的语法与setStyle();的语法相比略有一点不同。

语法:

myElement.setStyles(styles);

styles – (object) CSS属性’名/值’对象

Example:

1
2
3
4
5
6
7
8
// 还是从你的选择器开始,然后在后面加上.setStyles({});格式为:'property': 'value',....
$('menu').setStyles({
   'width': '1000px',
   'height': '1000px',
   // 特别注意:最后一个属性没有逗号 
   // 如果有逗号,将不能跨浏览器
   'background-color': '#eeeeee'
});

注意:实际上,属性选择器也可以不需要单引号,除非属性名中有连接符“-”,比如在“background-color”中,为了保持简单,给每个属性选择器都加上单引号更容易一些。

同时也要注意:属性值可能更灵活多变一些(比如“100px”或者“#eeeeee”)。除了字符串(一个只有字母的串,我们会在以后的教程中更深入地讲解这个),你也可以传入数字(这可能在大多数情况下会被解释为px)或者变量而不需要引号。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 这个把变量setBGColor的值设置为字符串(String)'#eeeeee'
var setBGColor = '#eeeeee';
 
// 你可以把一个变量传递给另外一个变量 
// 这使得变量BGColor的值也等于字符串(String)'#eeeeee'
var BGColor = setBGColor;
 
// 这个把变量divWidth的值设置为数字(Number)500
var tagWidth = 500;
 
$('menu').setStyles({
    // 在这种情况下,变量名是不需要用引号包围起来的
    'width': tagWidth,
    // 数字也一样,不需要引号包围
    'height': 1000,
     // 另外一个变量
    'background-color': BGColor,
    // 字符串就是用单引号引起来的一系列字符组成的串
    'color': 'black'
});

Element.getStyles

这个方法可以让你一次获得一个元素的多个样式属性。这个和我们看到的上面的略有一些不同,因为它包含了多个数据集,每个数据集有一个键(key,属性名)和一个值(value,属性值)。这个数据集叫做对象,.getStyles();方法可以非常容易地把多个属性值放入这些对象中,并可以很简单地把它们取回来。

语法:

var styles = myElement.getStyles(property[, property2[, property3[, …]]]);

Example:

1
2
3
4
//获得一个元素的多个样式属性值
var ss=$('menu').getStyles('width', 'height', 'background-color');
//通过ss对象,指定属性的名(键)来得到一个值
alert(ss['background-color']);

注意:如果你要从你的样式表对象中取得一个单独的属性,首先取得一个对象变量(在这个例子中是“ss”),然后使用方括号和单引号([”]),最后填入属性名key(如width或者background-color)。

2.追加样式

Element.addClass

如果指定样式名在元素上不存在,则添加该样式名。

它就是添加指定的一个或多个类名称到指定的元素。

语法:

myElement.addClass(classNames);

classNames – 一个字符串,包含将要删除的一个类名称,或者包含空格分隔的,将要删除的多个类名称。

Example:

HTML CODE

1
<div id="myElement" class="testClass"></div>

JavaScript CODE

1
$('myElement').addClass('newClass');

结果 HTML

1
<div id="myElement" class="testClass newClass"></div>

3.移除样式

Element.removeClass

将指定样式名从元素上删除。

从元素里删除指定的一个或多个类名称。

语法:

myElement.removeClass(classNames);

classNames – 一个字符串,包含将要删除的一个类名称,或者包含空格分隔的,将要删除的多个类名称。

Example:

HTML CODE

1
<div id="myElement" class="testClass newClass"></div>

JavaScript CODE

1
$('myElement').removeClass('newClass');

结果 HTML

1
<div id="myElement" class="testClass"></div>

4.切换样式

Element.toggleClass

添加/删除元素上指定的样式名。

如果在元素中指定的类名称不存在,则添加指定类名称;如果元素已拥有指定类名称,则从元素中删除指定类名称。请注意,每个元素单独测试,所以元素被添加类名称,而其他则被删除类名称。

语法:

myElement.toggleClass(className);

Example:

HTML CODE

1
<div id="myElement" class="myClass"></div>

JavaScript CODE

1
$('myElement').toggleClass('myClass');

结果 HTML

1
<div id="myElement" class=""></div>

JavaScript

1
$('myElement').toggleClass('myClass');

结果 HTML

1
<div id="myElement" class="myClass"></div>

5.判断是否含有某个样式

Element.hasClass

检测元素上是否包含指定的样式名。

语法:

var result = myElement.hasClass(className);

Example:

HTML CODE

1
<div id="myElement" class="testClass"></div>

JavaScript CODE

1
$('myElement').hasClass('testClass'); //返回 true

设置和获取HTML ,文本和值

Mootools内置的自定义属性,通过set()和get()可以操作JavaSscript中的innerHTML属性,innerText属性,value属性。

下面就是几个默认的自定义属性:

html – gets and sets the inner html
text – gets and sets the text value of a node
tag – gets the tag of a node
value – gets the value of an input

具体介绍如下:

1.Element 属性: html (设置和获取 innerHTML)

此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某一个元素中的HTML内容。

语法:

设置:myElement.set(‘html’, [htmlString[, htmlString2[, htmlString3[, ..]]]);

获取:myElement.get(‘html’);

Example:

1
2
3
4
//设置素的innerHTML ,参数为‘HTML字符串’
$('myElement').set('html', '<div></div>', '<p></p>');
//返回本元素的innerHTML
myElement.get('html');

2.Element 属性: text (设置和获取 innerText)

此方法类似于JavaScript中的innerText属性,可以用来读取或者设置某一个元素中的文本内容。

语法:

设置:myElement.set(‘text’, text);

获取:var myText = myElement.get(‘text’);

Example:

1
2
$('myElement').set('text', 'some text'); //myElement内的文本变成'some text'
var myText = $('myElement').get('text'); //myText = 'my text'.

 

3.Element 属性: tag (获取标签名)

获取元素的标签名。

返回元素的标签名为小写。

语法:

获取:var myTag = myElement.get(‘tag’);

Example:

1
var myTag = $('myImage').get('tag'); // myTag = 'img'.

4.Element 属性: value (获取和设置输入值)

此方法类似于JavaScript中的value属性,可以用来设置和获取元素值。

语法:

设置:myElement.set(‘value’, value);

获取:myElement.get(‘value’);

Example:

HTML CODE

1
2
3
4
<form id="myForm" action="submit.php">
    <input  id="email" name="email" value="bob@bob.com" />
    <input  id="fullName" name="fullName" value="" />
</form>

JavaScript CODE

1
2
$('email').get('value'); 
$('fullName').set('fullName');

5.toQueryString ()和getSelected ()

Element.toQueryString

读取子元素中的数据输入元素(如input, select等)的值, 并生成查询字符串

语法:

var query = myElement.toQueryString();

Example:

HTML CODE

1
2
3
4
<form id="myForm" action="submit.php">
    <input name="email" value="bob@bob.com" />
    <input name="zipCode" value="90210" />
</form>

JavaScript CODE

1
$('myForm').toQueryString(); //返回 "email=bob@bob.com&zipCode=90210".

Element.getSelected

返回下拉列表框元素中的选中项。

本方法返回的总是一个数组,不管选中多少项。

语法:

var selected = mySelect.getSelected();

Example:

HTML CODE

1
2
3
4
<select id="country-select" name="country">
    <option value="US">United States</option
    ><option value ="IT">Italy</option>
</select>

JavaScript CODE

1
$('country-select').getSelected();

站点统计