Native: Window

次の関数はWindowメソッドとして扱われます。

関数: $

ドル関数には二つの目的があります : IDで要素を取得すること、そしてInternet ExplorerにすべてのElementメソッドを"掴ませる"ことです。

構文:

var myElement = $(el);

引数:

  1. el - 拡張したい要素。次のいずれかになります:
    • (要素) 拡張された要素。
    • (文字列) 任意のDOM要素のIDを含む文字列。
    • (オブジェクト) そのオブジェクトがtoElementメソッドを持っていた場合、要素の取得時にtoElementが呼び出されます。

戻り値:

  • (要素) DOM要素。
  • (null) IDがマッチしなかったり、toElementメソッドが要素を返さなかった場合はNullを返します。

例:

IDによるDOM要素の取得:

var myElement = $('myElement');

参照を用いたDOM要素を取得:

var div = document.getElementById('myElement');
div = $(div); //要素に対してすべてのElementメソッドが適用されます。

注意点:

  • このメソッドはその要素やIDが存在するかどうかわからないときに有用です。また、document.getElementById()のショートハンドとしても役立ちます。
  • Internet Explorerにおいては、$が最初に呼び出された時にElementが拡張され、すべてのElementメソッドが利用できるようになります。
  • SafariやFirefox、OperaのようにHTMLElementをネイティブにサポートしているブラウザでは、すべてのElementメソッドがDOM要素に対して自動的に適用されます。
  • MooToolsは要素を拡張する必要があるか否かを推測するので、悪影響を及ぼすことなくこの関数を何度も呼び出すことができるます。

関数: $$

DOM要素を選び出し、拡張します。$$の戻り値である配列内の要素は、すべてのElementメソッドを持っています。

構文:

var myElements = $$(aTag[, anElement[, Elements[, ...]);

引数:

  • 次の引数をいくらでも取ることができます:
    • HTMLCollections,
    • 要素の配列,
    • 要素,
    • セレクタ文字列

戻り値:

  • (配列) - マッチした要素を$によって拡張し、配列にしたもの。

例:

タグ名で要素を取得:

$$('a'); //ページ内のすべてのアンカータグからなる配列を返します。
$$('a', 'b'); //ページ内のすべてのアンカータグとボールドタグからなる配列を返します。

SelectorsをインクルードしてCSSセレクターを使用する:

$$('#myElement'); //'myElement'というIDを持つ要素だけからなる配列を返します。
$$('#myElement a.myClass'); //'myElement'というIDを持つDOM要素に含まれており、なおかつ'myClass'というクラス名を持つすべてのアンカータグからなる配列を返します。

さらに複雑な$$の利用:

//引数として渡されたすべての要素とセレクターにマッチした要素を返す配列を生成します。
$$(myelement1, myelement2, 'a', '#myid, #myid2, #myid3', document.getElementsByTagName('div'));

注意点:

  • Selectorsが読み込まれると、$$はCSSセレクターを受け入れるようになります。そうでなければ、タグ名だけしか使用することはできません。
  • 一つの要素もマッチしなければ、空の配列が返されます。
  • 結果のいかんにかかわらず、$$の戻り値のデータ型は配列になります。

参考情報:

  • フレームワーク内のどこででも使うことができるように、Selectors のドキュメンテーションに目を通すとよいでしょう。

Native: Element

拡張されたDOM要素ならば、すべてのメソッドが使えるようにカスタマイズされたNativeです。

Elementメソッド: constructor

渡されたタイプの新しい要素を作ります。

構文:

var myEl = new Element(element[, properties]);

引数:

  1. element - (いろいろ) 生成したい要素のタグ名か、すでに存在しているDOM要素。
  2. properties - (オブジェクト, オプション) 渡されたプロパティオブジェクトをElement:setの引数として呼び出します。

戻り値:

  • (要素) MooToolsによって拡張された新しいHTML要素。

例:

var myAnchor = new Element('a', {

    'href': 'http://mootools.net',
    'class': 'myClass',
    'html': 'Click me!',
    'styles': {

        'display': 'block',
        'border': '1px solid black'
    },
    'events': {
        'click': function(){

            alert('clicked');
        },
        'mouseover': function(){
            alert('mouseovered');
        }

    }
});

参考情報:

Elementメソッド: getElement

渡されたタグ名にマッチする最初の子要素を取得します。Selectorsがインクルードされていれば、CSSセレクターを渡すことができます。

構文:

var myElement = myElement.getElement(tag);

引数:

  1. tag - (文字列) 探しているタグ名。

戻り値:

  • (いろいろ) マッチすればその要素を返し、しない場合はnullを返します。

例:

var firstDiv = $(document.body).getElement('div');

注意点:

  • このメソッドはDocument インスタンスにも利用できます。
  • このメソッドはSelectorsがインクルードされていると置換されます。
  • SelectorsはElement:getElementを拡張し、CSSセレクターに基づいたマッチングを可能にします。

参考情報:

  • フレームワーク内のどこででも使うことができるように、Selectors のドキュメンテーションに目を通すとよいでしょう。

Elementメソッド: getElements

渡されたタグ名にマッチする子要素をすべて取得します。Selectorsがインクルードされていれば、CSSセレクターを渡すことができます。

構文:

var myElements = myElement.getElements(tag);

引数:

  1. tag - (文字列) マッチするタグの文字列。

戻り値:

  • (配列) マッチした要素からなるElements配列。

例:

var allAnchors = $(document.body).getElements('a');

注意点:

  • このメソッドはDocument インスタンスにも利用できます。
  • このメソッドはSelectorsがインクルードされていると置換されます。
  • SelectorsはElement:getElementを拡張し、CSSセレクターに基づいたマッチングを可能にします。

参考情報:

  • フレームワーク内のどこででも使うことができるように、Selectors のドキュメンテーションに目を通すとよいでしょう。

Elementメソッド: getElementById

特定のIDを持つ子要素を取得します。

構文:

var myElement = anElement.getElementById(id);

引数:

  1. id - (文字列) 見つけたい要素のID。

戻り値:

  • (いろいろ) マッチすれば要素を、そうでなければnullをかえします。

例:

var myChild = $('myParent').getElementById('myChild');

注意点:

  • このメソッドはDocumentインスタンスには使えません。document.getElementByIdがネイティヴに提供されているからです。

Elementメソッド: set

"動的引数"メソッドです。渡されたプロパティがElement.Propertiesハッシュの'セットしたい'プロパティのいずれかになります。

構文:

myElement.set(arguments);

引数:

  • 2つの引数のとき(property, value)
    1. property - (文字列) セットしたいプロパティを意味するElement.Propertiesハッシュのキー名。
    2. value - (いろいろ) 指定したプロパティの値。
  • 1つの引数のとき(properties)
    1. properties - (オブジェクト) 要素にセットしたいプロパティーと値をキー＝値のセットにしたオブジェクト。(以下を参照のこと)

戻り値:

  • (要素) この要素。

例:

引数2つ(property,value)の場合:

$('myElement').set('text', 'text goes here');
$('myElement').set('class', 'active');

//'styles'プロパティにElement:setStylesのオブジェクトを渡す
var body = $(document.body).set('styles', {
    'font': '12px Arial',
    'color': 'blue'

});

引数1つ（object）の場合:

var myElement = $('myElement').set({

    //'styles'プロパティにElement:setStylesのオブジェクトを渡す。
    'styles': {
        'font': '12px Arial',
        'color': 'blue',
        'border': '1px solid #f00'

    },
    //'events'プロパティにElement:addEventsのオブジェクトを渡す。
    'events': {
        'click': function(){ alert('click'); },
        'mouseover': function(){ this.addClass('over') }

    },
    //その他のプロパティにはElement:setPropertyを利用する。
    'id': 'documentBody'
});

注意点:

  • すべてのproperty引数には、対応するElement.Propertiesハッシュのメソッドに渡されます。
  • Element.Propertiesに適当なプロパティがない場合、Element:setPropertyに戻されます。
  • 属性をセットするときにElement:setPropertyを使うならば、小文字で短いプロパティ形式にしてください。具体例は以下になります:
    • ○'for'　×'htmlFor',
    • ○'class'　×'className'
    • ○'frameborder'　×'frameBorder'
    • などなど。

参考情報:

Elementメソッド: get

"動的引数"メソッドです。渡されたプロパティがElement.Propertiesハッシュの'取得したい'プロパティのいずれかになります。

構文:

myElement.get(property);

引数:

  1. property - (文字列) 取得したいプロパティを意味するElement.Propertiesハッシュのキー名。

戻り値:

例:

カスタムgetの使用:

var tag = $('myDiv').get('tag'); //戻り値 "div".

Element属性へのフォールバック:

var id = $('myDiv').get('id'); //戻り値 "myDiv".

var value = $('myInput').get('value'); //myInput要素の値を返します。

注意点:

参考情報:

Elementメソッド: erase

"動的引数"メソッドです。渡されたプロパティがElement.Propertiesハッシュの'消去したい'プロパティのいずれかになります。

構文:

myElement.erase(property);

引数:

  1. property - (文字列) 消去したいプロパティを意味するElement.Propertiesハッシュのキー名。

戻り値:

例:

$('myDiv').erase('id'); //myDivからIDを取り除きます。

$('myDiv').erase('class'); //myDiv要素は設定されていたクラス名を持っていません。

注意点:

参考情報:

Elementメソッド: match

渡された引数がその要素にマッチするかどうか、テストします。

構文:

myElement.match(match);

引数:

  1. match - 文字列か要素。
    • (文字列) 要素に対してテストしたいタグ名。Selectorsがインクルードされていれば、単一のCSSセレクターが使用できます。
    • (要素) テストしたい要素。

戻り値:

  • (真偽値) 要素がマッチしたらtrue。そうでなければflase。

例:

タグ名の使用:

//#myDivがdivならば、trueを返します。
$('myDiv').match('div');

CSSセレクターの使用:

//#myDiv内にname属性が"bar"でクラスがfooという要素があればtrue。
$('myDiv').match('.foo[name=bar]');

要素の使用:

var el = $('myDiv');
$('myDiv').match(el); //戻り値 true

$('otherElement').match(el); //戻り値 false

Elementメソッド: inject

その要素の子要素として、特定の位置(第2引数でしていします)に要素を挿入します。

構文:

myElement.inject(el[, where]);

引数:

  1. el - (いろいろ) 要素のIDか、要素そのもの。
  2. where - (文字列, オプション: 初期値＝'bottom') 要素を挿入する位置。'top'、 'bottom'、 'after'、'before'を指定できます。

戻り値:

  • (要素)この要素。

例:

JavaScript
var myFirstElement  = new Element('div', {id: 'myFirstElement'});

var mySecondElement = new Element('div', {id: 'mySecondElement'});
var myThirdElement  = new Element('div', {id: 'myThirdElement'});
HTMLの結果
<div id="myFirstElement"></div>
<div id="mySecondElement"></div>
<div id="myThirdElement"></div>

末尾に挿入:

JavaScript
myFirstElement.inject(mySecondElement);
HTMLの結果
<div id="mySecondElement">
    <div id="myFirstElement"></div>
</div>

上に挿入:

JavaScript
myThirdElement.inject(mySecondElement, 'top');
HTMLの結果
<div id="mySecondElement">
    <div id="myThirdElement"></div>

    <div id="myFirstElement"></div>
</div>

前に挿入

JavaScript
myFirstElement.inject(mySecondElement, 'before');
Resulting HTML
<div id="myFirstElement"></div>
<div id="mySecondElement"></div>

次に挿入:

JavaScript
myFirstElement.inject(mySecondElement, 'after');
HTMLの結果
<div id="mySecondElement"></div>

<div id="myFirstElement"></div>

参考情報:

Element:adopt, Element:grab, Element:wraps

Elementメソッド: grab

Element:injectと似ていますが、正反対の働きをします。

子要素を起点にした特定の位置(whereパラメータで指定します)に、要素を加えます。

構文:

myElement.grab(el[, where]);

引数:

  1. el - (いろいろ) 要素のidか、要素そのもの。
  2. where - (文字列, オプション: 初期値＝'bottom') 要素を加える場所。'top'か'bottom'。

戻り値:

  • (要素) この要素。

例:

JavaScript
var myFirstElement = new Element('div', {id: 'myFirstElement'});

var mySecondElement = new Element('div', {id: 'mySecondElement'});

myFirstElement.grab(mySecondElement);
HTMLの結果
<div id="myFirstElement">
    <div id="mySecondElement"></div>
</div>

参考情報:

Element:adopt, Element:inject, Element:wraps

Elementメソッド: adopt

Element:grabと同じ働きをしますが、複数の要素を適用することができます。

メソッドを実行した要素に、渡された要素を挿入します(結果的に親要素となります)。

構文:

myParent.adopt(el[, others]);

引数:

  1. el - (いろいろ) 要素のid、要素そのもの、要素の配列。
  2. others - (いろいろ, オプション) 付け加えたい要素を一つ以上、カンマで区切るか、配列にして指定します。

戻り値:

  • (要素) この要素。

例:

JavaScript
var myFirstElement  = new Element('div', {id: 'myFirstElement'});

var mySecondElement = new Element('a', {id: 'mySecondElement'});
var myThirdElement  = new Element('ul', {id: 'myThirdElement'});

myParent.adopt(myFirstElement);
myParent2.adopt(myFirstElement, 'mySecondElement');
myParent3.adopt([myFirstElement, mySecondElement, myThirdElement]);
HTMLの結果
<div id="myParent">
    <div id="myFirstElement" />
</div>
<div id="myParent2">

    <div id="myFirstElement" />
    <a />
</div>
<div id="myParent3">
    <div id="myFirstElement" />

    <a />
    <ul />
</div>

参考情報:

Element:grab, Element:inject, Element:wraps

Elementメソッド: wraps

Element:grabと同じ働きをしますが、グラブした要素を移動する代わりに、この要素でターゲットを包みます。

メソッドを実行した要素は渡された要素の場所まで移動し、その親要素となります。

構文:

myParent.wraps(el[, where]);

引数:

  1. el - (いろいろ) 要素のIDか、要素そのもの。
  2. where - (文字列, オプション: 初期値＝'bottom') 要素を挿入する場所。'top'か'bottom'。

戻り値:

  • (要素) この要素。

例:

HTML
<div id="myFirstElement"></div>
JavaScript
var mySecondElement = new Element('div', {id: 'mySecondElement'});
mySecondElement.wraps($('myFirstElement'));
HTMLの結果
<div id="mySecondElement">
    <div id="myFirstElement"></div>
</div>

Elementメソッド: appendText

Element:grabと同じ働きをしますが、IDや要素そのものではなく、テキストだけを受け取ります。 テキストノードが要素内に生成され、最上部か最下部に挿入されます。

構文:

myElement.appendText(text);

引数:

  1. text - (文字列) 付け加えたいテキスト。
  2. where - (文字列, オプション: 初期値＝'bottom') テキストを挿入する場所。

戻り値:

  • (要素) 現在の要素インスタンス。

例:

HTML
<div id="myElement">Hey.</div>
JavaScript
$('myElement').appendText(' Howdy.');
HTMLの結果
<div id="myElement">Hey. Howdy.</div>

Elementメソッド: dispose

DOMから要素を削除します。

構文:

var removedElement = myElement.dispose();

戻り値:

  • (要素) この要素。この関数の戻り値を受け取っておくと、もう一度injectできます。

例:

HTML
<div id="myElement"></div>

<div id="mySecondElement"></div>
JavaScript
$('myElement').dispose();
HTMLの結果
<div id="mySecondElement"></div>

参考情報:

Elementメソッド: clone

要素を複製して返します。

構文:

var copy = myElement.clone([contents, keepid]);

引数:

  1. contents - (真偽値, オプション: 初期値＝true) falseにセットされると、要素の中身は複製されません。
  2. keepid - (真偽値, オプション: 初期値＝false) trueにセットされた場合、要素のID属性が保たれます。子ノードについても同様です。

戻り値:

  • (要素) 複製された要素。

例:

HTML
<div id="myElement"></div>
JavaScript
//要素を複製して、要素の次にコピーを挿入します。
var clone = $('myElement').clone().injectAfter('myElement');
HTMLの結果
<div id="myElement">ciao</div>
<div>ciao</div>

注意点:

  • 複製された要素は元の要素に添附されたイベントを持ちません。イベントを複製するにはElement:cloneEventsを使ってください。
  • Element.Storageで保存された値は複製されません。
  • 複製された要素とその子要素は、keepidパラメータで指定しなければ、IDを失います。

参考情報:

Elementメソッド: replaces

この要素を渡された要素で置換します。

構文:

var element = myElement.replaces(el);

引数:

  1. el - (いろいろ) 置換したい要素のIDか、要素そのもの。

戻り値:

  • (要素) この要素。

例:

$('myNewElement').replaces($('myOldElement'));

//$('myOldElement')はなくなって、$('myNewElement')がその場所に入りました。

参考情報:

Elementメソッド: hasClass

この要素が渡されたクラス名を持っているか、確かめます。

構文:

var result = myElement.hasClass(className);

引数:

  1. className - (文字列) 確認したいクラス名。

戻り値:

  • (真偽値) 要素がクラス名を持っていたらtrue。なければflase。

例:

HTML
<div id="myElement" class="testClass"></div>
JavaScript
$('myElement').hasClass('testClass'); //戻り値true

Elementメソッド: addClass

要素が指定したクラス名を持っていない場合、そのクラス名を加えます。

構文:

myElement.addClass(className);

引数:

  1. className - (文字列) 付け加えたいクラス名。

戻り値:

  • (要素) この要素。

例:

HTML
<div id="myElement" class="testClass"></div>
JavaScript
$('myElement').addClass('newClass');
HTMLの結果
<div id="myElement" class="testClass newClass"></div>

Elementメソッド: removeClass

Element:addClassと似た働きをしますが、要素からクラス名を取り除きます。

構文:

myElement.removeClass(className);

引数:

  1. className - (文字列) 削除したいクラス名。

戻り値:

  • (要素) この要素。

例:

HTML
<div id="myElement" class="testClass newClass"></div>
JavaScript
$('myElement').removeClass('newClass');
HTMLの結果
<div id="myElement" class="testClass"></div>

Elementメソッド: toggleClass

その要素が指定したクラス名を持っているか否かに応じて、クラス名を付け加えたり削除したりします。

構文:

myElement.toggleClass(className);

引数:

  1. className - (文字列) 追加、あるいは削除したいクラス名。

戻り値:

  • (要素) この要素。

例:

HTML
<div id="myElement" class="myClass"></div>
JavaScript
$('myElement').toggleClass('myClass');
HTMLの結果
<div id="myElement" class=""></div>
JavaScript
$('myElement').toggleClass('myClass');
HTMLの結果
<div id="myElement" class="myClass"></div>

Elementメソッド: getPrevious

この要素のpreviousSiblingを返します(テキストノードは除きます)。

構文:

var previousSibling = myElement.getPrevious([match]);

引数:

  1. match - (文字列, オプション): 見つけたい要素のタグ名。もしSelectorsをインクルードしていれば、CSSセレクターを指定できます。

戻り値:

  • (いろいろ) 同階層にある一つ前の要素。なければnullを返します。

Elementメソッド: getAllPrevious

Element:getPreviousと同じですが、マッチしたすべてpreviousSibling(同階層にある一つ前の要素)のを返します。

Elementメソッド: getNext

Element:getPreviousと同じですが、nextSibling(同階層にある一つ後の要素)を探します (テキストノードは除きます)。

構文:

var nextSibling = myElement.getNext([match]);

引数:

  1. match - (文字列, オプション): 探しているタグ名をカンマで区切った文字列。もしSelectorsをインクルードしていれば、CSSセレクターを指定できます。

戻り値:

  • (いろいろ) 同階層にある次の要素。なければnullを返します。

Elementメソッド: getAllNext

Element.getNextと同じですが、マッチしたすべてのnextSiblingを返します。

Elementメソッド: getFirst

Element:getPreviousと同じですが、firstChild (最初の子要素)を探します(テキストノードは除きます)。

構文:

var firstElement = myElement.getFirst([match]);

引数:

  1. match - (文字列, オプション): 探しているタグ名。もしSelectorsをインクルードしていれば、CSSセレクターを指定できます。

戻り値:

  • (いろいろ) 同階層内にある最初の要素。なければnullを返します。

Elementメソッド: getLast

Element:getPreviousと同じですが、lastChild(最後の子要素)を探します。

構文:

var lastElement = myElement.getLast([match]);

引数:

  1. match - (文字列, オプション): 探しているタグ名。もしSelectorsをインクルードしていれば、CSSセレクターを指定できます。

戻り値:

  • (いろいろ) 最後の子要素。なければnullを返します。

Elementメソッド: getParent

Element:getPreviousと同じですが、親要素を探します。

構文:

var parent = myElement.getParent([match]);

引数:

  1. match - (文字列, オプション): 探しているタグ名。もしSelectorsをインクルードしていれば、CSSセレクターを指定できます。

戻り値:

  • (いろいろ) ターゲットの親要素か、なければnullを返します。

Elementメソッド: getParents

Element:getParentと同じですが、DOMツリーを遡ってすべての親要素を返します。

Elementメソッド: getChildren

すべての子要素(テキストノードは除く)を返します。戻り値はElementsです。

構文:

var children = myElement.getChildren([match]);

引数:

  1. match - (文字列, オプション): 探しているタグ名。もしSelectorsをインクルードしていれば、CSSセレクターを指定できます。

戻り値:

  • (配列) ターゲット要素のすべての子要素からなるElements配列。テキストノードは除きます。

Elementメソッド: hasChild

子要素が指定した条件にマッチするかどうか、試します。

構文:

var result = myElement.hasChild(el);

引数:

  1. el - (いろいろ) 要素そのものか、ID。

戻り値:

  • (真偽値) 渡された要素が子要素にあればtrue。なければfalse。

例:

HTML
<div id="Darth_Vader">

    <div id="Luke"></div>
</div>
JavaScript
if ($('Darth_Vader').hasChild('Luke')) alert('Luke, I am your father.'); // タン タン タン...

Elementメソッド: empty

子要素をすべて削除します。

構文:

myElement.empty();

戻り値:

  • (要素) この要素。

例:

HTML
<div id="myElement">

    <p></p>
    <span></span>
</div>
JavaScript
$('myElement').empty();
HTMLの結果
<div id="myElement"></div>

Elementメソッド: destroy

子要素をすべて削除し、その要素も捨ててしまいます。 ページ更新の前にメモリを空にするのに役立ちます。

構文:

myElement.destroy();

戻り値:

  • (null)

Elementメソッド: toQueryString

子input要素を読み取り、その値からクエリ文字列を生成します。

構文:

var query = myElement.toQueryString();

戻り値:

  • (文字列) input要素のnameとvalueからなるクエリ文字列。

例:

HTML
<form id="myForm" action="submit.php">
    <input name="email" value="bob@bob.com" />

    <input name="zipCode" value="90210" />
</form>
JavaScript
$('myForm').toQueryString(); //戻り値"email=bob@bob.com&zipCode=90210".

Elementメソッド: getSelected

select要素の選択されているoptionを返します。

構文:

var selected = mySelect.getSelected();

戻り値:

  • (配列) 選択されている要素の配列。

例:

HTML
<select id="country-select" name="country">

    <option value="US">United States</option
    <option value ="IT">Italy</option>
</select>
JavaScript
$('country-select').getSelected(); //ユーザが選択しているものを返します。

注意点:

このメソッドは選択されたselect要素の数に関わらず、配列を返します。 もしselect要素が一つならば、一つのアイテムだけを持つ配列が返ります。

Elementメソッド: getProperty

要素の属性を一つ返します。

構文:

var myProp = myElement.getProperty(property);

引数:

  • property - (文字列) 取得したい属性。

戻り値:

  • (文字列) リクエストした属性値。

例:

HTML
<img id="myImage" src="mootools.png" title="MooTools, the compact JavaScript framework" alt="" />
JavaScript
var imgProps = $('myImage').getProperty('src'); //戻り値: 'mootools.png'.

Elementメソッド: getProperties

要素の属性を複数返します。

構文:

var myProps = myElement.getProperties(properties);

引数:

  • properties - (文字列) 取得したいプロパティを複数。

戻り値:

  • (オブジェクト) リクエストされたプロパティからなるオブジェクト。

例:

HTML
<img id="myImage" src="mootools.png" title="MooTools, the compact JavaScript framework" alt="" />
JavaScript
var imgProps = $('myImage').getProperties('id', 'src', 'title', 'alt');

//戻り値: { id: 'myImage', src: 'mootools.png', title: 'MooTools, the compact JavaScript framework', alt: '' }

Elementメソッド: setProperty

この要素に対し、属性や指定したプロパティをセットします。

引数:

  1. property - (文字列) 渡された値を設定したいプロパティ。
  2. value - (いろいろ) プロパティに設定する値。

戻り値:

  • (要素) - この要素。

例:

HTML
<img id="myImage" />
JavaScript
$('myImage').setProperty('src', 'mootools.png');
HTMLの結果
<img id="myImage" src="mootools.png" />

注意

  • 属性をセットするためにElement:setPropertyを使うときは、小文字で単純な形式のプロパティ名を使いましょう。例：
    • ○'for'　×'htmlFor',
    • ○'class'　×'className'
    • ○'frameborder'　×'frameBorder'
    • などなど。

Elementメソッド: setProperties

要素に複数の属性を設定します。

引数:

  1. properties - (オブジェクト) キー＝値のペアを持つオブジェクト。

戻り値:

  • (要素) この要素。

例:

HTML
<img id="myImage" />
JavaScript
$('myImage').setProperties({
    src: 'whatever.gif',
    alt: 'whatever dude'

});
HTMLの結果
<img id="myImage" src="whatever.gif" alt="whatever dude" />

Elementメソッド: removeProperty

要素から属性を削除します。

構文:

myElement.removeProperty(property);

引数:

  1. property - (文字列) 削除したい属性

戻り値:

  • (要素) この要素。

例:

HTML
<a id="myAnchor" href="#" onmousedown="alert('click');"></a>
JavaScript
//うーん... インラインJavaScriptはよくない! 削除してしまいましょう。
$('myAnchor').removeProperty('onmousedown');
HTMLの結果
<a id="myAnchor" href="#"></a>

Elementメソッド: removeProperties

要素から複数の属性を削除します。

構文:

myElement.removeProperties(properties);

引数:

  1. properties - (文字列) 削除したい属性をカンマで区切った文字列。

戻り値:

  • (要素) この要素。

例:

HTML
<a id="myAnchor" href="#" title="hello world"></a>
JavaScript
$('myAnchor').removeProperties('id', 'href', 'title');
HTMLの結果
<a></a>

Elementメソッド: store

要素にリンクしているストレージにアイテムを保存します。

構文:

myElement.store(key, value);

引数:

  1. key - (文字列) 保存した値につけたいキー名。
  2. value - (いろいろ) 保存したい値。

戻り値:

  • (要素) この要素。

例:

$('element').store('someProperty', someValue);

Elementメソッド: retrieve

要素のストレージから値を取得します。

構文:

myElement.retrieve(key[, default]);

引数:

  1. key - (文字列) ストレージから取り出したい値のキー名。
  2. default - (いろいろ, オプション) 初期値。値が保存されていなければ、これが返されます。

戻り値:

  • (いろいろ) キーに結びつけられた値。

例:

$('element').retrieve('someProperty'); // 戻り値someValue (上の例を参照のこと)

Hash: Element.Properties

このハッシュにはElement:get、Element:set、Element:eraseで渡される第1引数に対応した関数が入っています。

要素にカスタムプロパティを付け加える

Element.Properties.disabled = {

    get: function(){

        return this.disabled;
    }

    set: function(value){

        this.disabled = !!value;
        this.setAttribute('disabled', !!value);
    }

};

要素のカスタムプロパティを利用する

//"disabled"プロパティを取得。
$(element).get('disabled');

//"disabled"プロパティにtrueをセットし、属性にする。
$(element).set('disabled', true);

注意点:

さらにプロパティをセットできるよう、自動的に要素を返します。

オブジェクトの利用:

さらに、オブジェクトをsetメソッドのパラメータとしてを使うことで、これらのカスタム関数を利用できます。

例:

//setの利用:

$(divElement).set({html: '<p>Hello <em>People</em>!</p>', style: 'background:red'});

//new Elementsでの利用(setと同じ働きをします):
new Element('input', {type: 'checkbox', checked: true, disabled: true});

Elementプロパティ: html

Set:

要素のinnerHTMLをセットします。

構文:

myElement.set('html', [htmlString[, htmlString2[, htmlString3[, ..]]]);

引数:

  1. HTMLを持ったパラメータ文字列を幾つでも。

戻り値:

  • (要素) この要素。

例:

HTML
<div id="myElement"></div>
JavaScript
$('myElement').set('html', '<div></div>', '<p></p>');
HTMLの結果
<div id="myElement">
    <div></div>
    <p></p>
</div>

Get:

要素のinnerHTMLを返します。

構文:

myElement.get('html');

戻り値:

  • (text) この要素のinnerHTML。

Elementプロパティ: text

Set:

要素の中にテキストをセットします。

構文:

myElement.set('text', text);

引数:

  1. text - (文字列) 要素内の新しいテキストコンテンツ。

戻り値:

  • (要素) この要素。

例:

HTML
<div id="myElement"></div>
JavaScript
$('myElement').set('text', 'some text');

//myElementのテキストは'some text'になりました。
HTMLの結果
<div id="myElement">some text</div>

Get:

要素の中のテキストを取得します。

構文:

var myText = myElement.get('text');

戻り値:

  • (文字列) 要素内のテキスト。

例:

HTML
<div id="myElement">my text</div>
JavaScript
var myText = $('myElement').get('text'); //myText = 'my text'.

Elementプロパティ: tag

Get:

要素のタグ名を小文字で返します。

構文:

var myTag = myElement.get('tag');

戻り値:

  • (文字列) 小文字のタグ名。

例:

HTML
<img id="myImage" />
JavaScript
var myTag = $('myImage').get('tag'); // myTag = 'img'.

Native: IFrame

簡単にインラインフレームを生成し、操作するためのカスタムNativeです。

IFrameメソッド: constructor

インラインフレームHTML要素を生成し、そのwindowとdocumentをMooToolsで拡張します。

構文:

var myIFrame = new IFrame([el][, props]);

引数:

  1. el - (いろいろ, オプション) 変換したいiframeのIDか、iframe要素そのもの。渡されなければ、新しいiframeが作られます（デフォルト）。
  2. props - (オブジェクト, オプション) 新しいiframeに適用されるプロパティ。Element:constructorの属性と同じ。

戻り値:

  • (要素) 新しいiframeHTML要素。

例:

var myIFrame = new IFrame({

    src: 'http://mootools.net/',

    styles: {
        width: 800,
        height: 600,
        border: '1px solid #ccc'

    },

    events: {

        mouseenter: function(){
            alert('Welcome aboard.');
        },

        mouseleave: function(){
            alert('Goodbye!');
        },

        load: function(){
            alert('The iframe has finished loading.');
        }

    }

});

注意点:

  • iframeが"ホスト"と同じドメインにあれば、そのwindowとdocumentはMooToolsによって拡張され、その中でMooToolsを最大限に使うことができます。
  • もしiframeがすでに存在していて、idと異なるnameを持っている場合、nameはidと同じものに変更されます。
  • もしiframeが異なるドメインのものならば、MooToolsメソッドによって拡張されません。

Native: Elements

ElementsクラスはElementとArrayのメソッドすべてをElements配列に使えるようにします。

Elementsメソッド: constructor

構文:

var myElements = new Elements(elements[, options]);

引数:

  1. elements - (いろいろ) 要素の配列か、HTMLCollection オブジェクト。

戻り値:

例:

すべての段落の色を赤に変更:

$$('p').each(function(el){

    el.setStyle('color', 'red');
});

//$$('myselector')はのElementメソッドを継承しているので、
//以下の例は上と同じ効果があります。

$$('p').setStyle('color', 'red');

配列から要素を生成:

var myElements = new Elements(['myElementID', $('myElement'), 'myElementID2', document.getElementById('myElementID3')]);

注意点:

  • MooToolsでは、ノードコレクションを返す全てのDOM関数(例えば$$)の戻り値は、Elementsのインスタンスになっています。
  • Elementsは配列であるため、ElementとElementsの元となるArrayの全メソッドを継承しています。
  • Elementsインスタンスのすべてのノードは、Elementのメソッドをすべて継承しています。

参考情報:

Elementsメソッド: filter

与えられたタグ名によって、要素コレクションをフィルタリングします。Selectorsがインクルードされていれば、CSSセレクターでフィルタリングをできます。 関数でフィルタリングを行うという点で、Array:filterと同じです。

構文:

var filteredElements = elements.filter(selector);

引数:

  1. selector - (いろいろ) CSSセレクター。

戻り値:

  • (配列) このElementsインスタンスのサブセット。

このドキュメントはMooToolsのドキュメントを元に高橋文樹が翻訳（ちょっと改変）しました。
本家と同じく、Attribution-NonCommercial-ShareAlike 3.0ライセンスで公表されています。

トップに戻る