Prototype中dom对象方法汇总

在Prototype的库中，有很多强大的DOM操作方法，本攻略将会对这些方法进行汇总、分类，并给出详细的实例说明。

1. DOM元素选取

1.1 $$方法

$$方法是Prototype的一个强大的DOM元素选取方法，可以选取符合所有CSS选择器的所有元素，返回一个数组对象。其语法如下：

$$('CSS选择器')

示例代码：

<div class="a">我是div1</div>
<div class="a">我是div2</div>
<div class="a">我是div3</div>
<div class="b">我是div4</div>

// 选取所有class属性为'a'的div元素
var divArr = $$('div.a');

// 输出选取的元素个数
console.log(divArr.length); // 输出3

1.2 $方法

$方法是Prototype的一个DOM元素选取方法，可以选取第一个匹配CSS选择器的元素，返回一个DOM对象。其语法如下：

$('CSS选择器')

示例代码：

<div id="test">我是测试div</div>

// 选取id值为'test'的div元素
var divObj = $('div#test');

// 输出选取的元素文本
console.log(divObj.innerHTML); // 输出'我是测试div'

2. DOM元素操作

2.1 insert方法

insert方法可以在DOM元素内插入HTML代码，其中包含以下几个子方法：

• insert方法：在DOM元素的内部前面插入HTML代码
• insertBottom方法：在DOM元素的内部后面插入HTML代码
• insertTop方法：在DOM元素的内部顶部插入HTML代码
• insertAfter方法：在DOM元素的后面插入HTML代码

其语法如下：

$('DOM元素').insert('位置', 'HTML代码');

示例代码：

<div id="test">我是测试div</div>

// 在id值为'test'的div元素前面插入HTML代码
$('div#test').insert('before', '<div>我是新的div</div>');

// 在id值为'test'的div元素内部后面插入HTML代码
$('div#test').insertBottom('<div>我是新的div</div>');

// 在id值为'test'的div元素内部顶部插入HTML代码
$('div#test').insertTop('<div>我是新的div</div>');

// 在id值为'test'的div元素后面插入HTML代码
$('div#test').insertAfter('<div>我是新的div</div>');

2.2 up、down、previous、next方法

up、down、previous、next方法可以在DOM元素上下左右遍历，获取相邻元素，其语法如下：

$('DOM元素').方法名();

示例代码：

<div id="test">
  <div>div1</div>
  <div>div2</div>
</div>

// 获取id值为'test'的div元素的第一个子div元素
$('div#test').down('div');

// 获取id值为'test'的div元素的第二个子div元素
$('div#test').down('div').next('div');

以上就是Prototype的dom对象方法的汇总和应用，更多详细方法可以查看Prototype官方文档。