MooTools-DOM操作

MooTools 是一款优秀的 JavaScript 框架，提供了一些方便的 DOM 操作方法，可以帮助程序员快速地操作 DOM 元素，并且可以通过链式调用的方式实现连续执行多个操作。

获取 DOM 元素

使用 $() 函数可以获取指定 CSS 选择器的 DOM 元素，该函数返回一个 Element 对象，可以调用其他的 DOM 操作方法。

// 获取 id 为 "content" 的元素对象
var element = $('content');

// 获取 class 为 "items" 的元素列表
var list = $$('.items');

DOM 操作

添加元素

使用 inject 方法可以将一个 DOM 元素插入到另一个 DOM 元素中，该方法支持四个位置参数，分别为 before, after, top, bottom。

// 在 id 为 "content" 的元素最后添加一个 "p" 标签
var element = new Element('p', {html: 'Hello, World!'}).inject($('content'));

// 在 id 为 "content" 的元素前面添加一个 "div" 标签
var element = new Element('div', {html: 'Hello, World!'}).inject($('content'), 'before');

移除元素

使用 dispose 方法可以将一个 DOM 元素从 DOM 树中删除。

// 将 id 为 "content" 的元素从 DOM 树中删除
$('content').dispose();

替换元素

使用 replaceWith 方法可以将一个 DOM 元素替换成另一个 DOM 元素。

// 将 id 为 "content" 的元素替换成一个 "div" 元素
var newElement = new Element('div', {html: 'Hello, World!'});
$('content').replaceWith(newElement);

隐藏/显示元素

使用 hide 和 show 方法可以隐藏和显示元素。

// 隐藏 id 为 "content" 的元素
$('content').hide();

// 显示 id 为 "content" 的元素
$('content').show();

设置/获取元素属性

使用 set 和 get 方法可以设置和获取元素的属性。

// 设置 id 为 "content" 的元素的 "class" 属性为 "active"
$('content').set('class', 'active');

// 获取 id 为 "content" 的元素的 "class" 属性值
var className = $('content').get('class');

设置/获取元素样式

使用 setStyle 和 getStyle 方法可以设置和获取元素的样式。

// 设置 id 为 "content" 的元素的宽度为 200px，高度为 100px
$('content').setStyle('width', '200px');
$('content').setStyle('height', '100px');

// 获取 id 为 "content" 的元素的宽度和高度
var width = $('content').getStyle('width');
var height = $('content').getStyle('height');

添加/移除元素类名

使用 addClass 和 removeClass 方法可以添加和移除元素的类名。

// 添加 id 为 "content" 的元素的 "active" 类名
$('content').addClass('active');

// 移除 id 为 "content" 的元素的 "active" 类名
$('content').removeClass('active');

链式调用

MooTools 的 DOM 操作方法支持链式调用，使得多个操作可以在同一个语句中执行。

$('content')
  .addClass('active')
  .set('data-value', '123')
  .setStyle('width', '200px')
  .inject($('container'), 'bottom');

上述代码中，首先选择了 id 为 "content" 的元素，然后分别添加了一个名为 "active" 的类名，设置了一个名为 "data-value" 的属性，设置了宽度为 200px 的样式，最后将该元素插入到 id 为 "container" 的容器元素中的底部。