📌  相关文章
📜  MooTools-DOM操作

📅  最后修改于: 2020-10-22 06:30:43             🧑  作者: Mango

我们已经知道每个HTML页面都是使用DOM元素设计的。使用MooTools，您可以操纵DOM元素，这意味着您可以创建，删除和更改DOM元素的样式。

基本方法

以下是捕获并帮助修改DOM元素属性的基本方法。

得到（）

此方法用于检索元素属性，例如src，值，名称等。以下语句是get方法的语法。

句法

//this will return the html tag (div, a, span...) of the element 
$('id_name').get('tag');

使用get（）方法检索元素时，您将收到以下属性列表。

  • ID
  • 名称
  • 值
  • href
  • src
  • class（如果元素将返回所有类）
  • 文本（元素的文本内容）

组（）

此方法用于将值设置为变量。与事件结合使用时，此功能很有用，可让您更改值。以下语句是set方法的语法。

句法

//this will set the href of #id_name to "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');

擦除（）

此方法可帮助您删除elements属性的值。您需要选择要从元素中删除的属性。以下语句是delete（）方法的语法。

句法

//this will erase the href value of #id_name
$('id_name').erase('href');

运动元素

移动元素是指将现有元素从页面的一个位置移动到另一位置。您可以使用inject（）方法在页面上移动元素。让我们以一个示例为例，其中一个HTML页面包含三个div元素，分别按顺序包含内容A，B和C。看一下下面的代码。

例


      
      
      
   
   
   
      

         
A

         
B

         
C

您将收到以下输出-

输出

现在，使用MooTools中的inject（）方法，我们可以将顺序从ABC更改为ACB。这意味着，我们需要将elementB放在elementC之后，并将elementC放在elementB之前。看一下下面的代码。

例


      
      
      
   
   
   
      

         
A

         
B

         
C

您将收到以下输出-

输出

创建新元素

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库创建锚元素的示例。看一下下面的代码。

例

您将收到以下输出-

输出