MooTools DOM 之 Manipulating elements(操纵元素)

By Rainbow on 2009-10-16 // JavaScript // 4988 Views+ // (1) Comments

根据在《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:

使用’属性-值’:

$('myElement').set('html', '&lt;div&gt;new html!我是一个类似于JavaScript中innerHTML属性的操作.&lt;/div&gt;');
$('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');

使用属性键值对对象:

$('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'元素的文本内容

获取原生属性:

//返回 "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

//设置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

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代码:

<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:

//给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:

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

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

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

// 这个把变量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:

//获得一个元素的多个样式属性值
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:

//设置素的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

<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

<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

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

JavaScript CODE

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

Developer ≈ Designer ≈ UI/UX , Googler, Githuber

MooTools DOM 之 Manipulating elements(操纵元素)

属性操作

1.获取属性和设置属性

Element.set

Element.get

Element.setProperty

Element.getProperty

Element.setPropertys

Element.getPropertys

2.删除属性

Element.erase

Element.removeProperty

Element.removeProperties

样式操作

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

Element.setStyle

Element.getStyle

Element.setStyles

Element.getStyles

2.追加样式

Element.addClass

3.移除样式

Element.removeClass

4.切换样式

Element.toggleClass

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

Element.hasClass

设置和获取HTML ，文本和值

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

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

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

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

5.toQueryString ()和getSelected ()

Element.toQueryString

Element.getSelected

相关推荐

文章评论已经有 1 条评论！

属性操作

1.获取属性和设置属性

Element.set

Element.get

Element.setProperty

Element.getProperty

Element.setPropertys

Element.getPropertys

2.删除属性

Element.erase

Element.removeProperty

Element.removeProperties

样式操作

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

Element.setStyle

Element.getStyle

Element.setStyles

Element.getStyles

2.追加样式

Element.addClass

3.移除样式

Element.removeClass

4.切换样式

Element.toggleClass

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

Element.hasClass

设置和获取HTML ，文本和值

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

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

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

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

5.toQueryString ()和getSelected ()

Element.toQueryString

Element.getSelected

相关推荐

文章评论 已经有 1 条评论！

站点统计

文章评论已经有 1 条评论！