通过Mootools 1.2来操纵HTML DOM元素

使用Mootools 1.2库来操作HTML DOM元素非常简单，只需掌握一些基本知识即可。

基本概念

在使用Mootools 1.2操作HTML DOM元素之前，需要了解一些基本概念。HTML DOM元素指的是html页面中的各种标签，如div、p、h1等等。Mootools 1.2是一种JavaScript框架，它提供了各种方法和函数，用于操作HTML DOM元素。

操作方法

在Mootools 1.2中，可以使用以下方法来操作HTML DOM元素：

1. $()方法：该方法用于获取指定id的HTML DOM元素，其语法为$（'id'），其中id为要获取的元素的id属性值。例如：

```

这是一个测试元素

使用$()方法获取该元素：
var testEl = $('test');
```

1. addEvent()方法：该方法用于为HTML DOM元素添加事件监听器。其语法为addEvent(eventName, eventHandler)，其中eventName是事件名称，如click、mousemove等，eventHandler是事件处理函数。例如：

<button id="testBtn">点击我</button>
为该按钮添加click事件监听器：
var testBtn = $('testBtn');
testBtn.addEvent('click', function(){
alert('按钮被点击了！');
});

1. set()方法：该方法用于设置HTML DOM元素的属性值。其语法为set(name, value)，其中name是要设置的属性名，value是要设置的属性值。例如：

```

这是一个测试元素

使用set()方法设置该元素的背景色为红色：
var testEl = $('test');
testEl.set('background-color', 'red');
```

示例说明

1. 设置按钮点击后背景色改变

<button id="testBtn">点击我</button>
var testBtn = $('testBtn');
testBtn.addEvent('click', function(){
testBtn.set('background-color', 'red');
});

1. 获取输入框中的值并弹出提示框显示

<input type="text" id="testInput">
var testInput = $('testInput');
testInput.addEvent('blur', function(){
var inputValue = testInput.get('value');
alert(inputValue);
});

以上是Mootools 1.2操作HTML DOM元素的一些基础方法和示例说明。掌握了这些知识后，就可以使用Mootools 1.2轻松地操纵HTML DOM元素了。