MooTools-DOM 조작

우리는 이미 모든 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 () 메서드를 사용하여 요소를 검색하는 동안 다음 속성 목록을 받게됩니다.

  • id
  • name
  • value
  • href
  • src
  • 클래스 (요소 인 경우 모든 클래스를 반환 함)
  • 텍스트 (요소의 텍스트 콘텐츠)

세트()

이 방법은 값을 변수로 설정하는 데 사용됩니다. 이벤트와 결합 할 때 유용하며 값을 변경할 수 있습니다. 다음 문은 set 메서드의 구문입니다.

Syntax

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

삭제()

이 방법을 사용하면 elements 속성 값을 지울 수 있습니다. 요소에서 지울 속성을 선택해야합니다. 다음 문장은 erase () 메서드의 구문입니다.

Syntax

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

움직이는 요소

요소 이동은 기존 요소를 페이지의 한 위치에서 다른 위치로 이동하는 것을 의미합니다. inject () 메소드를 사용하여 페이지에서 요소를 이동할 수 있습니다. 하나의 HTML 페이지에 콘텐츠 A, B, C를 각각 순서대로 포함하는 3 개의 div 요소가 포함 된 예를 들어 보겠습니다. 다음 코드를 살펴보십시오.

<!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의 inject () 메소드를 사용하여 순서를 ABC에서 ACB로 변경할 수 있습니다. 즉, elementC 뒤에 elementB를 배치하고 elementB 앞에 elementC를 배치해야합니다. 다음 코드를 살펴보십시오.

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

다음과 같은 출력을 받게됩니다.

산출