Учебники

MooTools — DOM Манипуляции

Сентябрь 8, 2018

Мы уже знаем, что каждая HTML-страница разработана с использованием элементов DOM. Используя MooTools, вы можете манипулировать элементами DOM, что означает, что вы можете создавать, удалять и изменять стиль элементов DOM.

Основные методы

Ниже приведены основные методы, которые собирают и помогают изменить свойства элементов DOM.

получить()

Этот метод используется для извлечения свойств элемента, таких как src, value, name и т. Д. Следующий оператор является синтаксисом метода get.

Синтаксис 

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

При получении элемента с помощью метода get () вы получите следующий список свойств.

  • Я бы
  • название
  • значение
  • HREF
  • ЦСИ
  • класс (вернет все классы, если элемент)
  • текст (текстовое содержимое элемента)

задавать()

Этот метод используется для установки значения переменной. Это полезно в сочетании с событиями и позволяет изменять значения. Следующее утверждение является синтаксисом метода set.

Синтаксис 

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

стереть ()

Этот метод помогает вам стереть значение свойства elements. Вам нужно выбрать, какое свойство вы хотите стереть из элемента. Следующее утверждение является синтаксисом метода erase ().

Синтаксис 

//this will erase the href value of #id_name
$('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>

Вы получите следующий вывод —

Выход

Теперь, используя метод inject () в MooTools, мы можем изменить порядок с ABC на ACB. Это означает, что нам нужно поместить elementB после elementC и поместить elementC перед elementB. Посмотрите на следующий код.

пример 

<!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>

Вы получите следующий вывод —

44
Share: