MooTools DOM 之 Accessing elements(访问元素)

依据我在《MooTools DOM 基本介绍与分类》中的分类,专门收集DOM元素的快捷方式有$, $$。

其它的 getElement(),getElements (),getElementById()有类似于快捷方式一样的功能,但是它们必须依附Elements.

为了我们能全面的讲解DOM操作,我们需要构建一个网页。因为所有的网页都能用DOM表示出来,DOM定义了一系列的对象、方法和属性,用于访问、操作和创建文档中的内容、结构、样式以及行为。所以说网页是DOM操作的基础,是JavaScript 与 HTML 沟通的桥梁。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM</title>
</head>
<body>
<h2 title="我的导航条">CssRainBow.cn 的导航条</h2>
<ul id="menu">
      <li><a href="http://blog.moocss.com/">Home</a></li>
      <li><a href="http://blog.moocss.com/index.php/category/xhtml-css" title="WEB Standards,Xhtml,Html,CSS+DIV,CSS布局,Css效果,Css学习,UI,Dreamweaver">(X)Html / Css</a></li>
      <li><a href="http://blog.moocss.com/index.php/category/ajax-ria" title="Ajax , ExtJS , Ajax in JavaScript Framework , RIA in JavaScript/Ajax ,  jQuery UI , Prototype UI , DWR ,JavaFX , Flex , RichFaces">Ajax / RIA</a></li>
      <li><a href="http://blog.moocss.com/index.php/category/gof" title="GoF,设计模式,Java 设计模式,JavaScript 设计模式">GoF</a></li>
      <li><a href="http://blog.moocss.com/index.php/category/javascript" title="JavaScript技术 , JavaScript学习 , JavaScript应用 , JavaScript DOM , JavaScript 设计模式">JavaScript</a></li>
      <li><a href="http://blog.moocss.com/index.php/category/javaweb" title="JavaWeb开发(JAVA , JSP , Java Server Faces, RichFaces ,DWR ,GWT-Ext ,GWT)">JavaWeb</a></li>
      <li><a href="http://blog.moocss.com/index.php/category/jquery" title="jQuery技术,jQuery框架开发的控件,jQuery插件,jQuery学习,jQuery实战">jQuery</a></li>
      <li><a href="http://blog.moocss.com/index.php/category/mootools" title="MooTools - My Object Oriented JavaScript Tools.">MooTools</a></li>
      <li><a href="http://blog.moocss.com/index.php/category/python" title="Python学习 , PythonWeb开发 , Django 学习">Python</a></li>
      <li><a href="http://blog.moocss.com/index.php/category/resources" title="项目文档,开发文档,软件推荐">Resources</a></li>
</ul>
</body>
</html>

注意:
在MooTools以前的老版本中 getElement和getElements都是有别名函数,$E()是getElement()的别名函数,$ES()是getElements()的别名函数。在MooTools最新版1.2.3中被移除了。
如果你觉的这些小巧的函数有用的话,只需在你的代码中加入如下代码,你就可以拥有这些别名函数。

扩展的函数:

1
2
3
4
5
6
7
8
Window.implement({
   $E:function(selector,scope){
      return ($(scope)||document).getElement(selector);
   },
   $ES:function(selector,scope){
      return ($(scope)||document).getElements(selector);
   }
});

$ :: Element/Element.js

$函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。

作用:

$方法有两个目的:

1.按id来获取元素

2.让Internet Explorer下所有元素获得Element所提供的扩展方法

语法:

var myElement = $(el);

参数:

el – (mixed) DOM元素的id或DOM元素的引用

返回值:

(mixed) 如果取得指定的DOM元素,则返回该元素; 否则返回null 。

Example:

1
2
3
4
window.addEvent('domready', function() {
	//选择ID为”menu“的元素,并给为此元素设置一个CSS属性。							 
	$('menu').setStyle('background','#369');
});

Element.getElement

.getElement();扩展了$方法,可以让你简化你的选择操作。

例如,你可以通过$方法来选择ID为”menu“的元素,然后选择第一个子节点。.getElement();只选择一个元素,如果有多个符合要求的元素则返回第一个元素。如果你给.getElement();方法一个CSS的ID名作为参数,你就会得到第一个有这个CSS的ID名的元素,而不是函数所有元素的数组。要选择多个元素,则可以使用下面的.getElements();方法。

作用:

获取本元素下的第一个指定标签名的子元素.

如果使用了Selectors,则可以使用CSS选择器.

语法:

var myElement = myElement.getElement(tag);

参数:

tag – (string) 要查找的元素标签名

返回值:

(mixed) 如果找到符合的子元素,则返回该子元素;否则返回null

Example:

1
2
3
4
5
6
7
8
window.addEvent('domready', function() {
    //获取ID为menu下的第一个li元素
   $('menu').getElement('li').setStyle('background','#369');
   //同样的作用
   $('menu').getElement('li#c1').setStyle('background','#369');
   //同样的作用
   $('menu').getElement('#c1').setStyle('background','#369');
});

备注:

Document类的实例上也有相应的本方法。
当使用了Selectors后,本方法将被使用CSS选择器的新方法替代。
Selectors 可对 Element:getElements 进行功能加强, 使用后可基于CSS选择器进行元素查找

$$:: Element/Element.js

$$函数可以可以让你快速选择多个元素,并组成一个数组(一种你可以操作、获取和以任何方式重新排序的列表)。你可以通过标签名(如div、a、img等)、或者ID或者是他们的各种组合来选择多个元素。

当$$()使用CSS选择器时语法来获取元素节点是,它就能以最少的代码做最多的事情。你可以用CSS1,CSS2和部分的CSS3选择器的风格来查找元素,利用MooTools选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为,而不用担心浏览器是否支持这一选择器。学会使用选择器是学习MooTools的基础,MooTools大多数的行为规则都是在获取到元素后才能应用。在这里我们不会讲,我们会把MooTools的Element. Selectors作为一个专题来讲。

作用:

获取并扩展一组DOM元素.

获取到的元素数组中的每个元素都获得了Element中的方法。

当Selectors模块加载后, $$ 可以接受功能丰富的CSS选择器. 否则,只支持最小程度的以元素标签名进行选择

语法:

var myElements = $$(aTag[, anElement[, Elements[, …]);

参数:

接受任意个数的参数, 参数类型如下: HTMLCollections, 元素数组, 多个单独的元素, 或者CSS选择器字符串

返回值:

(array) – 符合条件的元素数组, 元素都经过$的扩展

Example:

1
2
3
4
5
6
7
8
/*由标签名获取元素:*/
$$('a');      //获取页面中所有的<a>超链接元素
$$('a', 'b');     //获取页面中所有的<a>超链接元素和粗体字元素
/*使用CSS选择器(当Selectors模块包含在源代码中时):*/
$$('#myElement');             //返回一个数组,数组中只有一个id为'myElement'的元素
$$('#myElement a.myClass'); //返回id为'myElement'的元素下的所有class为'myClass'的超链接元素
/*更复杂的 $$ 用法:*/
$$(myelement1, myelement2, 'a', '#myid, #myid2, #myid3', document.getElementsByTagName('div'));

注意:

我们都知道CSS选择器为我们文档中应用的样式提供了灵活多样的选择。同样的道理,在我们MooTools 的$$()函数中只要使用了CSS表达式,就可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为,无需担心浏览器是否支持这一选择器。与其它的支持CSS选择器的MooTools 方法相比,$$ 接受的CSS选择器最为丰富。

Element.getElements

.getElements();和.getElement();非常类似,不过它返回所有符合要求的元素,并组成一个数组。你可以像使用.getElement();方法那样使用.getElements();。

作用:

获取本元素下所有指定标签名的子元素.

如果使用了Selectors,则可以使用CSS选择器.

语法:

var myElements = myElement.getElements(tag);

参数:

tag – (string) 要查找的元素标签名

返回值:

(array) 一个包含找到的元素数组(Elements)

Example:

1
2
3
4
5
6
//获取ID为menu元素下标签名为li的所有元素数值
$('menu').getElements('li').setStyle('background','#369');
//获取ID为menu元素下为li的所有a元素
$('menu').getElements('li a').setStyle('background','#369');
//获取ID为menu元素中所有的<a>li 元素 和 a 元素
$('menu').getElements('li,a').setStyle('background','#369');

Element.getElementById

此方法的作用和 $()一样;给它传递一个ID,并返回与之相匹配的第一个孩子元素。

作用:

获取本元素下指定id的子元素。

这个方法并没有去覆盖原有的document.getElementById ,Document实例的该方法还是原生方法。

语法:

var myElement = anElement.getElementById(id);

参数:

id – (string) 子元素id

返回值:

(mixed) 如果找到符合条件的子元素,则返回该子元素; 否则返回null

Example:

1
2
3
4
5
6
//返回ID为menu里的第一个c1 子元素
var a= $('menu').getElementById('c1');
alert(a.get('html'));
//推荐用法
var b=$('menu').getElement('#c1');
alert(b.get('html'));

站点统计