MooTools - DOM 操作
我们已经知道每个 HTML 页面都是使用 DOM 元素设计的。使用 MooTools，您可以操作 DOM 元素，这意味着您可以创建、删除和更改 DOM 元素的样式。
基本方法
以下是捕获和帮助修改 DOM 元素属性的基本方法。
get()
此方法用于检索元素属性，如 src、value、name 等。以下语句是 get 方法的语法。
语法
//这将返回元素的 html 标签(div、a、span...)
$('id_name').get('tag');
使用 get() 方法检索元素时，您将收到以下属性列表。
- id
- name
- value
- href
- src
- class(如果是元素，将返回所有类)
- text(元素的文本内容)
set()
此方法用于将值设置为变量。与事件结合使用时非常有用，可让您更改值。以下语句是 set 方法的语法。
语法
//这将设置 #id_name 的 href 为"http://www.google.com"
$('id_name').set('href', 'http://www.google.com');
erase()
此方法可帮助您清除元素属性的值。您需要选择要从元素中清除的属性。以下语句是 eras() 方法的语法。
语法
//这将清除 #id_name 的 href 值
$('id_name').erase('href');
移动元素
移动元素是指将现有元素从页面的一个位置移动到另一个位置。您可以使用inject()方法在页面中移动元素。举个例子，一个HTML页面包含三个div元素，它们按顺序分别包含内容A、B和C。请看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');
})
</script>
</head>
<body>
<div id = "body_wrap">
<div id = "elemA">A</div>
<div id = "elemB">B</div>
<div id = "elemC">C</div>
</div>
</body>
</html>
您将收到以下输出 −
输出
现在，使用 MooTools 中的 injection() 方法，我们可以将顺序从 ABC 更改为 ACB。这意味着，我们需要将元素 B 放在元素 C 之后，将元素 C 放在元素 B 之前。查看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');
//translates to: inject element C before element B
elementC.inject(elementB, 'before');
//translates to: inject element B after element C
elementB.inject(elementC, 'after');
});
</script>
</head>
<body>
<div id = "body_wrap">
<div id = "elemA">A</div>
<div id = "elemB">B</div>
<div id = "elemC">C</div>
</div>
</body>
</html>
您将收到以下输出 −
输出
创建新元素
MooTools 提供了创建任何类型的 DOM 元素并将其插入 HTML 页面的选项。但是，我们必须为每个元素维护适当的语法。让我们举一个例子，其中以下代码片段是创建(锚)元素的语法。
语法
var el = new Element('a', {
id: 'Awesome',
title: 'Really?',
text: 'I\'m awesome',
href: 'http://MooTools.net',
events: {
'click': function(e) {
e.preventDefault();
alert('Yes, really.');
}
},
styles: {
color: '#f00'
}
});
让我们举一个例子，使用 MooTools 库创建一个锚元素。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var el = new Element('a', {
id: 'Awesome',
title: 'Really?',
text: 'I\'m awesome',
href: 'http://www.tutorialspoint.com',
events: {
'click': function(e) {
e.preventDefault();
alert('Yes, really.');
}
},
styles: {
color: '#f00'
}
});
el.inject(document.body);
});
</script>
</head>
<body>
</body>
</html>
您将收到以下输出 −
