(二) mootools的DOM操作

上一篇概述了Mootools的core部分的各个模块，代码例子中包含了如何注册domready的事件处理函数以及使用Class类型实现OO的简单例子，这一篇将详细介绍Mootools在dom元素选择器方面的支持以及dom的常用操作。

mootools的DOM操作

目录:

mootools选择器&DOM操作

Element类型与HTML dom元素的关系

获得dom节点对象的三种主要方法

通过id获得dom节点对象 : document.getElementById方法 与 美元符号 $

通过某个节点对象获得其子节点对象

通过选择器在页面中查找获得节点对象 与 双美元符号$$

主要的dom操作api

 (一)注入 inject

       将hello注入为content的首位子节点

将hello注入为content的末尾子节点

将hello注入到content的前面

将hello注入到content的后面

不指定位置

（二）霸占 grab

霸占作为自己的首位子节点

其他例子：

（三） 吸收 adopt

（四）替换 replaces

（五）包裹 wraps

（六） 其他

总结

Element类型与HTML dom元素的关系

一个Element类型的对象对应一个HTML dom节点对象，通过mootools的api获得的dom节点对象与原生的dom节点对象在使用上毫无差别，不过mootools给这个原生的dom节点对象附加了一些功能，使得它能够方便的调用dom操作或其他api。

 

获得dom节点对象的三种主要方法

通过id获得dom节点对象 : document.getElementById方法 与 美元符号 $

javascript支持使用document.getElementById(idAttr)来获得一个dom节点对象，其中参数idAttr是节点的id属性值，mootools提供一个方法同样可以通过id获得dom节点对象，这个方法是document.id(idAttr), 参数idAttr同样是节点的id属性值，这个方法的内部还是通过原生的document.getElementById获得一个dom节点，然后包装成Element类型返回。

 

document.id方法在mootools里有一个别名 $

如果你想获的这个标签对应的dom节点对象

<div id="main"></div>

 则你可以通过调用

 

document.id('main')
//或者
$('main')

 

两种方式的效果完全一样。 另外，出于兼容性的考虑，在页面加载mootools.js时，如果你的js环境中已经定义了全局的$变量，那么mootools将不会覆盖$变量, 此时$就不具有document.id的功能。

 

通过某个节点对象获得其子节点对象

<div id="contain">
    <a href="#">第一个a标签</a>
    <a href="#">第二个a标签</a>
    <span class="msg">class属性为'msg'的span标签</span>
    <div id="content">id属性为'content'的div标签</div>
</div>

//获得容器节点对象
var containEl = $('contain');

//某个节点对象调用getElement，则按照指定选择器返回子节点中第一个满足选择器的节点对象，如果找不到则返回undefined
//某个节点对象调用getElements，则按照指定选择器返回子节点中所有满足选择器的节点对象，返回一个(类似)数组，若找不到则返回空数组

//通过标签名, 获得容器节点对象下的第一个a标签节点
var firstAnchorEl = containEl.getElement('a');
//通过class属性，获得容器节点对象下的第一个class属性为'msg'的节点
var firstElByClassMsg = containEl.getElement('.msg');
//通过id属性，获得容器节点对象下的第一个id属性为'content'的节点
var firstElByIdContent = containEl.getElment('#content');

//通过标签名, 获得容器节点对象下的所有a标签节点
var anchorEls = containEl.getElements('a');

 

 我们可以对某个节点对象调用getElment(selector),并指定一个选择器 (css主流选择器),然后返回该该节点的子节点中第一个满足选择器的节点对象,如果没有合适的子节点则返回undefined；如果想获得多个子节点则使用 getElements(selector)方法返回一个数组，如果没有合适的子节点，则返回空数组。

 

通过选择器在页面中查找获得节点对象 与 双美元符号$$

mootools支持在页面中通过选择器查找并获得满足选择器的节点对象的集合，使用上面的html代码（选择器部分可以参考w3c的css选择器教程《css选择器》）

 

<div id="contain">
    <a href="#">第一个a标签</a>
    <a href="#">第二个a标签</a>
    <span class="msg">class属性为'msg'的span标签</span>
    <div id="content">id属性为'content'的div标签</div>
</div>

 

//获得页面中id属性为'contain'节点下的第一个a标签节点组成的集合
var aEls = $$('#contain > a');
var length = aEls.length;//返回 1

//获得页面中id属性为'contain'节点下的所有a标签节点组成的集合
aEls = $$('#contain a');
length = aEls.length;//返回 2

//获得页面中id属性为'contain'节点下的class属性为'msg'的节点组成的集合
var msgEls = $$('#contain .msg');
length = msgEl.length;//返回 1

//获得页面中id属性为'content'的div标签节点组成的集合
var divEls = containEl.getElment('#content');
length = msgEl.length;//返回 1

//获取页面中class属性为'nothing'的节点组成的集合
var nothingEls = containEl.getElment('.nothing');
length = nothingEls.length;//返回 0

 

主要的dom操作api

 

(一)注入 inject

某个元素节点调用inject方法,可以将该节点注入到某个指定节点的 前面/后面/首个子节点/末尾子节点，例子如下：

最初的htlm页面：

 

<div id="hello">Hello World</div>

<div id="main">
    <div id="title">Language</div>
    <div id="content">
        <div id="subtitle">Javascript</div>
    </div>
</div>

 分别获取id为'hello'和'content'的节点

 

//注释中hello表示id为'hello'的节点，content表示id为'content'的节点,...
//获取hello节点,content节点
var hello = $('hello'),
      content = $('content');

 1.将hello注入为content的首位子节点

//将hello注入为content的首位子节点
hello.inject(content, 'top');

效果：

<div id="main">
    <div id="title">Language</div>
    <div id="content">
        <div id="hello">Hello World</div>
        <div id="subtitle">Javascript</div>
    </div>
</div>

 

2.将hello注入为content的末尾子节点

//将hello注入为content的末尾子节点
hello.inject(content, 'bottom');

效果：

<div id="main">
    <div id="title">Language</div>
    <div id="content">
        <div id="subtitle">Javascript</div>
        <div id="hello">Hello World</div>
    </div>
</div>

 

3.将hello注入到content的前面

//将hello注入到content的前面
hello.inject(content, 'before');

 效果：

<div id="main">
    <div id="title">Language</div>
    <div id="hello">Hello World</div>
    <div id="content">
        <div id="subtitle">Javascript</div>
    </div>
</div>

 

4.将hello注入到content的后面

//将hello注入到content的后面
hello.inject(content, 'after');

 效果:

<div id="main">
    <div id="title">Language</div>
    <div id="content">
        <div id="subtitle">Javascript</div>
    </div>
    <div id="hello">Hello World</div>
</div>

  5.不指定位置

//不指定位置，默认为'bottom'
hello.inject(content/*,'bottom'*/);

 效果：

<div id="main">
    <div id="title">Language</div>
    <div id="content">
        <div id="subtitle">Javascript</div>
        <div id="hello">Hello World</div>
    </div>
</div>

 

（二）霸占 grab

grab方法是跟inject相对的， a.inject(b, 'top') 相当于 b.grab(a, 'top');只举一个例子，基于inject例子的html代码

霸占作为自己的首位子节点

 

//content霸占hello,作自己的首位子节点
content.grab(hello, 'top');

 

 效果：

<div id="main">
    <div id="title">Language</div>
    <div id="content">
    <div id="hello">Hello World</div>
        <div id="subtitle">Javascript</div>
    </div>
</div>

 其他例子：

//content霸占hello,作自己的首位子节点
content.grab(hello, 'top');
//content霸占hello,作自己的末尾子节点
content.grab(hello, 'bottom');
//content霸占hello,放到自己前面
content.grab(hello, 'before');
//content霸占hello,放到自己后面
content.grab(hello, 'after');
//不指定位置，默认为'bottom'
content.grab(hello/*,'bottom'*/);

 

（三） 吸收 adopt

父容器可以吸收多个元素作为自己的子节点，子节点的顺序按照参数的顺序

原始页面：

 

<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>

<div id="wrap"></div>

//注释中first表示id为'first'的节点，...
//获取wrap节点,first节点,first节点,second,third
var wrap = $('wrap'),
    first = $('first'),
    second = $('second'),
    third = $('third');

//让wrap依次吸收first，second，third
wrap.adopt(first, second, third);

效果：

 

<div id="wrap">
    <div id="first">first</div>
    <div id="second">second</div>
    <div id="third">third</div>
</div>

 

另外，adopt的参数可以是多个节点对象，也可以是数组，最终调用会把参数中元素或者数组打平，总是把用户传入的所有参数中的节点对象接受，例如下面多种参数，效果一样：

 

//让wrap依次吸收first，second，third
wrap.adopt([first, second, third]);
wrap.adopt(first, [second, third]);
wrap.adopt(first, [[second], third ]);
wrap.adopt([first, second], third);

（四）替换 replaces

//用某个节点替换另一个节点，这之后old将离去，new占据old原来的文档位置
$('new').replaces($('old'));

 

（五）包裹 wraps

该方法跟grab类似，但是调用者节点会替换参数节点的位置，效果相当于grap和replaces的组合

 

//$('a')节点替换$('b')节点，并且把$('b')节点霸占为自己的首位子节点
$('a').wraps($('b'), 'top')

//效果等同于下面代码
var b = $('b');
var a = $('a');
a.replaces(b).grab(b, 'top');

 

(六)其他

其他元素节点的操作，例如增加本文、修改class属性、拷贝节点等等，请参考官方文档的Element部分

总结

本文首先介绍了Element类型与浏览器dom节点对象的关系，然后介绍三种最主要的获取dom元素节点对象的方法，最后着重介绍五个常用的dom操作api