MooTools-배열 사용

MooTools는 동적 웹 페이지를 만드는 데 도움이되는 경량 JavaScript 라이브러리입니다. DOM 요소를 관리하는 동안 웹 페이지의 모든 DOM 요소를 선택해야합니다. 이 컬렉션은 배열을 사용하여 처리 할 수 있습니다.

이 장에서는 배열을 사용하여 DOM 요소를 관리하는 방법에 대해 설명합니다.

each () 메서드

이것은 배열을 다루는 기본 방법입니다. 목록을 통해 모든 요소를 반복합니다. 요구 사항에 따라이 방법을 사용할 수 있습니다. 예를 들어 페이지의 모든 div 요소를 선택하려면 아래 제공된 스크립트를 따르십시오. 여러 div가 포함 된 다음 html 페이지를 살펴보십시오.

<div>One</div>
<div>Two</div>

다음 스크립트를 사용하여 선택할 수 있습니다. each individual div페이지의 div 컬렉션에서 스크립트는 각 div를 선택하고 경고를 전달합니다. 다음 스크립트를 살펴보십시오.

스크립트

$$('div').each(function() {
   alert('a div');
});

다음 구문을 사용하여 위의 예제를 처리 할 수 있습니다. HTML 페이지를 살펴보십시오.

스크립트

<div id = "body_div">
   <div>One</div>
   <div>Two</div>
</div>

여기에서 두 div는 다른 div로 묶여 있습니다. body_div. 스크립트를 디자인하는 동안 하나의 외부 div 만 선택해야합니다. 나중에 getElements () 메서드를 사용하여 두 개의 내부 div를 선택할 수 있습니다. 다음 스크립트를 살펴보십시오.

스크립트

$('body_wrap').getElements('div').each(function() {
   alert('a div');
});

다음과 같이 다른 방법을 사용하여 위의 스크립트를 작성할 수 있습니다. 여기에서는 별도의 변수를 사용하여body_div.

스크립트

var myArray = $('body_div').getElements('div');
myArray.each(function() {
   alert('a div');
});

배열에서 특정 요소 선택

요소 배열을 조작하는 동안 요소 배열에서 특정 요소를 선택할 수 있습니다. 다음은 DOM 요소를 조작하는 데 사용되는 몇 가지 중요한 방법입니다.

getLast ()

이 메서드는 배열의 마지막 요소를 반환합니다. 이 방법을 이해하기 위해 배열을 설정하겠습니다.

var myArray = $('body_div').getElements('div');

이제 배열 내의 마지막 요소를 가져올 수 있습니다.

var lastElement = myArray.getLast();

변수 lastElement 이제 myArray 내의 마지막 요소를 나타냅니다.

getRandom ()

getRandom () 메서드는 getLast () 메서드와 비슷한 방식으로 작동하지만 배열에서 임의의 요소를 가져옵니다.

Syntax

var randomElement = myArray.getRandom();

변수 randomElement 이제 내에서 무작위로 선택된 요소를 나타냅니다. myArray.

어레이 복사

MooTools는 $ A () 함수를 사용하여 배열을 복사하는 방법을 제공합니다. 다음은 $ A () 함수의 구문입니다.

통사론

var <variable-name> = $A ( <array-variable>);

배열에 요소 추가

배열에 요소를 추가하는 방법에는 두 가지가 있습니다. 첫 번째 방법을 사용하면 요소를 하나씩 추가하거나 두 개의 다른 배열을 하나로 병합 할 수 있습니다.

포함()

include () 메서드는 항목을 DOM 요소 배열에 추가하는 데 사용됩니다. 예를 들어, 두 개의 div 요소와 하나의 포함 된 div 아래에 하나의 span 요소를 포함하는 다음 HTML 코드를 고려하십시오.body_div.

Syntax

<div id = "body_div">
   <div>one</div>
   <div>two</div>
   <span id = "add_to_array">add to array</span>
</div>

위 코드에서 getElements ( 'div') 메서드를 호출하면 body_div요소, 우리는 하나와 두 개의 div를 얻지 만 스팬 요소는 배열에 포함되지 않습니다. 배열에 추가하려면 다음을 호출하십시오.include()배열 변수에 대한 메서드. 다음 스크립트를 살펴보십시오.

Script

//creating array variable by selecting div elements
var myArray = $('body_wrap').getElements('div');

//first add your element to a var
var newToArray = $('add_to_array');

//then include the var in the array
myArray.include(newToArray);

이제 myArray에는 div와 span 요소가 모두 포함됩니다.

결합시키다()

이 메서드는 한 배열의 요소를 다른 배열의 요소와 결합하는 데 사용됩니다. 이것은 또한 중복 콘텐츠를 처리합니다. 예를 들어, 두 개의 div 요소와 두 개의 span 요소를 포함하는 다음 HTML 코드를 고려하십시오.body_div.

Syntax

<div id = "body_div">
   <div>one</div>
   <div>two</div>
   <span class = "class_name">add to array</span>
   <span class = "class_name">add to array, also</span>
   <span class = "class_name">add to array, too</span>
</div>

위의 코드에서 getElements ( 'div') 메서드를 body_div요소. 당신은 하나와 두 개의 div를 얻습니다. $$ ( '. class_name') 메서드를 호출하면 두 개의 범위 요소가 선택됩니다. 이제 하나의 div 요소 배열과 다른 범위 요소 배열이 있습니다. 이 두 배열을 병합하려면 Combine method ()를 사용할 수 있습니다. 다음 스크립트를 살펴보십시오.

Script

//create your array just like we did before
var myArray= $('body_wrap').getElements('div');

//then create an array from all elements with .class_name
var newArrayToArray = $$('.class_name');

//then combine newArrayToArray with myArray
myArray.combine(newArrayToArray );

이제 myArray에는 newArrayToArray 변수의 모든 요소가 포함됩니다.

Example

이것은 MooTools의 배열을 이해하는 데 도움이됩니다. div와 span을 포함하는 요소의 배열에 배경색을 적용한다고 가정합니다. 다음 코드를 살펴보십시오. 여기에서 두 번째 요소 배열은 ID 또는 클래스 그룹에 속하지 않으므로 배경색을 반영하지 않습니다. 다음 코드를 살펴보십시오.

<!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 myArray = $('body_wrap').getElements('.class_name');
            var addSpan = $('addtoarray');
            var addMany = $$('.addMany');
            
            myArray.include(addSpan);
            myArray.combine(addMany);
            
            var myArrayFunction = function(item) {
               item.setStyle('background-color', '#F7DC6F');
            }
            
            myArray.each(myArrayFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_wrap">
         <div class = "class_name">one</div>
         <div>two</div>
         <div class = "class_name">three</div>
         <span id = "addtoarray">add to array</span>
         <br /><span class = "addMany">one of many</span>
         <br /><span class = "addMany">two of many</span>
      </div>
   </body>
   
</html>

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

Output