上一篇概述了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
- day02_code.zip (2.8 KB)
- 下载次数: 5
相关推荐
Ajax开发中,做的最多的就是对DOM的操作,增删节点,设置样式等等等等,所以基本上每个javascript框架都会在DOM操作上花比较大的功夫,对我mootools提供了一套非常出色的解决方案,并且更OO。
压缩的核心代码仅仅50k,包括了javascript类型检查,强制类型,精密且灵活的事件模型,自定义事件,observer和tie/untie,boxing/unBoxing/reBoxing模型,直接调用,dom生成,查询,遍历和操作,css样式操作,css类...
内容: 封装一些常用的 DOM 操作 (1).直接可以在xhtml 中进行操作元素. 而不用嵌套在标签中使用 javascript操作.
在上一篇教程——《Mootools 1.2教程(2)——DOM选择器》中,我们介绍了一下选择器,其中有很多方法就会返回数组(一个你可以对其中内容进行多种操作的特殊列表)。
以简洁高效的方式查询,获取和操作URI中的哈希数据 快速轻松地浏览本地历史记录“智能存储库” 注册和注销强大的URI观察器事件(可以轻松地与DOM关联),能够满足您的所有需求 序列化当前哈希会话(对其快照),以...
原味的js,只是用到ajax的时候会选择mootools的xhr包,辛苦的操作dom这么久了觉得也是时候启用便捷的框架提高效率了
所有这些框架都提供针对常见 JavaScript 任务的函数,包括动画、DOM 操作以及 Ajax 处理。 在本教程中,您将学习到如何开始使用它们,来使得 JavaScript 编程更容易、更安全且更有乐趣。 jQuery j
当你刚入门时,利用jQuery是一件非常奇妙的事,主要是因为它的DOM操作。首先,DOM对于入门者来说可能是相对困难的事情;其次用它我们几乎可以不用考虑跨浏览器兼容的问题。在这个教程中,我们将试着从头开始实现一个...
当你刚入门的时候,方便的DOM(文档对象模型)操作让你觉得JQuery这样的东西非常棒。这是因为:首先,对于新手来说DOM太难理解了;当然,对于一个API来说难以理解可不是什么好事。其次,浏览器间的兼容性问题非常令...
这里我们使用 jQuery 来操作 DOM 元素,当然你也可以使用其他的库,例如 MooTools 或者 Sizzle,但是 Backbone 的官方文档推荐我们使用 jQuery。 接下来,我们以搜索框为例来新建一个 View: SearchView = Ba
创建一个JS APP没有好的工具是很有难度的,jQuery只是操作DOM的库,没有提供任何创建APP的基础,这就是为什么我们要一个类似CanJS的专门的库。 CanJS 是一个轻量级的MVC库,提供你创建一个JS APP所需的工具。 CanJS...
·attribute(改进了.attr()的性能)、jQuery()核心函数、CSS(.css()性能有两倍提升)、特效和事件、DOM操作等也有显著改进 1.5 美国时间1月31日John Resig在jQuery官方博客发表文章,宣布jQuery 1.5正式版已经...
Safari 2 3575ms 475ms 753% Opera 9.1 3196ms 326ms 980% Average improvement: 867% <br>下表为jQuery1.1.3与常用的一些JS库选择器的对比: Browser Prototype jQuery Mootools Ext Dojo ...