MooTools - การจัดการ DOM

เราทราบแล้วว่าทุกหน้า 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
name
value
href
src
คลาส (จะส่งคืนคลาสทั้งหมดหากองค์ประกอบ)
ข้อความ (เนื้อหาข้อความขององค์ประกอบ)

ชุด ()

วิธีนี้ใช้เพื่อกำหนดค่าให้กับตัวแปร สิ่งนี้มีประโยชน์เมื่อรวมกับเหตุการณ์และช่วยให้คุณเปลี่ยนค่าได้ คำสั่งต่อไปนี้เป็นไวยากรณ์ของ set method

Syntax

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

ลบ ()

วิธีนี้ช่วยให้คุณลบค่าของคุณสมบัติองค์ประกอบ คุณต้องเลือกคุณสมบัติที่คุณต้องการลบออกจากองค์ประกอบ คำสั่งต่อไปนี้เป็นไวยากรณ์ของวิธีการลบ ()

Syntax

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

การเคลื่อนย้ายองค์ประกอบ

การย้ายองค์ประกอบหมายถึงการย้ายองค์ประกอบที่มีอยู่จากตำแหน่งหนึ่งไปยังตำแหน่งอื่นรอบ ๆ หน้า คุณสามารถใช้วิธีการฉีด () เพื่อย้ายองค์ประกอบไปทั่วหน้า ให้เรายกตัวอย่างจากนั้นหน้า 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 เราสามารถเปลี่ยนลำดับจาก 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>

คุณจะได้รับผลลัพธ์ต่อไปนี้ -

เอาต์พุต