MooTools - Manipulasi DOM

Kita sudah tahu bahwa setiap halaman HTML dirancang menggunakan elemen DOM. Menggunakan MooTools Anda dapat memanipulasi elemen DOM yang berarti Anda dapat membuat, menghapus, dan mengubah gaya elemen DOM.

Metode dasar

Berikut ini adalah metode dasar yang menangkap dan membantu memodifikasi properti elemen DOM.

Dapatkan()

Metode ini digunakan untuk mengambil properti elemen seperti src, nilai, nama, dll. Pernyataan berikut adalah sintaks dari metode get.

Sintaksis

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

Anda akan menerima daftar properti berikut saat mengambil elemen menggunakan metode get ().

id
name
value
href
src
class (akan mengembalikan semua kelas jika elemen)
teks (isi teks dari suatu elemen)

set()

Metode ini digunakan untuk menetapkan nilai ke variabel. Ini berguna jika digabungkan dengan acara dan memungkinkan Anda mengubah nilai. Pernyataan berikut adalah sintaks dari metode set.

Syntax

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

menghapus()

Metode ini membantu Anda menghapus nilai properti elemen. Anda perlu memilih properti mana yang ingin Anda hapus dari elemen. Pernyataan berikut adalah sintaks dari metode erase ().

Syntax

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

Elemen Pindah

Memindahkan elemen berarti memindahkan elemen yang ada dari satu posisi ke posisi lain di sekitar halaman. Anda bisa menggunakan metode inject () untuk memindahkan elemen di sekitar halaman. Mari kita ambil contoh di mana, satu halaman HTML berisi tiga elemen div yang masing-masing berisi konten A, B, dan C secara berurutan. Perhatikan kode berikut.

Contoh

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

Anda akan menerima output berikut -

Keluaran

Sekarang, dengan menggunakan metode inject () di MooTools, kita dapat mengubah urutan dari ABC ke ACB. Ini berarti, kita perlu menempatkan elementB setelah elementC dan menempatkan elementC sebelum elementB. Perhatikan kode berikut.

Contoh

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

Anda akan menerima output berikut -

Keluaran

Buat Elemen Baru

MooTools menyediakan opsi untuk membuat semua jenis elemen DOM dan memasukkannya ke halaman HTML. Tapi, kita harus menjaga sintaks yang tepat untuk setiap elemen. Mari kita ambil contoh di mana, potongan kode berikut adalah sintaks untuk membuat elemen (jangkar).

Sintaksis

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'
   }
});

Mari kita ambil contoh yang akan membuat elemen jangkar menggunakan perpustakaan MooTools. Perhatikan kode berikut.

Contoh

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

Anda akan menerima output berikut -

Keluaran