搜索:
首页 >> JavaScript >> Js高级编程 >> Mootools 1.2教程(6)——操纵HTML DOM元素

Mootools 1.2教程(6)——操纵HTML DOM元素

2008-11-20 作者:Fdream 来源:Fdream博客 投递文章

原文地址:30 Days of Mootools 1.2 Tutorials - Day 6 - Manipulating HTML

通过Mootools 1.2来操纵HTML DOM元素

上一篇:Mootools 1.2教程(4)——函数

我们已经学习过如何来选取DOM元素,怎么创建数组,怎么创建函数,怎么把事件添加到元素,今天我们来深入地学习一下如果操纵HTML元素。通过MooTools 1.2,你可以添加新元素到一个HTML页面中,也可以删除元素,以及改变任何样式或者元素参数,这些都非常容易。

基本方法

.get();

这个工具可以让你获取元素的属性(property)。元素的属性是组成一个HTML元素的各种不同部分,例如src、value、name等等。使用.get();方法非常简单:

参考代码:

// 下面这行将返回id为“id_name”的元素的html标记名(div、a、span……)
$('id_name').get('tag');

参考代码:

<div id="body_wrap">
    <span id="id_name">Element</span> <!-- 上面的代码将返回“span” -->
</div>

你可以使用.get();方法获得更多属性,而不只是html标记名:

  • id
  • name
  • value
  • href
  • src
  • class(如果有多个CSS类名,则将返回全部CSS类名)
  • text (一个元素的文本内容)
  • 等等…

.set();

.set();方法和.get();方法一样,不过不是获得一个值,而是设置一个值。当和事件联合使用时比较有用,通过这个方法你可以在页面加载之后改变一些属性值。

参考代码: 
// 这将设置id为id_name的元素链接地址为“http://www.aspxhome.com”
$('id_name').set('href', 'http://www.aspxhome.com');
参考代码: 
<div id="body_wrap">
    <!-- 上面的代码将改变链接地址为“http://www.google.com”  -->
    <a id="id_name" href="http://www.yahoo.com">Search Engine</a>
</div>

.erase();

通过.erase();方法,你可以清除一个元素的属性值。它和前面两个方法类似。选取元素,然后选择你要清除的属性。

参考代码: 
// 这讲移除id为id_name的元素的href属性
$('id_name').erase('href');
参考代码:
<div id="body_wrap">
    <!-- 上面的代码将清除链接地址 -->
    <a href="http://www.yahoo.com">Search Engine</a>
</div>

1   2  3  4 下一页 尾 页
Tags:mootools  dom  javascript  ajax  教程 
相关文章
手机版 Js高级编程 Asp之家 Aspxhome.com
闽ICP备06017341号